Odd thing happening

[crabby80]

Hi Guys

Not sure what's happening here, but does anyone know why I can't seem to style the product h1 or P tags?

http://www.memorabiliadirect.co.uk/m...lia&category=1

[themightystephen]

You haven't got a class anywhere called "product" as far as I can see.

Try something like this:

.product h1 {
my heading 1 styles
}

.product p {
my paragraph styles
}

btw next time could you provide the code so that we don't have look for the stylesheet(s) ourselves.

[crabby80]

Hi there

thanks for your reply

I have this in my memorabilia style sheet

/*******************************************
* Memorabilia
/******************************************/
.catelogue {
    float:left;
    width:100%;
    margin:2em 0 2em 0;
}
.catelogue div.product {
    float:left;
    height:15em;
    width:30%;
    margin:1%;
    border:1px dotted #CCCCCC;
}
.catelogue div.product h1 {
    font-size:0.8em;
    color:#FF0000;
}
.catelogue div.product p {
    font-size:0.7em;
    color:#666666;
} 

But it doesn't seem to be working??

[crabby80]

changed it to .products h1 and it's still not working this is very strange

[crabby80]

I changed the holder to an id instead of a class and it seems to work...strange, can nested class references get lost somehow?

[themightystephen]

Well looking at your html code (I know its dynamic but the CSS is only applied after the PHP has been processed into normal HTML code) I couldn't see any id of catelogue; the only id I found similar to this was catelogue_holder. catelogue_holder seems to be the one that you used...

i.e. does your code look like this now?

/*******************************************
* Memorabilia
/******************************************/

#catelogue_holder {
    float:left;
    width:100%;
    margin:2em 0 2em 0;
}

#catelogue_holder div.product {
    float:left;
    height:15em;
    width:30%;
    margin:1%;
    border:1px dotted #CCCCCC;
}

#catelogue_holder div.product h1 {
    font-size:0.8em;
    color:#FF0000;
}

#catelogue_holder div.product p {
    font-size:0.7em;
    color:#666666;
}

[wonshikee]

It might be the way you're selecting it.

ie
<style>
#wrapper div { height: 100px; background: red; }
.short { height: 50px; background: green; }
</style>

<div id='wrapper'>
<div class='short'></div>
</div>

You'll find short is not working.