My [url=http://lens.gyan.info]website has valid XHTML Basic 1.0 code and valid CSS code.
I use Firebird as my browser, so sometimes miss out on whether the page renders correctly in IE. Big mistake.
I have two horizontal header boxes followed by a two-column layout (menu + content).
Upon checking in IE, it seems that the links in the menu column don’t work!
After tweaking a bit, I removed the XHTML DTD from the HTML and voila! the links work. But the CSS positioning of the content column gets shifted upwards (only in IE). And thus overlapping with the second header box. Firebird still renders it correctly. Just how do I get the links and layout right in both IE and Firebird?
I guess, all I need to know is how to vertically align two columns in CSS?
I see also that the word-spacing attribute in your .areas is not honored in IE.
As to your question about the placement of the “content” div, you specify a hieght of 666px for your “sections” div, then tell the content div that it needs to go to -676px, so it looks to me that it should be 10px higher than the sections div, or right in the middle of your areas div. It seems like IE is rendering it correctly, but isn’t there a more straightforward way to place your elements? Like maybe with absolute positioning?
And one thing that I find really annoying is when a site’s page is way wider than my browser window, so I have to scroll left and right to read it. Your site is that way. You have it hard-coded to be 992 pixels wide, and my browser window is almost always set to be maybe 60% of the width of my 1024-wide screen.
Build your site according to web standards, and then determine why IE doesn’t render correctly. You will find it is a combination of IE does not fully support web standards and there are bugs in the way it renders CSS.
Study to find out the box back. Buy Zeldman’s web standards book. Buy Eric Meyer’s CSS book.
Also, your width statements are too long. Horizontal scrolling is a big no no.
I removed a padding parameter from ‘sections’ and everything works fine in both browsers. There’s still one glitch. In the ‘content’ box the the h2 tagged text appears with less top padding in IE than in Firebird. What’s wrong?
Spaces between selectors. One parameter per line. Brackets on their own lines. The only cause for complaint I see is, that parameters for anchor pseudo-class selectors are noted in one line. That suits me just fine. And the color values in comments. The best place to keep them, in case I want to revert. Anything else?
Well, I’d like to help, but I can’t get IE to work. I’m also curious, though, as to what Urban Ranger thinks is wrong with Gyan9’s CSS. It looks okay to me.