Page displays wrong on only one computer

What am I missing?

[hannamyluv]

So I built a site for a client. Pretty simple site with HTML and CSS. On every computer and browser combination I can find, this site displays correctly. I checked all the browsers and versions, PC vs Mac, all screen resolutions and the site is W3C compliant.

But on my client's computer, the site displays with a gap in between two of the CSS layers, a pretty big gap at that.

When I take his computer settings (browser and resolution) to another computer, the site displays fine.

What am I missing? What would cause this to happen on only this one computer? It's rather frustrating since (understandably) the client does not really believe that the site is fine on every other computer I have checked.

[pageoneresults]

Could you provide us with the relevant CSS for those areas where there is a problem?

What would cause this to happen on only this one computer?

Possibly some user settings on that local machine? Have they been in and changed their advanced settings?

[hannamyluv]

I think this would be the relevant CSS:

First there is a wrapper layer:

#mid {
background-image: url(assets/ltedge.gif);
background-repeat: repeat-y;
background-position: left;
}

It is just there to establish the background

Inside this is a top layer:

#crnav {
background-image: url(assets/topedge2.gif);
background-position: left;
height: 50px;
}

Again just a background.

And these two layers are also inside the wrapper. These next two layers are where the problem comes in:

#ltnav {
float:left;
width:175px;
}

#main {
padding: 0 20px 0 10px;
margin: 0 0 0 175px;
height: 100%;
background-color: #FFFFFF;
}

About a 30px gap appears between these two layers on his computer when we look at the site.

And just in case, inside the ltnav, there is another layer:

#indnav {
margin: 0 0 0 25px;
padding: 8px 0 8px 0;
height:20px
}

I don't think he has the computer knowledge to knowingly change his settings (he didn't even know how to look up his resolution), but that does not mean that he hasn't done so accidentally. Any idea what settings might be causing this?

I have noticed that some other sites he goes to that I am fairly confident were done by very competant designers also display incorrectly.

[jimbeetle]

Hmmm, does your client happen to use 800 x 600 rez? I still mostly use that (just call me a very late adopter), and see wide variations of how a CSS layout is rendered among pages of the same site -- sometimes even the same page on a reload -- on the same machine.

I actually haven't as yet found a solid CSS layout that does not at times break on my machine at 800 x 600, even those from very knowledgable CSS designers.

[hannamyluv]

Nope, he is using 1280x1024 on IE6. If I set my computer to those same setting, the page displays fine.

[pageoneresults]

Any idea what settings might be causing this?

The one I've run into numerous times has to do with the user changing their monitor's dpi setting. On older monitors, the default setting out of the box is 72 dpi. It could be changed to 96 dpi by the user. On newer monitors, the default dpi setting is 96 dpi and can be changed to 120 dpi.

I've seen the changing of these settings cause some issues on various sites. I've long since made corrections and since I work with absolutes, I was able to address the issues by making sure a font was specified for all elements and that font was a fixed size. This prevented things from "separating" when the dpi was set at the highest setting, which there are typically only two choices, default and the next highest.

If there is an element on the page that doesn't have any styles applied to it, then the user's browser will do "whatever" with it. In this case, it compensates for the dpi setting and adjusts the layout accordingly (from my experience). I believe you can test this by using IE's text sizing feature. For me, working with fixed font sizes addresses a lot of broken layout issues but it is definitely not the "proper solution". ;)

Right Click Desktop > Properties > Settings > Advanced > General

[penders]

Just a thought... have you made sure your client hasn't (inadvertently) changed the accessibility settings within IE6... even using an alternative stylesheet?!

Tools > Internet Options > [Accessibility]

Are you able to test another browser (FF perhaps) on the same machine?

[SuzyUK]

My guess has to be collapsing margins, 30px sounds like something that is set (by default even) but which is not collapsing as expected.. you would need to be able to isolate the problem and if you can (which is the difficult bit), I guarantee if you can isolate it, it could be stablised with CSS

I actually haven't as yet found a solid CSS layout that does not at times break on my machine at 800 x 600, even those from very knowledgable CSS designers.

actually I'm seeing the same with non-css layouts, prime example being this very site - unexpected gaps between the table cells - what I see is the same as CSS layouts, it fixes itself on a refresh but so far there is never enough info to narrow a specific cause, so I wouldn't particularly label CSS designs with this ailment

[edited by: SuzyUK at 11:05 pm (utc) on Dec. 27, 2006]

[SuzyUK]

PS: as for the one computer not working, bit. (i.e. same OS and browser)
1px can make all the difference when it comes to rounding up or down, if your PC's viewport is 1px narrower/wider than expected it may well choke until you refresh. That alone would not be enough to make columns drop, but might be enough to throw those hard earned designs.. therefore underlining the fact that no design CSS or otherwise should be pixel perfect?

Suzy

[hannamyluv]

Made suggested changes and checked DPI. None of those worked.

The client is now claiming that this is happening on his daughter's computer, too.

What is the chances that an anti-virus software or something similar that people in the same family would have on their computer could cause something like this?

[hannamyluv]

Okay, I thought I would report back on this.

I think this is a browser issue. The guy and his daughter have an AOL branded IE and I think that this may be the issue. I know the Y! branded browser on my son's computer has some issues, such as keyboard shortcuts not working. Has anyone heard of issues with the AOL branded IE not displaying code correctly? Any fixes avaliable?

[aleksl]

I've had website rendering issues with AOL-branded IE before. may have been IE 5...can't recall. fixed by uninstalling AOL and upgrading IE...or something to that extend.

[SuzyUK]

I concur.. though I've never used AOL branded IE, I do seem to remember that it's always caused rendering issues in some form or another

If someone reports problems to me and it turns out that they use AOL I usually tell them they're not viewing the web as intended but through AOL's eyes.. I thought that was old news but perhaps it's still true?