looking for some CSS troubleshooting ideas -- why isn't my id style being applied

Question

I have two pages, Page A and Page B. Both of them have an item with an ID of "loginLink". Both of them import "header.css", which has the following:

#loginlink, #usernamePlaceholder {color:#333;font-size:16px;font-weight:bold;}

On Page A, my loginLink displays correctly. On page B, the style defined in header.css doesn't get applied. Firefox shows me that Page A is getting its style from header.css, but Page B is not. I know that Page B is loading header.css successfully because other styles defined in header.css are being applied to other elements on the page.

I'm going to do some process-of-elimination, brute force work now, removing elements from the two pages until they match, but would love to hear any non-brute-force ideas.

Here's the html for the login link:

       <div id="HeaderNotLoggedIn" style="display: block;">
    <a href="https://idcenter.services.mysite.net/SignInNew?referer=http%3A%2F%2Flocal.tvlistings.mysite.net%2Fwebdvr%2F" id="loginLink" style="">Please Sign In</a>
   </div>

Answer 1

Can you provide us with the HTML code you are using for the Login link?

Answer 2

You refer to "loginLink" in your (description of your) HTML, and "#loginlink" in your CSS excerpt - could this difference be the problem?

Answer 3

Double check your id's, maybe there's an typo?

Write some new radical css command to your code that's not overwritten with something else. Like

background:red!important;

that way you can see if something else is overwriting your code or your targetting is wrong.

Check your cache, that seems to be the issue some times, altho this does not sound like an cache issue.

Use firebug to see what happens to your styles.