<div>'s expanding to content height in FF

xxkylexx

04-28-2006, 08:02 PM

Hello,

In firefox browser I am having trouble with my <div>'s not expanding out height-wise appropriate to its content. Sometimes it does, sometimes it doesn't. All other browsers seem to work fine regarding this. I have attached 2 screenshots to help explain. Any ideas on what I need to set this <div>'s style to to accomedate this appropriatly in FF?

Wrong: http://img46.imageshack.us/img46/226/wrong1hx.jpg

Right: http://img46.imageshack.us/img46/2955/right6rb.jpg

Thanks again!

Kyle

_Aerospace_Eng_

04-28-2006, 10:24 PM

Images are useless in this situation. We need code or a link. I prefer the link.

drhowarddrfine

04-29-2006, 12:01 AM

The problem is not Firefox, it's IE. IE expands divs to contain floated content. This is incorrect behavior. But, like aero said, a specific solution requires a look at your code.

xxkylexx

04-29-2006, 08:20 AM

Sorry for that.

Code can be view via this URL: http://www.websolvents.com/forums/

kewlceo

04-29-2006, 11:10 AM

Here's the trick I use for keeping floats inside of DIVs:
#container:after {
content: "";
display: block;
height: 0;
clear: both;
}
This assumes I alread have the #container coded in CSS, and that it is the <DIV> enclosing floated content. Since IE is not fully CSS2 compliant, it ignores the :after psuedo-element, which is fine because IE (incorrectly) encloses the floated elements anyway. Firefox, Opera, and other CSS2 compliant browsers will recognize the :after psuedo-element and expand the <DIV> to enclose the floated element.

Credit for this solution goes to Matt Brubeck, and you can read his article in full by following this link: How to completely enclose a floated element in CSS2 (http://www.cs.hmc.edu/~mbrubeck/clear-after/).

Cheers,

Rick

_Aerospace_Eng_

04-29-2006, 04:45 PM

Okay make sure all of your images have widths and heights set to them. Firefox some times needs this to display the page properly. Also this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
should be this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It may throw things off a bit in IE or might not do anything at all to IE but it may make FF better to. After all you should be coding for a good browser (FF) and tweaking for the bad one (IE). overflow:hidden; on the main container also fixes the problem sometimes.

xxkylexx

04-29-2006, 10:21 PM

Still doesnt seem to be working properly in FF.

I've been editing here for hours, still cant seem to find a fix.

Here is another link that will not expand out in Firefox:
http://www.websolvents.com/members/

Click around on the knowledgebase/announcement, etc. links there in the middle. Sometimes it expands out for the content, other times is doesn't and has is "hidden".

Any more ideas?

I really appreciate the help.

Kyle

drhowarddrfine

04-30-2006, 12:49 AM

The second page doesn't even have a doctype and both have a bazillion html and css errors. Validate and fix those first.