PDA

View Full Version : IE vs Firefox UL spacing issues


scrufffydoo
01-04-2009, 04:29 AM
I've been struggling to get a simple UL nav list to render correctly in IE and FF, I thought I had it but the issue returns when a new line is added. it seems the padding increases substantially in IE making the menu grow.

Tried loads of margin/padding options and am now losing the will to live. I read that IE treats the whitespace in UL's differently to FF, you guys any ideas on this or any workarounds/ fixes.

the sites at www.scroozdev.net (http://www.scroozdev.net) and the problem list is the left sidebar


<!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>scrooz online fasteners</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 140px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1,{ padding: 0px; }
#sidebar2,{ padding-top: 0px; }
#mainContent { zoom: 1; padding-top: 20px;}
#mainlogobox { margin-top: -50px;}
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--

-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="headercart"><!-- end #headercart --></div>
<div id="toprightmenu">

<!-- Begin Vista-Buttons.com -->
<script type="text/javascript"> var vbImgPath="index-files/"</script>
<script type="text/javascript" src="index-files/scwzu27.js"></script>
<noscript><a href="<A href="http://vista-buttons.com">Website">http://vista-buttons.com">Website Button Makers by Vista-Buttons.com v2.81</a></noscript>
<!-- End Vista-Buttons.com -->
<div id="toprightmenureflect"></div>
<!--end #toprightmenu--></div>

<div id="mainlogobox"></div>
<!-- end #header --></div>
<div id="navbarcontainer">
<div id="navbuttonbar">

<!-- Begin Vista-Buttons.com -->
<script type="text/javascript"> var vbImgPath="index-files/"</script>
<script type="text/javascript" src="index-files/sck4mu1.js"></script>
<noscript><a href="<A href="http://vista-buttons.com">Website">http://vista-buttons.com">Website Button Makers by Vista-Buttons.com v2.81</a></noscript>
<!-- End Vista-Buttons.com -->
<!--end #navbuttonbar--></div>
<!--end #navbarcontainer--></div>
<div id="navbarreflect"></div>

<div class="clearfix" id="container">
<div id="banner"><img src="images/mainbanner.gif" /></div>

<div id="sidebar1">
<div id="leftsidemenubox">
<ul id="mainleftnavlist">
<li>fastener 1</li>
<li>fastener 2</li>
<li>fastener 3</li>
<li>fastener 4</li>
<li>fastener 5</li>
<li>fastener 6</li>
<li>fastener 7</li>
<li>fastener 8</li>
<li>fastener 9</li>
<li>fastener 10</li>
<li>fastener 11</li>
<li>fastener 12</li>
<li>fastener 13</li>
<li>fastener 14</li>
<li>fastener 15</li>
<li>fastener 16</li>
<li>fastener 17</li>
<li>fastener 18</li>
<li>fastener 19</li>
<li>fastener 20</li>
<li>fastener 21</li>
<li>fastener 22</li>
<li>fastener 23</li>
<li>fastener 24</li>
<li>fastener 25</li>
</ul>
<!--end #leftsidemenubox--></div>
<!-- end #sidebar1 --></div>

<div id="sidebar2">
<!-- Begin Vista-Buttons.com -->
<script type="text/javascript"> var vbImgPath="assets/js/sidebar2index-files/"</script>
<script type="text/javascript" src="assets/js/sidebar2index-files/scgfg1p.js"></script>
<noscript>
<a href="<A href="http://vista-buttons.com">Website">http://vista-buttons.com">Website Button Makers by Vista-Buttons.com v2.81</a>
</noscript>
<!-- End Vista-Buttons.com -->
<div id="sidebar2offer1">Content for id "sidebar2offer1" Goes Here </div>
<div id="sidebar2offer2">Content for id "sidebar2offer2" Goes Here </div>
<div id="sidebar2offer3">text or offer box,text or </div>
<!--end #sidebar2--> </div>

<div id="mainContent">
<h1>Shopping cart</h1>
<p>shopping cart goes here, shopping cart goes here, shopping cart goes here, shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here, shopping cart goes here, shopping cart goes here, shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here shopping cart goes here jhhgjjghjghjhgjhgjhgjghjhgjhgjhgj cart goes here shopping cart goes here shopping cart </p>
<!-- end #mainContent --> </div>
<!--end #container--></div>
<!--end #wrapper--></div>

<div id="footer">
<div id="footernavbox">home | store | terms and conditions| contact us| my account</div><div id="copyright">copyright 2008 scrooz pty ltd</div>
<div id="creditcardlogo">
<div><img src="images/creditcardsblackreflectbg.gif"/></div>
<!--end #creditcardlogo--></div>
<p>timber screws | chipboard screws | type 17 screws | drywall screws | collated screws| tek screws | self drilling sc rews|stainless steel screws | self tapping screws | coach screws | rivets | high tensile bolts | mild steel bolts | nuts | locking nuts | threaded bars | washers | screwbolts | sleeve anchors | hardware | masonry fixings | roofing fasteners | nails| drill bits | holesaws | screwdriver bits |</p>
<!-- end #footer --></div>
</body>
</html>

@charset "utf-8";
body {
background: #000000;
margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0px;
z-index: 1;
}
.clearfix {
overflow: hidden;
height: 1%;
}
#banner {
height: 150px;
background-color: #999999;
margin: 0px;
padding: 0px;
}
#container {
width: 980px; /* this overrides the text-align: center on the body element. */
z-index: 6;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}
#footer {
background-color: #000000;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #666666;
font-family: "Trebuchet MS", Verdana;
font-size: 12px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#footernavbox {
font-family: "Trebuchet MS", Verdana;
font-size: 12px;
color: #FFCC66;
width: 600px;
display: inline;
}
#copyright {
font-family: "Trebuchet MS", Verdana;
font-size: 10px;
text-align: right;
color: #FFFFFF;
display: inline;
margin-left: 490px;
}
#creditcardlogo {
margin-top: 20px;
margin-bottom: 0px;
width: 300px;
margin-left: auto;
text-align: center;
margin-right: auto;
}

#header {
background-color: #FFFFFF;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
padding: 0px;
z-index: 3;
height: 150px;
}
#leftsidemenubox {
background-color: #FFCC66;
background-image: url(images/leftmenubgsolid1.gif);
background-repeat: repeat-y;
}
#mainContent {
z-index: 8;
background-color: #FFFFFF;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-bottom-style: none;
margin-left: 160px;
margin-right: 160px;
}
#mainlogobox {
height: 140px;
width: 380px;
background-image: url(images/mainlogofinal.gif);
}
#mainleftnavlist {
margin: 1px;
padding: 1px;
list-style-image: none;
list-style-type: none;
font-family: "Trebuchet MS", Verdana;
color: #999999;
}
#navbarcontainer {
height: 35px;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
z-index: 4;
background-image: url(images/background-navbar-3000px.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#navbuttonbar {
padding: 0px;
height: 35px;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
z-index: 5;
margin-bottom: 0px;
background-image: url(images/background-navbar-3000px.jpg);
background-color: #000000;
}
#navbarreflect {
background-color: #FFFFFF;
height: 35px;
width: 100%;
background-repeat: repeat;
background-image: url(images/navbarbg1.jpg);
margin-top: 3px;
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
background-color: #999999;
z-index: 7;
color: #000000;
padding: 0px;
margin-top: 0px;
width: 140px;
}
#sidebar2 {
float: right;
padding: 0px;
background-color: #999999;
color: #000000;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 140px;
}
#sidebar2offer1 {
background-color: #FDCF71;
height: 70px;
}
#sidebar2offer2 {
background-color: #FF9933;
height: 70px;
}
#sidebar2offer3 {
background-color: #000066;
color: #FFFFFF;
}

#toprightmenu {
padding: 0px;
height: 90px;
width: 175px;
margin: 0px;
float: right;
}
#toprightmenureflect {
height: 20px;
width: 175px;
background-image: url(images/toprightmenureflect.gif);
padding: 0px;
margin-top: 1px;
}

#wrapper {
margin: 0px;
background-color: #FFFFFF;
z-index: 2;
padding: 0px;
}
#headercart {
height: 50px;
width: 310px;
background-image: url(images/headercartboxreflect.gif);
float: left;
margin-left: 425px;
display: inline;
}
#mainleftnavlist li {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 35px;
}

coloeagle
01-04-2009, 05:45 AM
FF uses padding-left to indent lists and IE uses margin-left.
Try this as a new starting point for you.

ul {
padding-left:1em;
margin-left:0;
}

scrufffydoo
01-04-2009, 06:20 AM
thanks for the reply, didn't work for me, could be another setting along the way that stopping it although I can't see it. After 2 days of research, I'm giving up and clunky or not, a tables going in.

Just for info padding the menu out to make FF look like IE works but I want a tight layout in this instance.

coloeagle
01-04-2009, 06:26 AM
Going on 11:30 at night here, let me take what you have posted and work it over in my editor. I'll post in the am when I have finished.

Ricky55
01-04-2009, 12:35 PM
I had a problem just like this in IE7 it was fine in six. It ended up being to do with display: block, that was forcing IE to add additional padding in between the buttons of my nav bar.

In the end I solved the problem by just specify the height twice, once on the li and again on the li a.

Don't know if this will work for you I haven't got time to read all of your code but give it a try.