1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

100% Height not working on FireFox

Discussion in 'CSS' started by Khal3d, Aug 29, 2009.

0
  1. #1
    Hey everybody!
    I have a problem in FireFox with min-height: 100%, it's not working if id insert div into another div like this code
    <html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>100% CSS Height</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		html, body {
			direction: ltr;
			font: 9pt Tahoma;
			height: 100%;
			text-align: center;
		}
		.wrapper {
			width: 950px;
			background: #444;
			margin: 0 auto;
			min-height: 100%;
			text-align: right;
		}
		*html .wrapper {
			height: 100%;
		}
		.content {
			min-height: 100%;
			background: #FFFFAA;
			margin: 0 15px;
		}
		*html .content {
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="content">
			text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
			text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
		</div>
	</div>
</body>
</html>
    HTML:
    I don't really know why "content" isn't 100% Height

    please help me!
     
    Khal3d, Aug 29, 2009 IP
  2. AssistantX

    AssistantX Peon

    Messages:
    173
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Seems like you found a slight Firefox bug. However, there is no reason to use min-height in this situation over height. Setting the height to 100% would have the same effect. If more space is needed, the div will still be allowed to stretch, especially with overflow set properly.
     
    AssistantX, Aug 29, 2009 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I don't see why the code above would work in any browser but IE6.

    You can get away with setting a min-height or a height of 100% on a direct child of the body element, but further not. The rules are, unless a parent has an explicit height set, you can't get away with setting a % height on a child. The html and body=100%, direct-child=100% is an exception to that rule.

    Since .wrapper does not have an explicit (non-%) height. its child .content can't have a % height at all.

    parent {
    height: 60%;
    }

    child {
    height: 100%;
    }
    doesn't work. But this would:

    parent {
    height: 60em;
    }
    child {
    height: 100%;
    }
     
    Stomme poes, Aug 29, 2009 IP
  4. bobjones121806

    bobjones121806 Guest

    Messages:
    1,417
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try not to use 100% Height
     
    bobjones121806, Sep 2, 2009 IP
  5. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    100% height works only when the height of its parentNode is explicitly set in px or em
     
    unigogo, Sep 3, 2009 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Actually that is NOT always true - 100% height DOES work if the parent element is body or html - in fact you can nest them down and it will work .

    The problem here is not the 100% height - it's that you cannot declare a min-height off of a min-height. That's the only thing really holding it back. The obvious fix is to use height on the wrapper instead, but then it doesn't stretch past the bottom of the screen if the content is too tall - What's needed is a container you can declare 100% height on, but that will still expand IE-style as the content grows instead of remaining 'fixed' in size as you scroll down.

    There is such an element, and it's going to make many developers wince. This is another of those rare exceptions where a table can do something you can't do with css.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<title>
	100% CSS Height
</title>

<style type="text/css">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

html, body {
	position:relative;
	height:100%;
} 

body {
	text-align:center; /* center #pageWrapper */
	font:normal 85%/140% tahoma,helvetica,sans-serif;
	position:relative;
}

#pageWrapper {
	border-collapse:collapse;
	width:950px;
	height:100%;
	margin:0 auto;
	text-align:right;
	background:#444;
}

#pageWrapper td {
	height:100%;
	padding:0 15px;
	vertical-align:top;
}

#content {
	min-height:100%;
	background:#FFA;
}
* html #content {
  height: 100%;
}
</style>

</head><body>

<table id="pageWrapper"><tr><td>
	<div id="content">
		text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
		text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
	<!-- #content --></div>
</td></tr></table>
    
</body></html>
    Code (markup):
    It's ugly, but it works - in fact it works all the way back to IE 5.5 - now you have to ask yourself, is the visual effect you are aiming for worth resorting to a table to implement?

    Though there is the added bonus you gain TWO places you can put backgrounds opening up the possibility of a fluid or semi-fluid layout instead of a fixed one
     
    deathshadow, Sep 4, 2009 IP
  7. corina

    corina Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I have been working to get this thing to work all day - either it did OK on long content pages, but not on short, or the other way around. Would I also be forced to just go ahead and use a table?

    I made a test-case here: http://www.personaltalent.nl/test.html
    (or am I supposed to include the code here? Sorry, I'm new here!).

    This works with a short content page, but when I resize my window, it the footer doesn't stay at the bottom of the page.

    Believe me, I've put the footer in the body, html, content, divs - it won't work!

    Who knows what I should do? The site is online already, but the footer keeps on jumping all over the pages... :mad:

    Thanks for anyone with a clue how to attack this one!
    Corina
     
    corina, Sep 4, 2009 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Well Corina, you've got a few issues there where the markup in question is just overthought... the overstuffed keywords and description that doesn't look like it describes the page doesn't help. (though my knowledge of germanic languages is rusty)

    Part of the issue is you fell into the 'trap' of nonsense like 'spry' menus, part of it is just the wrong markup for certain sections of code (like the paragraph and inlined img's for an obvious list)

    Hang on a bit, I'll do a rewrite of what I THINK you are trying to do - I can't be 100% certain though because that image of the skydivers - I'm not even certain where you are trying to place that (Hell, I'm not even certain I WOULD place that on the page)
     
    deathshadow, Sep 4, 2009 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    ... and here it is:
    http://www.cutcodedown.com/for_others/Corina/template.html

    I was kind of guessing on what you were aiming for on appearance - hopefully I'm remotely close to what you were aiming for. As with all my examples the directory:

    http://www.cutcodedown.com/for_others/Corina

    is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, Valid CSS 2, tested working identical in IE 5.5, 6, 7 & 8, FF 2, 3 and 3.5, Opera 9.64 and 10, and the latest iterations of Safari and Chrome.

    You'll notice I combined all the menu images to a single file - removing any worries about pre-loading them or mouse-over delays, kicking 'sprymenus' to the curb in the process.

    The rewrite of the page heading to a h1 allows for much better graceful degradation. Images off it now mimicks the appearance of the images on version within the limitations of the markup, and it gives your page an actual meaningful heading when CSS is disabled.

    I got rid of the heading on the body text because we can already tell them they are on the home page in the TITLE tag and the menu - so it's a bit silly to use that as a heading IMHO.

    The images in the content list are now applied via CSS - removing the headache of needing to think about those as you add/remove items. Oh, and I gave you some better arrows for that list.

    The big change though comes in applying the 100% min-height code and implementing the footer. The trick of 100% min-height layouts is that only one element can actually have that min-height on it, and that the footer has to be positioned in a manner it will not overlap your content. The best way I've found to do that is to move the footer AFTER the min-height content area, then use a negative margin to ride it up over the content area. You then just pad the bottom of your inner content DIV to make 'room' for the footer. In this case, I put the skydiver image on that body background and padded the bottom of that image (inside the .jpg file - I expanded the height to 301px) equal to the footer height to 'slide it up' - sometimes you cannot achieve your placements entirely in the markup within a reasonable amount of code, with changing the image dimensions often being a better approach.

    The footer's wrapper draws the green bar at the bottom (instead of using body which I used to draw the top bar) and handles our positioning, then #footer itself just sets the width and centering.

    Image maps are ALWAYS a bad idea from an accessibility standpoint, so I split that image into two files and made it two anchors with two separate images. I put them both in a div and floated them to the right (I'm assuming that's what you were aiming for on placement?) so that you could have room for your disclaimer text. I also tweaked them to look good on the green background while in there... If you want them to be placed in the white background that could be done with absolute positioning.

    In any case, hope this helps - CSS layouts seem tricky at first, but are generally only as complicated as you make them... and a lot of people over-complicate really simple things.
     
    deathshadow, Sep 4, 2009 IP
  10. corina

    corina Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Wow! I never even in my wildest expectations think anyone would do so much fiddling and thinking on this case! Thank you!

    The menu looks so much cleaner and all the elements are stuck where they are supposed to be! Unfortunately, you make me feel more like an absolute newby now - since I can't seem to tweak your design into what I finally need it to be.

    In fact, I should have included the (faulty) final design: http://www.personaltalent.nl/index.html - design works OK, except that the images in the footer don't stay stuck on the bottom of the page, where they are supposed to be, over the green footer-line.

    Since the skydivers are higher than the footer wrapper height in your design and it's two elements (not just one in "block" display) - I can't get it to work, without turning your whole design into another mess.

    I really believe it's all supposed to be simple, but as I touch one thing, I seem to mess up 10 others! Is there a way you can help me just a little bit further towards getting the quote and skydivers on the bottom of the page, over the green footer?

    And then I will overhaul the whole site again, with your clean css. I only wish clients would see all the time (and friendly help) that went into these things...

    Thanks again!
    Corina
     
    corina, Sep 5, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    When I was newber I went through many of deathshadow's rewrites for other people as a learning tool. So keep what he's written for you here just for learning, even if it's not what you need for your real page. If you fish around the forums here you'll see some other rewrites with a lot more explanation and that should help as well, as his code is pretty consistent.
     
    Stomme poes, Sep 7, 2009 IP
  12. corina

    corina Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Hey Stomme Poes (bet you're not as "stom" as you make us believe! ;)),

    Thanks for your reply. I did in no way mean to be disrespectful or ungrateful to DeathShadow! It was more that he gave me a gift, that I have trouble unwrapping. I feel I am really close, but there is this piece of gift wrap really stuck. Rather than putting the gift in a cupboard and forget about it, I am really trying hard to make it work. In fact, just because he did go through so much trouble.

    I am afraid of messing up the whole gift, by my stupid tries to get those idiot skydivers and the quote in the bottom green line - which unfortunately hasn't succeeded yet...

    Of course I'm reading up on the intricate CSS ins and outs, but I keep being distracted by this one thing I have to succeed in first. Never mind, I keep trying and trying again, quietly swearing every time I run into browser incompatibility and CSS glitches...
     
    corina, Sep 7, 2009 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Should the footer expand to contain the skydiver image, or should it be allowed to peek out into the content area?
     
    deathshadow, Sep 7, 2009 IP
  14. corina

    corina Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    The footer should be lower than the image - that is, the quote and green line are equal height, the skydivers are higher.

    Look: http://www.personaltalent.nl/template.html
    I'm almost there! I got the image in the footer, now I need to add the quote image (http://www.personaltalent.nl/pix/quote1.gif) to the left of the skydivers and then the small div with psychology logos to the right, in the white background.

    I'm just having trouble with the display:block that is used in the footer, which doesn't allow me to add the quote image inline with the skydivers.

    Thanks!
    Corina
     
    corina, Sep 7, 2009 IP
  15. corina

    corina Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Oooooh, almost there! I managed to get the images in, now just the logos and I'm done. Thanks again for your help, I feel like I went through the laundry machine this weekend, but now I'm ironing the last bits out and it's cleaner and meaner!

    Corina

    edit: oops, spoke too soon, IE6 en 7 don't agree and make the height of the green line far to small. Back to the drawing table... IE8 and Firefox 3 get what I want!
     
    Last edited: Sep 7, 2009
    corina, Sep 7, 2009 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Corina: no I didn't think you were dissing him, only that it takes time to read what he's written when it's new.

    And, later, you can play with a copy of it, somewhere where it doesn't matter if you break it. : )
     
    Stomme poes, Sep 7, 2009 IP
  17. corina

    corina Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Good idea, since the menu setup is something I really want to be able to reproduce!

    I'm almost there... I think. It works in IE8, FF3, FF2. Only in IE7 there is a small white band under the footer and in older IE versions the green band in the footer doesn't show. I am *this* close to stating people should just upgrade their browser... unless someone knows how to eliminate this last bit of a problem...

    See: personaltalent.nl (only on the index page, the rest is still old version).
     
    corina, Sep 7, 2009 IP