Div height: identic in IE and Opera, but differ in Firefox

Div height problem

[byte_eater]

Hey guys!
This is my first post here, and really hope to get some help, cause I tried everyting...:(

The situation is that in firefox I get a different height then in IE and Opera... I have other pages on this web site and everithing is right, just this page don't know were I mistaken...

Pls take a look at the source: [URL's removed]

I tried everything, and 100% height, and margin:0 ..and nothing I tryed worked... SO pls If someone have some sugesstions I will appreciate...

Thanks and hope to solve this problem!

[edited by: SuzyUK at 6:15 am (utc) on Feb. 18, 2007]
[edit reason] Please no site specifics for review [/edit]

[penders]

Hi byte_eater, which browser versions are you testing? FF1.5, IE6 and Opera8 all produce different/incorrect 'heights' on just that one page.

I cannot immediately see the problem, other than your page does not validate - you have a <ul> (block-level) element inside a <dt> - your other pages seem to be OK in this respect.

[byte_eater]

I arranged the divs now like they should look like, and in IE 6 and Opera 9 they look perfect (at the bottom), while in firefox 2.0 the content expands lower...

And this happens only with this page! Cause others are stable in all three browsers and look identically. And I cannot figure it out why is this so, cause the template for ghid.html I took from inovatii.html, and the last work perfect...

With <ul> I know there is an error, and I'll try to figure it out how to replace the inside <ul> with smth else.... but I am paying attention to web standards, and always try to get my cod valid!

Is the page ghid.html looking the same in all your browsers?

[SuzyUK]

sorry I know this doesn't make much sense to others, but I put your post back without the URL's (please see the forum charter [webmasterworld.com] about site reviews) so you can see the answers

I don't know exactly why it's just this page but I'm surprised it isn't happening on more than one page actually ;) - It is something to do with how you are positioning the icons at the bottom of the left column.

You are giving the left column, indeed the whole layout, a very specific height and then positioning the icons using a specific top margin value, the right column in this particular page must be longer than the template and overflowing the expected height? anyway those are the specifics I didn't look into - but try removing one line of content from the right and you'll see the situation change (not fix) - your whole layout relies on height and actual content which is not a good idea as it only takes one x-browser default margin to differ slightly and you get what I think you are seeing.

maybe instead of trying to position the icons beside the footer by forcing them downwards, you could make the footer 100% width of your layout and then position the icons div INSIDE the footer and to the left.

IMHO your layout would lend itself nicely to a faux column floated template because your background image would take care of the full height columns look without you having to use specific heights to force it

Suzy

[edited by: SuzyUK at 6:58 am (utc) on Feb. 18, 2007]