If someone increases their font size on this site with FF, it moves the footer text down one line and disappears with no background. Is there a fix for this?
Thanks much,
Well you have a fixed height on the #footer, and when the text increase happens, the height of the footer should get higher, hwoever it can’t because you have a fixed height set.
If you switch it to min-height (or even remove the height declaration altogether), it shoudl work :).
Neither of those work. I tried min-height: 29px and tried removing the height. Can you explain what you mean?
Your Firefox must be set to enlarge text only rather than zoom. Very nice.
Normally, setting a fixed height on something means it won’t grow when the content inside does. Ryan is correct that you should generally avoid it.
But the reason it’s still not growing is because the text inside is floated. The footer doesn’t “see” those floats and so doesn’t enclose them (which static block containers normally do to everything inside them). You’ve heard of clearing divs? this kind of thing is why some people use them.
In Internet Explorer 6 and 7, now that you have min-height instead of height, things should be growing okay with the text because the width: 100% is triggering Haslayout.
For everyone else, you can use one of the common float-enclosing tricks:
You could set #footer to overflow: hidden. So long as the height is min-height, it will still grow with content. Blocks with overflow set to anything other than “visible” (the default) are required to “see” their children so they can determine if there even IS any overflow. This is the solution I use most of the time. Don’t use it if content must ever be able to come out of the container.
You could set the #footer to display: inline-block. Since you’ve stated its width to 100% already, this should look okay, but test it. I found this started breaking my layouts when I did severe text-enlarge on smaller-width screens, but might be okay with you (or you don’t deal with smaller screens maybe).
You could set the #footer to display: table. I’m uneasy with this one since tables have their own set of rules they play by and I’m not always expecting what they do.
You could use a fake CSS element to “clear” the floats. Once there’s a “child” after the floats who clears them, the footer finally can see its last child and encloses everyone.
After the #footer declaration:
#footer:after {
content: " "; (if Firefox doesn’t like this, use unicode space \0a inside the quotes, but I’ve used an empty string before just fine)
display: block; (only blocks clear cross-browser)
clear: both; (you have floats in both directions)
height: 0; (something I add for browsers who use things like font-size/line-height to make a gap)
}
You could float the footer itself. Floats must contain floats. Since you’ve set it to 100% width, it shouldn’t be able to ride up alongside your main content. I don’t like this solution.
Those are the most common of the ones that don’t suck.
Oh, whoops. I didn’t realize you had flaoted contents in the footer. I kind of guessed because my college computers don’t have firebug, which I normally use to debug. So I guessed :).
You have floated <p>'s inside of the footer which (besides the min-height/height you set) makes it not even realize it has content inside of it. The footer thinks it’s empty thus it won’t auto expand.
A solution you can try is overflow:hidden; on the footer. That’s the simplest fix and best :).
Edit-Stommeeeeeeeeeeeeeeeeeee…
Thanks sooo much for the explanation Stomme. I tried overflow: hidden and it works. What do you think? Would you change anything else in case someone increases font?
Well anytime you set height on something that has content (text) that can be increased in size, you are just asking for trouble. You could cheat and just set the height in “em”'s that way, on resize, it wouldn’t break :). Everything (of what I see in your stylesheet) seems to be just in pixels.
Another way would be to set a min-height instead of height. However, know that IE7 doesn’t support it :).
I changed it to ems but not sure how that helped. Check with FF. I did already change it to min-height. Check current CSS:
#footer{
width:100%;
min-height:1.813em;
overflow: hidden;
margin:30px 0 0 0;
background-color:#5a92b9;
padding:5px 0px;
font-size:.65em;
}
.alignleft {
float: left;
margin:4px 0 0 15px;
}
.alignright {
float: right;
margin:4px 20px 0 0px;
}
If you set an EM height, it will just expand with text resize. PX won’t. That’s all .
Do you even need to set a height on the footer? If you got rid of it, that would be best, of course :).
Right. Okay, removed it. So I guess it’s good to go now.
Yes you are. To sum up, as a golden rule, avoid setting heights on parents that have content inside of them.
Different browsers render text bigger/smaller so you have more headaches than not if you set heights.
Glad we could be of help :).
Edit-I shoudl mention that the overflow:hidden cut off the text. Normally it’d just hand out which isn’t a HUGE deal, I guess, but you shouldn’t let that happen whiel you know of the issue.
I totally am not getting what you are saying here:
You had a height set. You had overflow hidden set. Which means that anything that overflows the boundaries of that height (aka the text wast oo big and was going into another line, which caused the “pseudo height” of it to be too big) will get cut off. Overflow:hidden; cuts of anything which doesn’t conform to the dimensions set (if there are any)
For example
<div>text<br>text</div>
If you set the height to that to 10px, and overflow:hidden; without a doubt, that 2nd text will be cut off. It’s too small. Do you understand? You can normally look for overflow:hidden to be the culprit in stuff being cut off :).
Yes, I do.
And this is what I have for code now. If I remove overflow:hidden, it doesn’t work:
#footer{
width:100%;
overflow: hidden;
margin:30px 0 0 0;
background-color:#5a92b9;
padding:5px 0px;
font-size:.65em;
}
.alignleft {
float: left;
margin:4px 0 0 15px;
}
.alignright {
float: right;
margin:4px 20px 0 0px;
}
Well you don’t haev a height set which means you won’t get anything cut off, so taht example is flawed right there :).
You have floated children, alignleft and alignright. Without overflow:hidden; on the parent, it won’t contain the floats. Which means the parent thinks it’d be empty without it, and the height is essentially 0.
Now, you could do other stuff instead of overflow:hidden; (ONLY IF you need something to hang out for visual purposes), such as the clearfix (google if you don’t know what that is)
With the height being 0 (without overflow:hidden) some stuff, aka the background color, won’t show up :).
Should have kept my mouth shut about the overflow:hidden comment :(.
Maybe so. I think it may be hard too b/c you said you don’t have Firebug. I don’t get what you’re saying. Yes, if I remove overflow:hidden the blue bg goes away and you can’t see white text. Please show me what you’re talking about with code for this footer.
I don’t need firebug to explain what I am talking about, well, I shouldn’t :).
Anyway take this example.
#footer{
width:100%;
/*overflow: hidden;*/
margin:30px 0 0 0;
background-color:#5a92b9;
padding:5px 0px;
font-size:.65em;
}
Now, since you have floated children, the #footer is calculated to be basically 0 height. There is no other content in the footer that isn’t floated, so it will be 0 height. Now, when you have a 0 height element, it won’t show background colors or images. Basic stuff.
Take this example
#footer{
width:100%;
[B]height:20px;
[/B]overflow: hidden;
margin:30px 0 0 0;
background-color:#5a92b9;
padding:5px 0px;
font-size:.65em;
}
You have a height set. This is basically your last example you had in the beginning of this thread. When the user will text resize, the content will eventually outgrow the 20px, and due to the overflow:hidden; set, it will chop off anything exceeding 20px, which means basically, anything on 2nd line will be cut off. If you remove the overflow:hidden in this example, yes the text won’t be choppedoff, however it still thinks THERE ARE NO CHILDREN. Which means there is no background color. Even though tehre is clearly content in there, the parent #footer doesn’t think so. It needs that overflow:hidden; to c ontain the floats (or another clearing way, such as the clearfix)
I haev another 5 minutes before I need to go to work, so if you have any more questions I’ll have to wait to respond until I getoff work. Hopefully this was clear enough for you.
Yes, very. Thanks. I thought you were saying to remove the overflow:hidden from the latest code I have. Okay, you’re not. Got it. I get it :-). Code is good. I’ll try the clear float option for kicks too.
Glad I could help :). You’re welcome.
I want to clarify something I said earlier:
The second sentence… does not mean you need min-height to use overflow:hidden, but that min-height is better than height (for reasons Ryan mentioned above, cutoff). No height at all (which means height: auto by default) is also good 