Firefox padding problem

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox padding problem

oddjob5

2:09 pm on Jan 12, 2006 (gmt 0)

Hi guys, long term lurker and finally coming in from the cold. need help with a padding problem which works in IE but not in firefox. Trying to get a pixel perfect site but the padding in firefox adds to the width of the container.

CSS:
div.container1
{
width:449px;
height:100px;
margin:0px;
padding:10px;
border:0;
background-color:#FF0000;
}

HTML:
<html>
<head>
<title>styletest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styleb.css" type="text/css">
</head>

<body>
<div class="container1">hello</div>
</body>
</html>

Firefox seems to add the 10px padding to the width/height of the container.

Am I missing something?
Any help welcome

SilverLining

2:36 pm on Jan 12, 2006 (gmt 0)

Hi oddjob5

Prob is IE and FF render the box model differently. Add this to your stylesheet (with the comments):

/* IE style \*/
* html .container1
{
width:449px;
height:100px;
margin:0px;
padding:5px;
border:0;
background-color:#FF0000;
}
/* IE style */

Cant remember if IE is less or more, but i think IE adds padding to the width.

Basically you can set diff margins and padding for IE. Other way of fixing is make your margins and padding 0px. Hope that helps.

Fotiman

3:06 pm on Jan 12, 2006 (gmt 0)

A better solution, though, is to use a complete DOCTYPE. This will put IE into standards mode (instead of Quirks mode), using the same box model as Firefox. Here's an example of DOCTYPE declarations:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

drhowarddrfine

3:21 pm on Jan 12, 2006 (gmt 0)

The standard is that content equals the width. Padding and margin are added to that. Firefox is correct in this behavior. IE is not unless you add a proper doctype. This is called the "box model" bug for IE.

oddjob5

10:13 am on Jan 13, 2006 (gmt 0)

Hi All, thanks for the help

I am converting a pixel perfect hTML site into CSS and getting the content to stay the same has been a nightmare. I am sure I will be calling on your skills again soon, and hopefully, helping others with their problems if all goes well :S (can't wait till that day)

Cheers again

SilverLining

10:53 am on Jan 13, 2006 (gmt 0)

The other option is to have a CSS for IE and one for Mozilla... will make your live a lot easier, although this is not the ideal solution. enjoy!