Problem with margins/ul float in IE.

Discussion in 'CSS' started by Frank Booth, Aug 23, 2009.

0
  1. #1
    Hi,

    I'm having some trouble with what I'm not sure is a margin bug or a bug with my ul. In FF the page displays as I wish it to. The navigation sits correctly with what i think is the padding from the ul, and the myspacecontainer div rests in the correct area. But in IE7 the ul hugs the left edge of the navcolumn div, and the myspacecontainer div is pushed downward and out of the container div by 100px or so.
    I've toyed with various things but nothing has worked. I'm not sure whether the myspacecontainer div has added imaginary top margin or that the ul has pushed it down?
    Any help would be appreciated. Thanks.


    CSS
    

@charset "UTF-8";
/* CSS Document */

body{
background-color:#FFFFFF;
}

#container{
width:800px;
height:489px;
margin:20px auto 0 auto;
border-style:solid;
border-width:1px;
border-color:#999999;
background-image:url(images/Mau%27lin_home_background.png);
}

#navcolumn{
width:240px;
height:450px;
margin:0 0 0 60px;
float:left;
display:inline;
}

#navcolumn img{
border-style:none;
}


#navcolumn .logo{
margin-top:25px;
}

#navcolumn ul{
list-style:none;
margin:12px 70px 0 0;
}

#navcolumn ul li a{
width:120px;
height:16px;
padding-left:30px;
padding-top:2px;
float:left;
display:block;
color:#000000;
text-decoration:none;
font-family:Andale Mono, Verdana;
font-size:12px;
}

#navcolumn ul li .highlight{
background-image:url(images/Mau%27lin_rollover_07.png);
}

#navcolumn ul li a:hover{
background-color:#E5E5E5;
}

#myspacecontainer{
width:240px;
height:28px;
margin:315px 0 0 10px;
}

#footer{
width:800px;
margin:0 auto 0 auto;
background-color:none;
}

#footer p{
margin-top:0;
font-size:9px;
font-family:Andale Mono, Verdana, Helvetica, sans-serif;
float:right;
}
    Code (markup):
    HTML

    <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mau'lin | Home</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="container">
	<div id="navcolumn">
    <img src="images/Mau'lin_logo_03.png" class="logo" />
        <ul>
            <li><a href="index.html" class="highlight">Home</a></li>
            <li><a href="sonic_graffiti.html">Sonic Graffiti</a></li>
            <li><a href="releases.html">Releases</a></li>
            <li><a href="audio.html">Audio</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="links.html">Links</a></li>
        </ul>
            <div id="myspacecontainer">
            <a href="http://www.myspace.com/maudlinsplace" target="_blank"><img src="images/Mau'lin_myspace.png" alt="myspace link" /></a>            
            </div>
  </div>
</div>
	<div id="footer">
	<p>All material copyright © Mau'lin</p>
    </div>
</body>
</html>
    Code (markup):
     
    Frank Booth, Aug 23, 2009 IP
  2. MYND

    MYND Active Member

    Messages:
    136
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Set the padding to zero on ul. It's not uncommon for a browser to apply their own default styles, that's exactly what IE did; Since the navcolumn ul had no padding property, it 'assumed' a padding value.

    Float the myspacecontainer element.

    Here's the fixed CSS:
    
@charset "UTF-8";
/* CSS Document */

body{
background-color:#FFFFFF;
}

#container{
width:800px;
height:489px;
margin:20px auto 0 auto;
border-style:solid;
border-width:1px;
border-color:#999999;
background-image:url(images/Mau%27lin_home_background.png);
}

#navcolumn{
width:240px;
margin:0 0 0 60px;
float:left;
display:inline;
}

#navcolumn img{
border-style:none;
}


#navcolumn .logo{
margin-top:25px;
}

#navcolumn ul{
list-style:none;
margin:12px 70px 0 0;
padding:0;
}

#navcolumn ul li a{
width:120px;
height:16px;
padding-left:30px;
padding-top:2px;
float:left;
display:block;
color:#000000;
text-decoration:none;
font-family:"Andale Mono", Verdana;
font-size:12px;
}

#navcolumn ul li .highlight{
background-image:url(images/Mau%27lin_rollover_07.png);
}

#navcolumn ul li a:hover{
background-color:#E5E5E5;
}

#myspacecontainer{
width:240px;
height:28px;
margin:315px 0 0 10px;
}

#footer{
width:800px;
margin:0 auto 0 auto;
background-color:none;
}

#footer p{
margin-top:0;
font-size:9px;
font-family:"Andale Mono", Verdana, Helvetica, sans-serif;
float:right;
}
    Code (markup):
    By the way, font names that contain spaces (e.g. Andale Mono) should be in quotes. :)
     
    MYND, Aug 23, 2009 IP
  3. Frank Booth

    Frank Booth Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the help, that's just about done the trick. Oh and I was not aware of the font quotes, cheers!
     
    Frank Booth, Aug 23, 2009 IP