120dpi Breaking Layout

[dziner]

My company has a site that uses all divs and css, plus it validates. The problem is that we have a few people who have contacted us stating that our layout is broken. Their configuration is:

Notebook PC
Windows
IE 6.0.2
Screen Resolution - 1400 x 1050 (strange resolution if you ask me)
Highest 32 bit, Large size 120 DPI, 125% normal size (seems to only be a Windows setting)

I find the 1400 x 1050 resolution and the 120dpi settings are probably what is causing it. This doesn't seem like it should be a default setting from the manufacturer, or is it? And why would a screen resolution like this cause a layout problem with css? My guess is that it mst have something to do with the 120dpi setting. But has anyone else experienced anything like this? And how can the site be fixed to allow someone with these settings to access the site as it should be seen?

The problem it's causing is as follow. The layout is pretty simple, header, left nav column, right body content, and footer. The content is being pushed below the left column. Which is usually an issue with padding or margins. But the site has been tested in every browser on both Mac and PC with no problems. Only with the above PC settings.

[r937]

can we see the site?

when content is pushed below the left column, it is usually an issue with the css being written for a fixed-size layout, rather than a liquid layout

you can probably get the same result if the browser window is not maximized

[DaveWoods]

This sounds like a strange problem and something that I've never come across before. Personally I wasn't aware of 120dpi monitors but I presume what you're saying is that the font-size is being increased by 125% to that of a normal screen? This may be causing the width to be forced out of place by the content and therefore causing the column in question to drop underneath as that's the only place that it can find enough space to be displayed.

I'd certainly agree that it's usually something to do with the paddings and margins as I've come across this problem on a number of occasions in IE where the left margin doubles where you're floating divs. This problem is easily fixed by applying display: inline in the same style that contains the margin.

It's probably best if you show us the page (link to the site) in question so that we can take a look at the code otherwise it could be any one of a number of reasons causing the problem.

[Dan Schulz]

My eyes are a bit blurry right now, but are you using large font-metrics on a widescreen monitor with a high screen resolution?

[dziner]

My eyes are a bit blurry right now, but are you using large font-metrics on a widescreen monitor with a high screen resolution?

Well, I'm not. But apparantly a few people are. I wasn't aware of this 120dpi setting on the PC until a business partner explained they couldn't view the site properly and gave me their settings.

Trying to duplicate the settings on a PC did not reproduce the problem. It must be something specific to a widescreen display and the 120dpi setting. When she sets her settings back to 96dpi, everything is fine, but she says she has problems reading the text on her icons and documents (which is not browser specific).

[Tyssen]

This problem is easily fixed by applying display: inline in the same style that contains the margin.

As long as that element is the one that's floated.

[dziner]

We have a few divs inside of each other.

(lhsblock) contains the entire left column
(mrabox) contains a set of information
(lhsbox) sits below mrabox and has a different background
(lhscat) sits inside of lhsbox and contains links

#lhsBlock {
      padding:0 20px 0 10px;
      width:130px;
      float:left;
      }
.mraBox {
      padding: 13px 6px 6px 6px;
      background-image: url(/lhs_cap.png);
      background-repeat: no-repeat;
      background-color: #ccc;
      }
#lhsBox {
      background-image:url(/lhs_bg.png);
      background-repeat:repeat-x;
      padding-top:8px;
      min-height:600px;
      height:auto !important;
      height:600px;
.lhsCat {
    background-image:url(/lhs_cat_bg.png);
    background-repeat:no-repeat;
    background-color:#fff;
    padding: 4px 4px 4px 8px;
    margin: 4px;
    }

Sorry, I can post a url to the site. I came in on the project towards the end and there's probably some hacking that happened in the css. BUT, the site works perfect in every browser, every platform, EXCEPT if someone on a PC has their display settings set to 120dpi and is using a widescreen. Which may be a small amount of people (less than our Safari users).

I'm still expected to look into the issue and see if I can find a fix. Even though I can't replicate the issue locally (which makes it extremely difficult).

[Tyssen]

Impossible to tell from that small snippet as we'd need to see the dimensions of the containing elements as well. Overall font-size will probably play a part too.