This issue is only in IE for the PC. Go figure right?
The menu on the left is the issue. There is NOT supposed to be such a large padding on the left. When you roll over the item, it resets and looks correct. But obviously it is not supposed to be doing that.
Are you asking why I did that? Not sure what you are getting at. That works out to about 5px because of how I set the body font-size. Am I doing something wrong?
I took care of the spacing... That was wierd, because it was NOT in my code and I could not see it in BBEdit. I had to retype it. Server caching maybe.
Still looking through the code (not that I'll necessarily be able to help) and here's one thing I've noticed that might help steer the smart CSS people in the right way. From what I can tell, looking between Firefox and MSIE, you have two possibly separate problems:
1) a:hover throws your links to the left. 2) the left-nav boxes are too close to the left border.
Now that I type it, it sounds exactly like what you're saying, but what I'm getting at is, when you hover, it doesn't put the links in the right place. When the page first loads in IE, the boxes are too close to the left, but the links look like they are where they should be. While everything looks correct after the hover, in reality it appears the whole box itself should be moved over a bit from the left side. In Firefox, these all have some space from the left border, in IE they don't.
The a:hover thing also appears to be affecting the "This is Pure Blue" link in the middle of the page - maybe that'll make what I'm saying more clear. This makes it seem more like two separate issues.
I'm still playing around with the code, but that doesn't necessarily mean I'll find an answer :) Hopefully my little bit of insight will help steer someone else into helping you soon.
i'm a bit rusty at the whole css thing... been a few years but i dont think you can have "color: clr1" and another "color: clr2" in the same css identifier... so why should two "margin:" be allowed?
when a problem like this pops up i usually rem* out some of the formatting info until i figure out whats wrong... i suggest you do the same ;)
well there merwin... took another crack at it and there seems to be nothing wrong with it... but the header looks out of wack
i built the page backwards from the left side navigation... nothing was out of the ordinary... once i got to the main header... the header sort of center aligned kinda straddled the left nav and main content...
i left out the things not needed and finally cut and pasted the entire html in your formatting and the css in your foramtting instead... same deal... the main header still straddled... so i finally entered the DOCTYPE... i hate that stuff man
[main content] [left nav][/left nav] [content n stuff][/content n stuff] [/main content]
[that cool footer of yours] [/that cool footer of yours]
dont bother with the padding or the margins at this moment of reformatting and redesign... just place the current info in those containers.. cuz the a hover will work with or without a left pad :D after the layout is down then you can spruce up the little details
...however it does look awesome in firefox
p.s. it is always better to create your own code then to copy others... this way you learn from your mistakes instead of trying to figure out where the other guy made his or hers