Inheritance Issues

[Antoniohawk]

[http://www.graphics-forum.com/manicpyro/wishlist3.html]

Why won't the following work? The css should reference the <a> below it. I can't seem to get it to let me transform the text in any way except going inline.

.item .open a.sub:hover {
border: 1px solid black;
text-decoration: none;
}
--------------------------
<li class="open"><a href="#" class="sub" onclick="door(this); return false">Foo</a>

[Roy Sinclair]

Are you sure that code is within an element with the class of "item"?

Also it's only going to show when you mouseover the element.

[Antoniohawk]

<li class="open"><a href="#" class="sub" onclick="door(this); return false">Clothes</a>
<ul class="item">

<li><a href="http://store.mozsource.com/gpageload.do">XL Mozilla Moz Star T-shirt</a></li>
<li><a href="http://www.cafeshops.com/noosenews.1399045">XL Internet Explorer T-shirt</a></li>
<ul>
<li class="open"><a href="#" class="sub" onclick="door(this); return false">Foo</a>
<ul class="item">
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>

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

[Tails]

The problem is with the nested elements. You placed an <ul> after a closed </li> tag, which must have confused the browser's node tree. Mozilla's DOM Inspector works wonders. And strict xml-like validation keeps things clean. When fixed, it even works in IE6 (despite the known pseudo bug when using selectors and branches).


<ul>
<li class="open"><a href="#" class="sub" onclick="door(this); return false">Clothes</a><ul class="item">
<li><a href="http://store.mozsource.com/gpageload.do">XL Mozilla Moz Star T-shirt</a></li>
<li><a href="http://www.cafeshops.com/noosenews.1399045">XL Internet Explorer T-shirt</a><ul>
<li class="open"><a href="#" class="sub" onclick="door(this); return false">Foo</a><ul class="item">
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li></ul>
</li></ul>
</li></ul>
</li>
</ul>


When I make list items, for visual debugging purposes, I always put a nested <ul> tag at the end of the same line as the last open <li> tag. This way, all nested <li> taggs can be tabbed to the right with ease, while easily catching missing <ul> tags or <li> tags ending too soon. Then I put the </ul> tag at the end of the last line of nested </li>. It's just a tip for visual sake. Take advantage of tabs. They can save you 4 or even 8 spaces depending on how tabs are set to display in your editor (and you can always take them out in the end). :)

[Antoniohawk]

I can't believe that my mistake was so minimal, thanks a lot tails.

I've changed my code around a bit and have encountered another problem. How can I get the foo with the class of open to be right under the preceeding element? Another problem is that I need to get rid of that extraneous image that is floating to the left of the foo group.

I think that the reason that the foo group is being pushed over is that background image.

[]|V|[agnus]

this is just a brief aside, but tails, don't you think something like this is a lot clearer to read and just as manageable?


<ul>
<li>
foo
<ul>
<li>foo, etc.</li>
</ul>
</li>
<li>foo</li>
</ul>


i just think consistency with the way you illustrate nesting in your document tree is just as valuable and important as, say, semantics or seperation of style and presentation.

looking at something like the above, it is absolutely clear what is on what level at a glance. with your mixing of items on different lines, it takes a little bit more time to wrap one's mind around the structure when first glancing at the markup.

this is, of course, my opinion, but i feel it's rooted in some reason. just something to think about.

[Antoniohawk]

The way that markup is arranged is a matter of personal choice in the first place. For Tails, that is probably the most efficient and legible method in existance. Yet, for others it may seem Greek. I'd say that you should arrange it to your own liking and the one that makes it easier for you to understand.

[]|V|[agnus]

Very true, and I hesitated even mentioning it because I know it's a widely varying thing, how you arrange your markup or code. Just thought I'd see what people thought of the notion of being very detailed about it though. The way I illustrated has a reason to it, not just a preference.

[Antoniohawk]

After solving other problems with this project, I now return to seek help with this particular matter. I have managed to achieve the results that I want with inline style, but the whole point of css is reusability. Here's the link again: [http://www.graphics-forum.com/manicpyro/wishlist3.html].