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.
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.)
Tags: dnalounge, firstperson, lazyweb, www
Current Music: Client -- Pills ♬
14 Responses:
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).
Hmm. It seems fine to me in both IE7 and IE8. IE6 doesn't understand max-width, so it will simply be ignored.
Try it with a portrait image in IE8? this site shows it stretching too tall.
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.
Does adding an "!important" on one of them help?
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.
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?
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.
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/
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?
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.
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/
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.
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