Baffled regarding selector not working

HTML & CSS
1

Buongiorno from 2 degrees C occasionall snowing wetherby :slight_smile:

On this page http://tutorial.davidclick.com/2menu.html & illustrated here http://i216.photobucket.com/albums/cc53/zymurgy_bucket/class-notid-2_zps6022034b.jpg i’ve been working with positioning the logo of the dog absolutely just as an exercise to get familiar with how it works and interacts with other elements.

Specifically I need this piced of html:

<div id=“header”>
<h1>The quick brown fox jumps over the lazy dog</h1>
<img class=“fox” src=“fox.JPG”>

to talk to this bit of CSS:

{
position:absolute;
left:200px;
top:10px;
}

Originally i placed this selector which i thought in the rules of inheritance would be correct:
#header .fox
{
position:absolute;
left:200px;
top:10px;
}

But this was wrong, what worked was:

.fox
{
position:absolute;
left:200px;
top:10px;
}

So my question is please:
“Why did the selector #header.fox not work & .fox did?”

Any insights welcome,
David

2

You may have given away the answer to the question in your message. In your message, you describe the following three (3) ways of addressing the selector. The bottom one does not work in your HTML. The first two work fine. (Note the absence of a space between the id and class in the last example.)


.fox {...}

#header .fox {...}

#header.fox {...}

does this help?

3

Thanks Ronpat, damn gap now i see! Thank you :slight_smile:

4

Cool. We’re always “up” for a challenge! :slight_smile:

Cheers!