CSS help

Dear Lazyweb, I did some CSS tricks to make the DNA Lounge flyers and photo galleries work better on phones: the images now scale down when the window is less wide than the image, without changing the font size. (Example, example.)

Works for me in the latest Safari, Firefox and Opera on Mac, but I'm told it fucks up the aspect ratio in MSIE 8 (and possibly earlier?)

Someone tell me how to fix that, please.

Tags: , , ,
Current Music: Client -- Pills ♬

14 Responses:

  1. boggyb says:

    IE7 appears to scale correctly (assuming the first is 533x800 and the second is 900x598), so it looks like just IE8 is broken (I don't have that installed so unfortuantly can't help with a fix for it).

  2. scullin says:

    Hmm. It seems fine to me in both IE7 and IE8. IE6 doesn't understand max-width, so it will simply be ignored.

    • jwz says:

      Try it with a portrait image in IE8? this site shows it stretching too tall.

      • scullin says:

        It appears that IE8 is trying to apply *both* width: 100% from .photo and the inline width style. At least, when I disable the width: 100% in the developer tools, things snap back to correct.

        • jwz says:

          Does adding an "!important" on one of them help?

          • scullin says:

            It doesn't appear to. IE appears to view width and max-width orthogonally. Adding "width: auto" to the inline style seems to improve behavior.

            • jwz says:

              Someone suggested that specifying both max-width and max-height, e.g.,
              <IMG SRC="004.jpg" CLASS="photo" STYLE="max-width:498px; max-height:750px">
              would fix it in IE8, and it seems to in that online tester. Work for you?

              • scullin says:

                Yes, that does the trick. (And you'll probably get spam from me saying that from my non-logged in IE8 browser.)

                ETA. Oh, cool, it first plays you an ad, then tells you you can't post.

  3. grahams says:

    You could try to fix it in IE, or you could save yourself alot of hassle and conditionally include the CSS in question:

    http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

    • jwz says:

      Is there any way to do these kind of conditionals inside the style sheet file itself, or do you really have to use separate files?

      • grahams says:

        To the best of my knowledge, there is no way to do any logic in CSS. I've heard rumblings of that being in one of the pending specs, but i'm sure it will be around a decade before it actually is supported widely.

      • grahams says:

        There are some meta-languages which allow conditionals and variables, and then generate CSS, but I have no experience with them (and they would still require multiple includes in the HTML)

        Here is one example: http://www.conditional-css.com/

      • headlouse says:

        Usually I use conditional comments for IE fixes but what you can do is add a basic javascript browser stiff and add the browser name as a class to the body tag (i.e., <body class="ie8">). This way you can target the IE browsers in you global CSS file without resorting to hacks.

        Of course "browser sniffing isn't recommended best practice and what if they turn javascript off" blah blah blah. Whatever it works.

  4. hatter says:

    Publish the IP and any other pertinent info from the site logs for every IE8 user viewing the DNA Lounge site, have your many readers hunt them down/round them up for reeducation.

    Problem solved (yours and many other peoples)

    the hatter