PDA

Click to See Complete Forum and Search --> : firefox issue with height/padding

bindia
06-07-2007, 08:12 AM
The padding-top and height css properties differs in IE and Firefox.
This is what happens:
<h2> Hello</h2>
Now if we add the style tags
h2
{
background-color:yellow;
padding-top:10px;
height:50px;
}

In IE ,the height stays fixed as 50px but with Firefox, the height tends to increase as we add the padding-top value.

Is there any way to fix this in Firefox, ie to have the height fixed at a certain value?

Please help.

thanks
Bindia
Centauri
06-07-2007, 08:25 AM
NOTHING needs to be fixed in Firefox - the defined size of an elements is the inside dimensions, and padding, margins, and borders add to this. If you are seeing different behaviour in IE, it is because you are not using a valid doctype and IE is in quirks mode with its buggy outdated box model.
bindia
06-07-2007, 08:47 AM
Pardon me...I am quite a beginner with CSS.
Is there anything to be done to fix this 'quirk' mode in IE?....any line of css style tags or anything.


Thanks
Centauri
06-07-2007, 08:56 AM
This is not css, but basic html - the first line that should appear in your html page is the doctype (http://www.w3.org/QA/Tips/Doctype). For new pages, the most appropriate one to use is html 4.01 strict - so the start of your html should look like <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Your title here</title>
</head>
ray326
06-07-2007, 11:12 AM
Centauri is being kind by using the term "outdated." IE's box model is just flat wrong in older versions and in new versions without a proper doctype.

http://www.quirksmode.com/
Major Payne
06-08-2007, 04:18 PM
Just some additional info.

Internet Explorer box model bug (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)

One of many sites covering the "hack" for IE's box model problem:

Solutions to the Internet Explorer 5 (IE5) Box Model - Hack and others (http://htmlfixit.com/tutes/tutorial_Internet_Explorer_Broken_Box_Model_Hack_and_Other_Alternatives.php)

Ron