CSS inheritance and winIE6

[Brandon Luhring]

I'm creating a nav in CSS with lists, etc. I'm getting favorable results when testing on a Mac (IE5, Safari, Op7, Mz1.5), and I'm getting favorable results in all browsers on a PC except IE6 (haven't tested IE5 or IE4 though)...

Here's the simplified HTML code:

<div id="navbar">
<ul class="category1">
    <li class="cat1title"><a href="#0" class="white">Heading</a></li>
        <ul>
	    <li><a href="#1">page1</a></li>
	    <li><a href="#2">page2</a></li>
        </ul>	
</ul>
</div>

Here's the simplified CSS code:

#navbar a, a:link, a:visited, a:active, a:hover {
	display: block;
	color: #626466;
	text-decoration: none;
	background: transparent; 
	}	
#navbar a:active {
	color: #000;
	font-weight: bold;
	}
#navbar a:hover {
	color: #000;
	text-decoration: underline;
	background: #CAC9CD; 
	}
#navbar a.white, a:link.white, a:visited.white, a:active.white {
	color: #FFF;
	text-decoration: none;
	background: transparent;
	}
#navbar ul {
	/* main sections */
	margin: 0px 0px 13px 0px;
	padding: 2px 2px 2px 0px;
	list-style-type: none; 
 	}
#navbar ul ul {
	/* sub-sections */
	margin:0px;
	padding: 0px;
	}
#navbar ul ul ul {
	/* sub-sub-sections */
	margin:0px;
	padding: 0px 0px 0px 8px;
	}
#navbar li {
	padding-left: 2px; 
	}
. category1 {
	background: #F4F4F9;
	}
. cat1title {
	background-color: #9C9BBE;
	}

Now, it should create a "category" where all links inside .category1 will have a transparent BG which shows the parent's BG-color for the entire category, the category headline is unique and has a separate background color assigned by .cat1title... This works PERFECTLY in all the browsers, but IE6 on WinXP uses the .cat1title BG-color for ALL links/li tags, not just the one given the class name.

It's obviously an inheritance thing, but I can't figure it out for anything! I've put "background: transparent;" everywhere I can think of, but to no avail -- it's all or none with IE6.

Can anyone easily find where I'm going wrong? I'd appreciate any help.

Thanks!
B

[Paul O'B]

Hi,

I can't really see what you are trying to do but you do have some errors on your page.

The first one is that your lists are incorrectly constructed. The sub lists (ul) should be contained wholly within the list item. (As i see it IE6 was the only one who was displaying correctly anyway). Sublists should be like this :
<ul>
<li>

<ul>
<li></li>
</ul>

</li>
</ul>

Heres the correct code for that snippet:

<div id="navbar"> 
<ul class="category1">
	<li class="cat1title"><a href="#0" class="white">Heading</a> 
	 <ul>
		<li><a href="#1">page1</a></li>
		<li><a href="#2">page2</a></li>
	 </ul>
    </li>
</ul>
</div>

The other problem is that you have defines the styles as below:

#navbar a, a:link, a:visited, a:active, a:hover {
display: block;
color: #626466;
text-decoration: none;
background: transparent; 
}

What you are defining is all states of the anchor inside the id of #navbar (#navbar a) then you go on to define all anchors anywhere on the page with a:link and a:visited etc. I think you meant #navbar a:link, #navbar a:visited etc.

However if you define #navbar a{} then all states are defined anyway so you don't need to define the other states. You have made the same mistake for your .white styles as well.

I'm not sure if this will solve your problem or make it worse because mozilla now displays like ie did

Paul

[Brandon Luhring]

Thanks for taking the time to look through that.

You're absolutely right on all counts, and I've corrected those errors. Simply correcting them caused the rest of my browsers to view the same as IE6. ...so I set out to correct the deeper problems, and this is what I've come up with (still not 100% where I want it):

HTML Code:

<div id="navbar">
	<ul class="category1">
		<li><a href="#0" class"cat1titlelink">Household</a>
			<ul>
				<li><a href="#1">Link 1</a></li>
				<li><a href="#2">Link 2</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS Code:

ul, li {
	margin: 0px;
	padding: 0px;
	border: 0px;
 	}
#navbar ul {
	/* main sections */
	margin: 0px;
	padding: 2px 2px 2px 0px;
	list-style-type: none;
 	}
#navbar li {
	margin: 0px;
	padding: 0px;
 	}
#navbar ul ul {
	/* sub-sections */
	margin: 0px;
	padding: 0px;
	list-style-type: none; 
	}
#navbar ul ul ul {
	/* sub-sub-sections */
	margin: 0px;
	padding: 0px 0px 0px 8px;
	list-style-type: none; 
	}
#navbar a {
	display: block;
	color: #626466;
	text-decoration: none;
	padding: 0px 0px 0px 2px;
	margin: 0px;
	background: transparent; 
	}	
#navbar a:active {
	color: #000;
	font-weight: bold;
	}
#navbar a:hover {
	color: #000;
	text-decoration: underline;
	background: #CAC9CD; 
	}
#navbar a.cat1titlelink {
	color: #FFF;
	text-decoration: none;
	background-color: #9C9BBE;
	}
.category1 {
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	background: #F4F4F9;
	margin: 10px 0px;
	}

What's happening now, is still only showing up in IE6, so maybe I still have some syntax wrong...

On all browsers other than IE6, my links have what looks like a single line-return (maybe a tad more) -- exactly what I want.

On IE6, however, it has a ton of space in between links, more like a double-space line-return. I thought it might be inherited from .category1's top and bottom margin of 10px, but as you can see I've set margins and paddings to 0px everywhere else....

The weird thing is that when I add a border attribute (for debuggin) to the "#navbar ul" and "#navbar li", then IE6 callapses the space -- just like I want. But, if I put "border: 0px" in them, the space comes back...

Is this my error, or some sort of bug?



Thanks again!

[Paul O'B]

Is this my error, or some sort of bug?

No its some sort of bug.

Heres the solution:

<div id="navbar">
 <ul class="category1">
  <li><a href="#0" class"cat1titlelink">Household </a>
   <ul>
	<li><a href="#1">Link 1 </a></li>
	<li><a href="#2">Link 2 </a></li>
   </ul>
  </li>
 </ul>
</div>

Copy that code exactly and try it out

If you can spot what the solution is then award yourself a prize

Paul

[Brandon Luhring]

--pulling hair out--


Well, it looks like the solution to the bug was adding the trailing space to each link.

When the space is absent, IE6 renders the extra padding/margins around the <li> tag that holds the link...

When the space is there, IE6 and all other browsers render them the proper way.




Additionaly, I had to add "#navbar a.cat1titlelink, #navbar a:hover.cat1titlelink," to the existing CSS Style. Apparently IE will still inherit existing "a:hover" styles if using the base "#navbar a" without specifying "#navbar a:hover" as well.


Thanks for your help, Paul!

[Paul O'B]

lol - sorry to make you work for it

Lists can be a pain at times and adding the space before the anchor fixes the bug you had. There are also other methods if that doesn't work in other cases and thats to close the white space between the opening and closing list tags in the html so that they are back to back etc. (you can also try floating the lists and other various things depending on the situation but it is very annoying when there should be no need.)

Paul