SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    120dpi Breaking Layout

    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.

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,336
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    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
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My eyes are a bit blurry right now, but are you using large font-metrics on a widescreen monitor with a high screen resolution?

  5. #5
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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?
    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).

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz
    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.

  7. #7
    SitePoint Enthusiast dziner's Avatar
    Join Date
    Jun 2004
    Location
    Harrisburg
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    #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).

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •