[thelist] CSS again: suspected IE funkiness on inline UL

[ben morrison]

On 12/19/06, Joel D Canfield <joel at spinhead.com> wrote:

> While I certainly don't wish to seem unappreciative of the many people
> here who've taken time (sometimes quite a bit) to look at this and come
> up with ideas, in the end, it really seems like we're all guessing.
>
> Is CSS really this complicated? I mean, I'm new at this kind of thing,
> so I'm not entirely surprised that I'm not finding the problem. But when
> I've clearly identified that the problem is *not* the navigation code,
> which works *perfectly* in the source page, but when copied *verbatim*
> to my page, breaks - well, it seems like everyone is trying to solve the
> wrong problem, or just plain guessing.
>
> Again, I'm just trying to get my head around the big picture: is CSS
> really a matter of guessing, twiddling, and voodoo? I do understand that
> IE is a massive PITA and that, sometimes, the rules don't apply. But can
> it really be this random?

CSS is complicated to begin with, but you do end up understanding its
foibles and IEs bugs the more you use it. When you say copied
*verbatim* and it breaks, then generally there is something that is
missing, be it a parent having an effect on its child, doctype and
very often and really annoyingly - whitespace can have a big effect
when it comes to lists.

I did post some code but our evaluation server is down as we have just
moved office. My version involved using a background image - only
needs to be 1x1 pixel in the blue border colour and here's the code:

<style type="text/css">
	#navlist {
color: #ffffff;
background:#ededed url(nav-bottom.gif) 0 100% repeat-x;
text-align: left;
margin:0px;
padding:0px;
width: 100%;
clear:both;
float:left;
}

#navlist li {
margin:0px 10px 0 0;
float:left;
list-style:none;
}

#navlist li a {
font-weight:bold;
color: #ffffff;
background-color: #ff6600;
text-decoration: none;
padding: 0 1em;
float:left;
display:block;
margin-top:1px;

}

#navlist li span {
font-weight:bold;
color: #000066;
background-color: #ffffff;
text-decoration: none;
padding: 0 1em;
border: 1px solid #000066;
border-bottom: 1px solid #ffffff;
float:left;
display:block;
}

#navlist li a:hover {
font-weight:bold;
color: #ff6600;
background-color:#ffffff;
}
	
	</style>

<ul id="navlist">
			<li><span>Home</span></li>
			<li><a href="/ii/services.asp" title="link to a list and
explanation of our services">Services</a></li>
			<li><a href="/ii/intranet/" title="link to samples of our tools,
and soon, a live demo!">Demo</a></li>
			<li><a href="/ii/about.asp" title="link to information about the
principals of Intranet Intelligence">About</a></li>
			<li><a href="/ii/distinction.asp" title="why you should choose
'Intranet intelligence'">Why Choose Us?</a></li>
			<li><a href="/ii/contact.asp" title="link to the contact
form">Contact</a></li>
		</ul>

Ben