external css problem 1

[fzia]

I have these 2 styles:
Code:

td.on {
background: #660000;
}
td.off {
background: #cccc99;

}


and i am using them as:
Code:
<td class="off" onMouseOver="this.className='on'" onMouseOut="this.className='off'">


which works fine ONLY IF i have those styles embedded on the page, now when i change those styles into an external stylesheet the mouseover doesnot show the td.on style although the off displays fine when the page loads. any reason why?

 

[Vragabond]

There is no reason for that not to work and I had never had any problems with using it that way. Do any of the styles work from an external stylesheet? Is the extarnal stylesheet well formed css document? If you put just the two mentioned declarations in the separate stylesheet, does it still not work?

 

[fzia]

here is the actual css iam using:

td.off {
background:#cccc99;
height:10px;
}

td.on {
background:#660000;
height:10px;
}

td.off a{font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:8pt;text-decoration:none; color:#660000;padding-left:5px;}
td.on a{font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:8pt;text-decoration:none; color:#FFFFFF;padding-left:5px;}
td.on a:hover{font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:8pt;text-decoration:none; color:#FFFFFF;padding-left:5px;}


what i noticed is if I have the td.off at the top as shown the td.off background doesnt work BUT if i cut and paste it below td.on, then td.off background works but the td.on background stops working! any idea what I am doing wrong and i wonder why it works as an embedded css perfectly fine and not as external.

 

[ChrisHunt]

here is the actual css iam using:

I bet it isn't.

I bet you've got something unnecessary and invalid at the top of your CSS file, like

<style type="text/css">

td.off {
background:#cccc99;
height:10px;    
}

td.on {
background:#660000;
height:10px;    
}

... etc ...
</style>

You don't need (or want) [tt]<style>[/tt] tags in an external CSS file - they're HTML elements, and not valid CSS syntax. The CSS parser thinks it's part of the first rule declaration, which is why the first thing doesn't work as you expect (or at all, for that matter).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[fzia]

you are right Chris! i had the <style> tags in my css which were causing unexpected results, taking them out fixed it , thanks

 

[Vragabond]

Chris, good call. I was thinking that myself, but did not dare yell at poster that they don't know how to paste their own code to us. I guess in the future I will.

 

[fzia]

i have been using ASP include tag lately which requires me to put all necessary tags in a separate file and thats the reason i got confused and put those tags in the external css even when i have the <link> tag. I am sure if i just include the css file WITH the style tags it will work fine. anyways thanks to both of you, i appreciate your help