Using Expressions to Compensate For High DPIs?

Need correct expression to substitute element for High DPI browsers

[Bluestreak]

I've been testing the look of my 3 column site in high DPI (120 DPI) and so far it looks adequate in Firefox, Opera, etc.

Yep, you knew where I was going with this: it looks like monkey's bare @$$ in IE6/7.

For some reason the left column shifts 10 pixels to the right so that it's overlapping the middle column. No other browser exhibits this behavior.

Rather than tear my hair out trying to figure out how Microsoft screwed this one up, I'd like to use an expression to determine when the user's DPI setting is higher than 96, then adjust the left column accordingly.

Originally the element for my left sidebar was "left: 25px". I'd like to change that to "left: 15px" when the user DPI is higher than 96 for IE browsers.

So far I've come up with this:

left:expression(screen.deviceXDPI > 96 ? "15px" );

But IE is ignoring it. I'm assuming a few more things needed to be added to the expression before it gets recognized but I'm not sure what. Can anyone help?

[penders]

left:expression(screen.deviceXDPI > 96 ? "15px" );

I haven't tried messing with DPIs, but you are missing a false part in your conditional. So you could try:

left:expression(screen.deviceXDPI > 96 ? "15px" : "25px");

[Bluestreak]

Thanks for the response! I gave it a try, but still no joy. I wonder why it's blatantly ignoring it? I'm using expressions to set max-width in IE6 and that works just fine, but for some reason this won't. What else could I be missing?

[swa66]

I presume it works if you enter the 25px in the style ?
(specificity etc might be the problem ..., rule those out first)

[Bluestreak]

Yep, if I add it directly in the style it works fine. The trick is getting the expression to work so it replaces 25px with 15px whenever the DPI is higher than 96. I thought I had the expression right but it's not working. I must be missing something.

[appi2]

Not sure if this is any help but, I've just tried this

div {position:absolute; top:30px; left:expression(screen.deviceXDPI > 96 ? "100px" : "800px");

in IE6 and it works fine.
Although I didn't actually change the dpi on the pc to test it. Just changed the 96 to 90 to see if it worked.

[Bluestreak]

appi2:

Thanks for the suggestion! I got it to work and figured out why it wasn't doing it before. I was using a separate stylesheet for my IE hacks and placed the expression there. It wasn't working, so I placed it in my native stylesheet instead and it finally worked.

For some reason it ignores the expression when it's in my IE hacks stylesheet, and I have no idea why because my other expressions work just fine this way. Has this sort thing been a common issue before, and if so is there a fix/workaround?

It really annoys me too, but I may have to suffer having a single expression placed in my native stylesheet so visitors to my site with vision problems can still read my content easily.

[appi2]

Don't know why that may be happening.

Again works for me

eg
<link rel="stylesheet" href="default.css" type="text/css" media="screen">

<!--[if IE]>
<link rel="stylesheet" href="DPI.css" type="text/css" media="screen">
<![endif]-->

Just a thought you haven't got those two style sheets the wrong way round?
Meaning your default one after your IE one. Which would overwite the style applied.
Or another style thats overwriting it.

[Bluestreak]

Ah, that must have been what it was. I had the IE hacks stylesheets listed first. :-O

Switching them around should resolve the issue finally. Thanks!