SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Northampton, UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting "max-width" IE hack to validate

    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

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).
    HTML Code:
    <!--[if lt IE 7]>
    HTML code to link to stylesheet goes here
    <![endif]-->

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Northampton, UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Northampton, UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove width from #breadcrumbs

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Northampton, UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't appear to have helped...?

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

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should work and fix a serious display problem with IE 6.

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Northampton, UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...blinkin' IE!!!

    There are a few other elements which have 100&#37; width - would removing any of their width properties help?

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What exactly do you want to fix ?

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Northampton, UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Northampton, UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •