CSS Forum

**lilycup** · 08-21-2007, 11:43 PM

Hi,

I know there is a problem with IE doubling the padding of things, but I wondered if there was a way to stop this?

This is my CSS code, and it's the padding-top:15px; which is causing the problem.

It looks just like I want it to in Firefox, but in IE it looks like 15px has turned into 30px.

Code:

/* CSS Document */

body  {background-color:#999A57;
      font-family:Arial, Helvetica, sans-serif;
      color:#404040;
      font-size:12px;
      margin-top:20px;
      }
      
      
#page-container {width:789px;
                 margin:auto;
                 background-color:#FFFFFF;
                 border:2px;
                 border-color:#6A6B2C;
                 border-style:solid;
                 }      
                 
#header {border:15px;
         border-color:#FFFFFF;
         border-style:solid;
         }                 
         

#menu {
  width:145px;
  float:left;
  background-color:#FFFFFF;
}

#content {
          width:605px;
          margin:8px 0px 15px 145px;
          background-color:#FFFFFF;
          border-left:1px;
          border-right:0px;
          border-top:0px;
          border-bottom:0px;
          border-color:#404040;
          border-style:solid;
          padding-left:20px;
          }

#footer {width:789px;
         text-align:center;
         padding-top:10px;
         font-size:10px;
         }
            
img.floatRight {float: right;
                margin: 6px;
                }  

img.floatLeft {float: left;
               margin: 6px;
               }              

A:link{color:#141414;text-decoration:none}
A:visited{color:#141414;text-decoration:none}
A:active{color:#141414;text-decoration:none}
A:hover{color:#B4B16D;text-decoration:none}    

ul#list-menu {
width:134px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
padding-left:7px;
list-style:none;
font-weight:bold;
}

ul#list-menu li a {
text-decoration:none;
display:block;
padding-top:15px;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
color:#141414;
}

ul#list-menu li a:hover {
color:#B4B16D;
}

**Cyrus** · 08-22-2007, 02:10 AM

can you show me what you're trying to accomplish?

**LadynRed** · 08-22-2007, 10:11 AM

IE doesn't double padding, it doubles margins on floated elements, but only when you add a margin going in the SAME direction as the float.

Let's see all of the code, css and html, it's impossible to tell by the snipped you've posted.

**lilycup** · 08-22-2007, 12:08 PM

All of the CSS code is in my first post, then this is my HTML. (Ignore the text about Big Brother, all of the content is placeholders).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Name here - Home</title>

<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />

<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<div id="page-container">

<div id="header"><img src="images/header.jpg" alt="Louise Lampard" width="759" height="208" /></div>

<div id="menu"> 

<ul id="list-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>

</div>

<div id="content"><img src="images/homeheader.jpg" alt="Name here" width="216" height="35" /><br />

<p><img src="images/_44072306_bigbro_split.jpg" alt="Big Brother 8" width="203" height="152" class="floatRight" /></p>
<p>Tracey, Jonty and Kara-Louise have been nominated to face eviction from Big Brother by their fellow housemates.</p>

<p>With a double eviction due on Friday, only one will survive into the Channel 4 reality show's final week next week.</p>

<p>Tracey Banard, 36, who has been in the house since the show began, has already faced the public vote four times.</p>

<p>Jonty Stern, also 36, and 22-year-old Kara-Louise Horne are two survivors from a clutch of new housemates who joined the show at the end of July.</p>

<p>The two evictions will leave nine people in the running to win the series - or eight if twins Amanda and Sam Marchant are counted as one.</p>

<p>Tracey has survived four public votes, Student Kara-Louise received the most nominations from her fellow housemates, with five.</p>
<br />
<br />
</div>

<div id="footer">
<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> | <a href="#">Link 5</a> | <a href="#">Link 6</a> <br />
&copy; Name here 2007</div>

<div id="header2"><img src="images/header3.jpg" alt="Name here" width="759" height="208" /></div>

</div>


</body>
</html>

Thank you for your help.

**LadynRed** · 08-23-2007, 12:54 AM

Ok, the problem is not simply padding, but IE's stupid way of rendering lists. You're going to need conditional comments to target IE6 and correct it's bad behavior. In a separate css file, which will contain only the css necessary to whack IE, you'll need this:

#list-menu li a {height: 1%;} -it's known as the Holly Hack and it will close the nasty gaps in the menu.

**lilycup** · 08-23-2007, 02:42 PM

Wonderful, thank you!