CSS Height problems in Firefox!

**AgentFitz** · December 22nd, 2006, 01:59 PM

I'm having problems. Even though Firefox conforms to W3C specs and IE does not, FF is the one that I'm having problems with. IE has some functionality built that I'm having trouble getting FF to replicate! Two examples are at the link below:

http://www.lagranboda.com/quemas.cfm

You'll notice that in IE, this page shows up nicely, but in FF, the div containing the main textual content extends beyond the "container" div. Even though I set both the nested maincontent and parent container div's height to "auto." Basically, I can't figure out how to get FF to expand the container div automatically considering the maincontent div is nested inside it and has a greater height. Making sense?

The other thing....it is so annoying to me how in FF the scroll bar on the right hand side of the screen only appears on pages that are long enough to warrant it. This bothers me because the pages jerks around left to right as you navigate depending on the height of the pages you're viewing. For an example, just click around on some of the links on the site above and notice how the screen jerks left and right on taller and shorter pages. In IE, on the other hand, this is not a problem, because even when the content isn't "tall enough" to warrant a scrollbar, a "grayed out" scroll bar is ready and waiting in it's place. Is there a way to force FF to keep the scroll bar up regardless of the height of the page?

Thanks for any insight!!

**simplistik** · December 22nd, 2006, 02:13 PM

clear your float and/or don't set the height to anything. but you need to clear your float for sure

**AgentFitz** · December 22nd, 2006, 03:37 PM

Thanks for the shout simplistik. When I gave that a shot....it messed things up even worse. I'm gonna keep looking, but if anyone feels like it....take a look at the CSS here:

http://www.lagranboda.com/bodastyle.css

it's jacked up I know....I need to work big time on consolidating properties with the correct selectors.

Thanks,
Fitz

**r_ferns82** · December 23rd, 2006, 02:04 AM

try min-height: 100px; for ff

also try using "* html " div tag for "ie" and the usual for "FF" that way you can add different values for one property

**simplistik** · December 23rd, 2006, 06:35 PM

make a class called .clear or somethin' in your css...

make it

Code:

.clear { height: 1%; clear: both; margin: 0; padding: 0; }

then after your "maincontent" div put

HTML Code:

<br class="clear" />

and remove the height from your container it's lie 946 or something... just remove that attribute all together.

should work just fine. havent tested it though

**thesean** · December 28th, 2006, 04:53 AM

I had a similar problem, and I removed the float. Worked like a charm, thanks a lot Simplistik!

**AgentFitz** · December 28th, 2006, 11:54 AM

Thanks a million for all the responses...right after I get back from las montanas, I´m gonna give these suggestions a shot. I will post again when I get this puppy figured out.