Why do CSS styles only take affect when placed in a style tag in my form and not in the associated CSS file?

Question

Thanks to [this question][1] about repositioning the AJAX toolkit's CalloutExtender control, for an answer to my problem of positioning Validator CallOuts on a web form.

Can someone tell me why adding the CSS classes directly to my web page within a <style> element has the desired effect but when adding the same classes to a linked CSS file, they have no effect?

So, adding:

<style>

.CustomValidator {position:relative;margin-left:-80px;}

.CustomValidator div {border:solid 1px Black;background-color:LemonChiffon; position:relative;}

.CustomValidator td {border:solid 1px Black;background-color:LemonChiffon;}

.CustomValidator .ajax__validatorcallout_popup_table {display:none;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_popup_table_row {vertical-align:top;height:100%;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_cell {width:20px;height:100%;text-        align:right;vertical-align:top;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_table {height:100%;border:none;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_table_row {background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell {padding:8px 0px 0px 0px;text-align:right;vertical-align:top;font-size:1px;border:none;background-color:transparent;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv {font-size:1px;position:relative;left:1px;border-bottom:none;border-right:none;border-left:none;width:15px;background-color:transparent;padding:0px;}

.CustomValidator .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div {height:1px;overflow:hidden;border-top:none;border-bottom:none;border-right:none;padding:0px;margin-left:auto;}

.CustomValidator .ajax__validatorcallout_error_message_cell {font-family:Verdana;font-size:10px;padding:5px;border-right:none;border-left:none;width:100%;}

.CustomValidator .ajax__validatorcallout_icon_cell {width:20px;padding:5px;border-right:none;}

.CustomValidator .ajax__validatorcallout_close_button_cell {vertical-align:top;padding:0px;text-align:right;border-left:none;}

.CustomValidator .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv {border:none;text-align:center;width:10px;padding:2px;cursor:pointer;}

</style>

directly to my page works but if I paste the classes into my CSS file (without the style tag naturally) they seem to be ignored while other stylesheet changes (for other page elements) are reflected.

I've gone to the point of removing all other styles from the CSS file and still no joy. Changes to the "margin-left" in the top .CustomValidator style have no effect while other changes, like background-color in .CustomValidator div, work correctly.

The field is inside a table and adding the margin-left=-80 t the .CustomValidator table style, in the CSS file moves the call out to the left, but no very far and the movement is the same, no matter what you make the value.

Answer 1

Maybe your browser cached your stylesheet and is therefore not showing any recent changes you've made to it.

Answer 2

I'm going for the maybe-too-obvious answer of...are you sure you are including the CSS file?

Answer 3

Make sure you have the syntax right on your Link Tag, like so:

<link rel="stylesheet" type="text/css" href="css/main.css" />

I made a typo once, and did:

<link rel="stylesheet" type="text/css" href="css\main.css" />

and it would render fine on some browsers, but not at all on others.

Answer 4

Actually, CSS follows a cascading (duh) model of inheritance, from top to bottom in the DOM, making their entrance into the DOM significant. Depending on where in your CSS file you put them, there might be rules that follow that invalidates them. Putting them in your code directly (I assume near the place of use) will ensure the CSS is parsed as last and most significant. I guess some details on the size of your CSS (external) file and the complexity within would be info in this case. I'd also pop that CSS file through a validator, just to make sure you haven't got any gotchas in there (like * rules, which needs to be handled gently).

Answer 5

Related to Alexander's above...

I would try including the style sheet as the first and last stylesheet in the list of sheets (if there are more than one). Similarly some library or javascript might be overwriting the changes with its own css. Where other cascading rules don't apply the most recent rules, entered lower on the page will override the old/previously entered ones, if they describe the same elements.

Are you using firebug's css tab? Make sure that's getting loaded also might want to look at the net tab to see when its being loaded with relation to other javascript or css, compare that to when the file that contains the gets loaded.