PDA

View Full Version : More IE6/7 CSS Trouble



Swish
Mar 22nd, 2010, 05:15 PM
Hi guys, I'm having some trouble with my lists styled with CSS in IE 6 & 7. I've managed to fix alot of the page after the help offered on here after my last post, but I just can't get these lists/links to work.

My site URL is - http://srotherham.com/catering/

As you can see in IE6 & 7 the lists are not adhering to the specification set out by the CSS. It's literally driving me crazy now so any help would be mint.

The CSS in question is -


.navbar {
background-color:#EDE4C3;
background-image:url("/catering/images/menu_bg.gif");
display:inline-block;
height:45px;
width:100%;
}

#items {
display:inline;
height:45px;
margin:0;
padding:0;
width:600px;
text-align:center;
}

#items li {
background-image:url("/catering/images/menu_divider.gif");
background-position:right center;
background-repeat:no-repeat;
color:#49498B;
display:inline;
font-size:1.6em;
font-weight:bolder;
height:45px;
line-height:45px;
list-style:none outside none;
padding:0 15px 0 29px;
text-align:center;
vertical-align:middle;
width:102px;
}

#EMS, #home, .footernav {
display:inline;
height:88px;
padding:0;
zoom: 1;
}

#EMS li {
background:url("/catering/images/footer_divider_1.gif") no-repeat scroll right center transparent;
color:#9C9A91;
display:inline;
font-size:1.8em;
font-weight:bold;
line-height:86px;
padding-left:48px;
padding-right:40px;
position:relative;
}

#home li {
background:url("/catering/images/footer_divider_2.gif") no-repeat scroll right center transparent;
color:#B2ACAE;
display:inline;
font-size:1.5em;
font-weight:normal;
line-height:86px;
padding-left:49px;
padding-right:46px;
position:relative;
width:20px;
}

.footernav li {
background:url("/catering/images/footer_divider_3.gif") no-repeat scroll right center transparent;
color:#B2ACAE;
display:inline;
font-size:1.5em;
font-weight:normal;
line-height:86px;
padding-left:40px;
padding-right:44px;
position:relative;
width:75px;
}

a {
color: inherit;
display:inherit;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
padding-left:inherit;
padding-right:inherit;
width:inherit;
text-decoration:none;
}

a:link {
color: inherit;
display:inherit;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
padding-left:inherit;
padding-right:inherit;
position:inherit;
width:inherit;
text-decoration:none;
}

a:visited {
color: inherit;
display:inherit;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
padding-left:inherit;
padding-right:inherit;
width:inherit;
text-decoration:none;
}
a:hover {
color: inherit;
display:inherit;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
padding-left:inherit;
padding-right:inherit;
width:inherit;
text-decoration:none;
}
a:active {
color: inherit;
display:inherit;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
padding-left:inherit;
padding-right:inherit;
width:inherit;
text-decoration:none;
}

* {
margin:0;
padding: 0;
}

* html ul li a { height: 1%; }



and the HTML -


<div class="navbar">
<p class="phone"><strong>Telephone</strong> 0000 0000 0000</p>
<ul id="items">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>

</div>

<div class="footer">
<ul id="EMS">
<li><a href="http://www.ems-internet.com">Designed and created by EMS Internet</a></li>
</ul>
<ul id="home">
<li><a href="#">HOME</a></li>
</ul>
<ul class="footernav">
<li><a href="#">MENU</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>

Excavator
Mar 22nd, 2010, 06:27 PM
Hello Swish,
One li is not really a list... that's not quite how ul is meant to be used.
If you strip everything down as basic as possible, it's usually a lot easier and works better.
Try something like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: #FC6;
font: 100% 'Myriad Pro', Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 900px;
margin: 30px auto;
background: #999;
font-size: 0.8em;
}
.footer {
height:88px;
width:100%;
margin: 400px 0 0 0; /*for demo only*/
clear: both;
background: #EDE4C3 url(http://srotherham.com/catering/images/footer_bg.gif) repeat-x;
font-size: 0.9em;
}
#designed {
width: 230px;
padding: 0 59px 0 58px;
float: left;
display: block;
line-height: 88px;
background: url(http://srotherham.com/catering/images/footer_divider_1.gif) no-repeat right center;
}

ul.footernav {
display:inline;
height:88px;
padding:0;
list-style: none;
}

.footernav li {
background: url(http://srotherham.com/catering/images/footer_divider_3.gif) no-repeat right center;
color: #B2ACAE;
float: left;
font-size: 0.8em;
font-weight: bolder;
line-height: 86px;
padding-left: 40px;
padding-right: 44px;
}
</style>
</head>
<body>
<div id="container">
some stuff
<div class="footer">
<a href="http://www.ems-internet.com" id="designed">Designed and created by EMS Internet</a>
<ul class="footernav">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<!--end footer--></div>
<!--end container--></div>
</body>
</html>