Forum Moderators: not2easy
For brevity, let's say my style has a class definition and an ID definition. My HTML has a number of elements with the class, and one element with the ID and the class:
<style>
.icon { float:left; }
#linksbox { float: right; border: solid; }
</style>
<html>
<body>
<div id="linksbox" class="icon">something</div>
<div class="icon">something</div>
<div class="icon">something</div>
<div class="icon">something</div>
</body>
</html>
In this configuration, my #linksbox element does nothing out of the ordinary. However, when I specify #linksbox.icon, then the element floats to the right.
I have observed this in both IE and FireFox. In my understanding, an ID should override the world. Other styles within the #linksbox definition still apply both ways.
In this configuration, my #linksbox element does nothing out of the ordinary. However, when I specify #linksbox.icon, then the element floats to the right.
I'm not sure what you're asking here? In your example, the first block should be floated to the right because of the ID rules. Were you expecting something different?
I have observed this in both IE and FireFox. In my understanding, an ID should override the world. Other styles within the #linksbox definition still apply both ways.
Again, not sure what you're getting at. First, an ID does not necessarily override the world... it depends on the specificity. See the specs:
[w3.org...]
And I don't get what you mean by "still apply both ways". Can you clarify what your question is?
the first block should be floated to the right because of the ID rules
I can see how I've confused you, however: I executed my sample code just now, and it executes perfectly as expected. I suspect there must be something else with my actual rules and document structure that I'm overlooking. If I narrow it down, I'll share it in a followup.
(My actual document structre is more complex, with a container shell with some text-align's and what-not.)
thanks
