CSS - Does IE7 interpret padding differently to IE6?

defenstration · 25-05-2007 11:45pm #1

Here is the code I am using for one of my style sheets:

#CONTENT {
position:absolute;
top:154px;
left:50%;
margin-left:-367px;
width:749px;
height:71%;
text-align:justify;
padding-right:15px;
background:#FFFFFF;
overflow:auto;
}

This works perfectly in IE6 - I want the width of the style sheet (when you include the padding and the scrollbar) to be 749px and I want there to be a space of 15px between the text and the right-most edge of the style sheet.
If I use this code in IE7 though, it does not display the padding within the 749px but instead adds it onto the width so that now my style sheet is actually 764px in width. The same occurs in Mozilla Firefox 2.0.0.1 - the padding is actually added as an extra part of the style sheet rather than being displayed within the specified width of the stylesheet.
Is this a known issue or must it be my coding that is causing some sort of inconsistency?

Cheers in advance.
Jim

Adam · 26-05-2007 1:20am

To my knowledge, your options are to either

1) Use use the padding css rule as you are, and minus 15px from the full width of the div so that it works in FF, and then use an IE hack to read the width as it was originally

OR

2) The simpler method, which you should really use in my opinion is put the text inside another div, take the padding off the CONTENT div and put it on the new div, seperating layout from stlye even further.

defenstration · 26-05-2007 1:02pm

So you're saying that IE6 and IE7 do interpret padding differently then?

I dunno what you mean by an IE hack in your first option. Any chance you could gimme a bit more info?

As regards your second option, I've pretty much done that already - I have a CONTENTCONTAINER div as well as a CONTENT div:

<?XML version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<HEAD>
<META http-equiv="Content-Type" content="application/xhtml+xml;
charset=UTF-8"/>
<TITLE>THE FENIANS GAA CLUB - Club Profile & History</TITLE>
<META name="Author" content="Jim Broderick"/>

<STYLE type="text/css">

BODY {
margin:0px;
border:0;
margin:0px;
padding:0px;
text:align:center;
font-family:arial, verdana, sans-serif;
font-size:0.8em;
background:#000099;
overflow:auto;
}

A {
color:#000099;
text-decoration:none;
font-weight:bolder;
}

A:hover {
text-decoration:underline;
}

#HEADER {
position:absolute;
top:13px;
left:0px;
width:100%;
height:90px;
text-align:center;
background:#FFFFFF;
overflow:hidden;
}

#MENU {
position:absolute;
top:116px;
left:50%;
margin-left:-382px;
width:764px;
height:25px;
text-align:center;
background:#000099;
overflow:hidden;
}

#CONTENTCONTAINER {
position:absolute;
top:154px;
left:50%;
margin-left:-382px;
width:764px;
height:71%;
text-align:center;
background:#FFFFFF;
overflow:hidden;
}

#CONTENT {
position:absolute;
top:154px;
left:50%;
margin-left:-367px;
width:749px;
height:71%;
text-align:justify;
padding-right:15px;
background:#FFFFFF;
overflow:auto;
}

</STYLE>
</HEAD>

<BODY>

Adam · 26-05-2007 1:25pm

That's not exactly what I meant. You don't need all the other rules on the inner div, once the content div is contained by the contentcontainer div it is governed by the positioning that was set, so you simpley need to do this:

<html>

<head>
<style>

#CONTENT {
position:absolute;
top:154px;
left:50%;
margin-left:-367px;
width:749px;
height:71%;
text-align:justify;
background:#CCCCCC;
overflow:auto;
}

#TEXT {
padding-right:55px;
}
</style>
</head>
<body>

<div id="CONTENT">

<div id="TEXT">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel eros ac mauris rhoncus viverra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Morbi vehicula venenatis enim. Pellentesque vel diam. Curabitur pretium tellus nec leo. Morbi blandit. Sed commodo, magna in fermentum bibendum, odio metus fermentum lacus, eget molestie urna purus vel magna. Sed eros neque, rhoncus a, aliquet eu, venenatis eget, lectus. Fusce et ante vel ante blandit rhoncus. Proin nonummy, arcu vel fermentum fringilla, odio ligula semper sapien, sit amet ullamcorper turpis mauris non orci. Nam placerat, diam quis imperdiet luctus, elit nulla placerat est, suscipit mattis leo velit et quam. Aenean varius purus sit amet est. Nulla pede ipsum, egestas quis, lobortis id, luctus in, pede. Integer vulputate, ligula eget dignissim lacinia, pede sapien lacinia nibh, in pretium justo eros vitae magna. Praesent ornare, tortor vel euismod porta, massa ligula ornare orci, et accumsan leo tortor non dui. Maecenas sit amet velit tempor lectus aliquet convallis. </p>

</div>

</div>

</body>
</html>

Does that make more sense?

Evil Phil · 26-05-2007 11:00pm

This more of a Web Master & Flash kind of a thing.

DJB · 29-05-2007 6:11am

I suggest getting it working in FF and then fix for IE6/IE7. You can use conditional css to this. See:

http://www.quirksmode.org/css/condcom.html

Also have a read up on the box model bug in IE:

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Rgds,

Dave

CSS - Does IE7 interpret padding differently to IE6?

Comments