Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Using Expressions to Compensate For High DPIs?

Need correct expression to substitute element for High DPI browsers



7:43 am on Mar 6, 2008 (gmt 0)

10+ Year Member

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?


11:28 am on Mar 6, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

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");


3:59 pm on Mar 6, 2008 (gmt 0)

10+ Year Member

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?


4:43 pm on Mar 6, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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


5:06 pm on Mar 6, 2008 (gmt 0)

10+ Year Member

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.


6:33 pm on Mar 6, 2008 (gmt 0)

10+ Year Member

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.


7:21 pm on Mar 6, 2008 (gmt 0)

10+ Year Member


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.


11:33 pm on Mar 6, 2008 (gmt 0)

10+ Year Member

Don't know why that may be happening.

Again works for me

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

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

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.


4:07 am on Mar 7, 2008 (gmt 0)

10+ Year Member

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!


Featured Threads

Hot Threads This Week

Hot Threads This Month