Getting "max-width" IE hack to validate

[timmah1980]

Hi there,

I've just built a new version of our site at work...

www.4you2.org.uk

...which works fine - looks fine in FF and IE, validates as XHTML - but seems to crash the W3C CSS validator. I've figured out this is because of the line of javascript in the CSS (the CSS validates fine without it), so was looking for a fix.

I have tried the suggestion in this thread but haven't managed to get it working in IE. It doesn't appear to see it at all, and stretches the content to the full width of the browser.

Here's the link to the test version:

www.4you2.org.uk/index-test.htm

Anyone able to help?

Thanks!

Tim

[Dan Schulz]

Hello,

You're going to need to stick your IE hack inside a separate CSS file and link to it via a conditional comment in the HEAD section of your HTML file (do not put this in your stylesheet - if you want to use CSS instead to cut down on markup, @import the IE only stylesheet instead).

<!--[if lt IE 7]>
HTML code to link to stylesheet goes here
<![endif]-->

[Dan_A]

Having width:expression(document.body.clientWidth > 950? "950px": "auto" ); between conditional comments for lt IE 7 is the best solution.
But first remove the xml prolog as it switches ie 6 into quirks mode.

[timmah1980]

Done. We're a step closer, but still not quite right.

If you check the link again, you'll notice that the white main section of the page is approx 20px too wide. And also, the menu items down the left are a bit bloated.

Thanks for your help with this, guys - much appreciated!

Tim

[timmah1980]

My gut reaction is that it's now (by removing the xml line) fixed of the "double margin" bug - but the CSS is still set to accommodate for that bug, and is throwing everything out. If that makes sense?

Am I close??

[Dan_A]

Remove width from #breadcrumbs

[timmah1980]

Doesn't appear to have helped...?

(Thanks again for looking into it for me though - it's much appreciated)

[Dan_A]

It should work and fix a serious display problem with IE 6.

[timmah1980]

Hmmm...blinkin' IE!!!

There are a few other elements which have 100% width - would removing any of their width properties help?

[Dan_A]

What exactly do you want to fix ?

[timmah1980]

It works fine, so there's nothing that needs "fixing", as such. I just want it to validate as CSS, without the javascript in the original CSS file crashing the W3C validator.

Interestingly, I notice that the Joomla! website uses the same feature and doesn't validate as CSS either, so perhaps there isn't an easy way to fix it.

I'm tempted to just leave it and remove the CSS tick from the page footer. It is valid CSS - it's just the validator doesn't like it!

What do you reckon?

[Dan Schulz]

http://www.sitepoint.com/forums/show...26&postcount=2

[timmah1980]

Ok thanks - seems to have worked now. I can't have done it properly when i tried it before. Might have an issue with one of the side menus, but will try a few things out first.

Thanks.