Css Children

[TheFilmGod]

#header .login .left {
float: left;
width: 140px;
}

 

This doesn't seem to work.

 

			
<div class="login">
<div class="left">Username:</div>
<div class="right"><input type="text" /></div>
<div class="clear"></div>
</div>

 

The login class is already within the header. Usually this works fine, except I used #header_body .left and this seems to affect my other class.

 

Am I doing something wrong?

[acidglitter]

it looks fine to me.. did you put #header_body .left before or after #header .login .left in the css file? maybe you just have those in the wrong order so the value in one of them is replacing the other..

 

if nothing works you could just rename the username div to header_login_left..

[TheFilmGod]

Thanks for the reply.

 

I changed the names of class/ids so it worked fine. But this would make my coding 100% easier.

 

My question: Are these two classes unique?

 

#header .left {

 

}

 

#body .left {

 

}

 

 

Of course, one of them would be nested in a div labeled id="header" and one in a id="body". But according to some of my tests, this doesn't work. It seems as those .left is not rendered as a class only to #header, but as a universal class.

 

Any insight on this?

[acidglitter]

i've had that same problem before. i'm not sure why it does that. sorry

[ToonMariner]

Read this

 

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

[obsidian]

I'm still not sure I understand why there is difficulty with this. I often use global classes like this, but I have to be sure to define the classes at the end of my styles so that there is no confusion on what I intend for them to do. What do you mean by the change "affects your other class?" I've run several tests on the scenario as I understand it, and things seem to work just fine. Here is the code I have come up with (again: as I understand the problem). Notice thought, that, rather than using a clearing div, I add a clearfix style to my parent divs to accomplish this cross-browser:

 

HTML

<div id="header">
<div class="login" class="clearfix">
<div class="left">Username:</div>
<div class="right"><input type="text" /></div>
</div>
</div>

 

CSS:

div.login {
width: 300px;
}

div.left {
float: left;
width: 140px;
}

div.right {
float: right;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

 

It could be, simply, that your issue resides with not attaching the classes to a DOM selector causing the specificity to not be accurate enough.

[TheFilmGod]

^ Previous post. I know that will work. I'm talking

 

<div id="body">

<div class="left"></div>

</div>

 

<div id="footer">

<div class="left"></div>

</div>

 

#body .left {

 

}

 

#footer .left {

 

}

 

Those two classes aren't unique, they combine..

[obsidian]

I'm still completely dumbfounded as to what the issue is. This works just fine:

HTML:

<div id="header" class="clearfix">
<div class="left">Header->left</div>
</div>
<div id="footer" class="clearfix">
<div class="left">Footer->left</div>
</div>

 

CSS:

#header .left {
float: left;
}

#footer .left {
float: right;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

 

I'm not sure why something would override that or cause them to "combine" unless you distinctly are declaring a "div.left" or plain ".left" selector elsewhere in your document.

[TheFilmGod]

Thanks Obsidian!

 

I'm going to look into it!