IE7 and Firefox DIV Height Different

JamesU2005

JamesU2005

JamesU2005

Soldato
Joined
30 Nov 2005
Posts
3,084
Location
London
Right, having problems with a div height different between IE7 and Firefox.

The image below shows the difference. IE7 at the top, Firefox the bottom one.

What the image is showing is the height difference at the bottom of my DIVs. IE7 has a larger height than Firefox. I've shown a little bit of cotent so it makes it more obvious.

36454827ik1.jpg


Are there any known bugs or work arounds for this?

Thanks
 
Yup, this is a known bug. I believe you have to use something along the lines of:


Code: 
height: auto [B]!important[/B];
min-height: 250px;
height: 250px;
I always find positioniseverything.net very good for this type of thing. If you're having a CSS problem like this, chances are a fix will be listed there.
 
Last edited:
Am pretty sure its just the differences in default padding/margin values in each browser - have you tried that code on a blank page with none of your existing css styles applied?

You could also try adding the rule:

Code: 
* { margin: 0; padding: 0; }

You could always try opening the page in chrome and using the inspect element tool - you could then if some other rules are being filtered down or auto calculated.
 
Quirks mode... IE really does suck at CSS.

If you have any padding, margins or borders, these are taken off the height or width value of the div in IE, wheras in anything standards compliant these values are OUTSIDE the DIV.
 
Perhaps something I should have done earlier but didn't.

But the height is the same in both Firefox and IE in terms of pixels. But for some reason there is a bigger gap in IE than Firefox.

Any ideas?
 
Right, I think the problem is that IE is not adding enough padding/margin to some items.

Thus in Firefox I am getting the correct positioning of the content whilst in IE everything is slightly more higher up the DIV. If that makes any sense?
 
JamesU2005 said:
Right, I think the problem is that IE is not adding enough padding/margin to some items.

Thus in Firefox I am getting the correct positioning of the content whilst in IE everything is slightly more higher up the DIV. If that makes any sense?
Click to expand...


yup, its always going to be along the lines of a browser adding a different amount of default padding/margin etc etc. In chrome, you can rule a lot of stuff out by using the metrics tab in the inspect element window.
 
You must log in or register to reply here.
Back
Top Bottom