Forum Moderators: not2easy
It's also working perfectly in Chrome and FF on both Mac and PC but just not IE6/7. Any help would be very much appreciated as I'm a little stumped with this one!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>UL Test</title>
<style type="text/css" title="text/css">
<!--
#destinations ul.list-pages li {
margin: 0;
padding: 0;
font-size: 16px;
font-weight: bold;
list-style-type: none;
}
#destinations ul.list-pages li a {
padding: 3px 5px;
background-color: #00afca;
color: #fff;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 0;
float: left;
border: 1px solid red;
}
#destinations ul.list-pages ul li a {
border: none;
font-weight: bold;
font-size: 14px;
background: none;
color: #545454;
float: left;
border: 1px solid red;
}
-->
</style>
</head>
<body>
<div id="destinations">
<ul class="list-pages">
<li class="page_item page-item-452">
<a href="#">Africa</a>
<ul>
<li class="page_item page-item-454"><a href="#">Kenya</a></li>
<li class="page_item page-item-456"><a href="#">Mozambique</a></li>
<li class="page_item page-item-458"><a href="#">Zimbabwe</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Off the top off my head, i think you need to float the li's, and display the 'a' as a block.
If not, just play around with the display on the a's and li's.
Hope that helps.
:)
It's a bit more detailed than the first CSS Iisted above because I also have other li's nested further down.
#destinations {
width: 620px;
}
#destinations ul.list-pages {
margin-left: 0;
padding: 0;
list-style-type: none;
}
#destinations li {
margin: 0;
padding: 0;
list-style-type: none;
}
#destinations ul.list-pages li {
font-size: 16px;
font-weight: bold;
display: inline;
}
#destinations ul.list-pages li a {
padding: 3px 5px;
background-color: #00afca;
color: #fff;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 0;
float: left;
}
#destinations ul.list-pages li a:hover {
background-color: #e3e3e3;
color: #5a5a5a;
}
#destinations ul.list-pages ul li {
font-size: 12px;
text-align: left;
}
#destinations ul.list-pages ul ul li{
}
#destinations ul.list-pages ul li a {
border: none;
font-weight: bold;
font-size: 14px;
background: none;
color: #545454;
}
#destinations ul.list-pages ul ul li a {
font-weight: normal;
font-size: 12px;
float: left;
}
Regardless of the way it is displaying for you, there will be users who cannot view it marked up that way, as you are effectively telling the browser that the LI and it's content are invisible.
Set the width on the container <ul class="list-pages"> the same width as the LI and set the LI's to display:block and float right (0 padding, 0 margin). You could also set the A's to display as block too.
