Page 1 of 2

CSS alignment - LCD vs. CRT ??

Posted: Tue Nov 14, 2006 7:17 pm
by califdon
I'm just beginning to use CSS for positioning, rather than HTML tables. My first real attempt is http://sfbayaug.com and I was pleased with what I can do with it -- until I had reports from two friends who said the text was vertically misaligned toward the bottom. It looked fine on my system and I had checked it in all 4 browsers, as I always do.

My second friend finally discovered that it made no difference which browser he was using, but it displays correctly when viewed on an LCD monitor, but it's screwed on a CRT monitor, no matter what browser! Sure enough, my first friend also has a CRT. I would never have guessed that the monitor technology would make a difference in positioning! And only 2 of the <div>s seem to be affected, the same for both my friends. I've looked at those 2 styles and can't see anything any different from the others.

I'm wondering if anyone else has experienced this? As a beginner, I may be doing something wrong in the styles, but I am really confused that it looks okay on an LCD monitor, but positions just 2 of the <div>s differently if viewed on a CRT.

Posted: Tue Nov 14, 2006 7:49 pm
by nickvd
HUH?


.. I understand what you're getting at, but HUH? still is the only thing I can say.. That shouldn't be possible...

Posted: Tue Nov 14, 2006 8:32 pm
by Ambush Commander
I agree: I think you're jumping to conclusions attributing the problem to a monitor. Can you get full browser version info from your friends? Also, looks fine for me: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0 - Build ID: 2006101023, and yes, I am using an LCD. >.>

Posted: Tue Nov 14, 2006 10:06 pm
by califdon
Thanks, guys. I feel the same way, but two friends, one WinXP/Netscape 6/FireFox, the other WinXP/IE/Opera, as well as Linux/Opera and 2 monitors, one LCD and one CRT. I'm really confused.

It looks fine on my LCD screen, too, but one guy only has a CRT and the other has both and it just seems to be the case that when he uses his CRT monitor, it's messed up, no matter what browser he uses.

The major point, though, is that whatever the cause, the page which you confirmed looks okay is NOT okay for some viewers! Bad situation.

I'm continuing to work it thru and will post whatever I can learn here.

Posted: Tue Nov 14, 2006 11:04 pm
by nickvd
An idea!

Have one of your "troubled" friends, take a screenshot of the problem, and post it, it could just be one helluva coincidence... I can test it better at work tomorrow, as I only have my notebook here at the house... at work i'm (grr) stuck with a crt for now...

Posted: Tue Nov 14, 2006 11:39 pm
by califdon
One of them did print out a screen capture (we had lunch together today) and the basic difference is that just 2 <div>s (the one containing the MAP link and the one below that, containing the list of links) are maybe an inch higher than they should be, overlapping the bottom of the background image.

That will be great if you can check it out tomorrow on a crt!

Thanks!

Posted: Wed Nov 15, 2006 10:45 am
by califdon
In the cold, clear light of the next morning, it occurs to me that you guys are right, there's no way the monitor can affect the positioning of one element relative to others! The rendering takes place in the browser before it tries to display anything. If a pixel at a specific location is supposed to be red, that's determined by the software, not the monitor! The specific appearance of that red will be different on different monitors, but its location surely cannot be! I'm stumped, then, on why two people find that just 2 of the several <div>s end up misaligned vertically in some circumstances. Hmm, sounds like it's related to scrolling or something.... possible??

Posted: Wed Nov 15, 2006 2:32 pm
by califdon
OK, I made some minor changes in my CSS and now my friend reports that it looks okay on CRT as well as LCD. I am in the process of trying to understand what change I made that did that, and will follow-up here when (if) I figure it out. Clearly, my CSS coding was creating the problem, but it's not at all clear why it would look okay on an LCD but not on a CRT (or at least some CRTs).

Posted: Wed Nov 15, 2006 3:30 pm
by Chris Corbyn
Is this something to do with screen resolution?

Posted: Wed Nov 15, 2006 3:37 pm
by Ambush Commander
That's my guess, but I tried resizing my screen and it didn't really break anything.

Posted: Wed Nov 15, 2006 7:03 pm
by califdon
That's what my information indicates, too. I have several people now who have tried it at different resolutions, down to 800x600, at least, and they don't have a problem. Nobody has or had any problems when viewing on an LCD screen. Some of my "testers" now report that they can also view it properly on a CRT, but at least one reports that he still has the problem on a CRT, no matter what browser he uses! I'm trying to make sure he's not just viewing a cached page, but even if he was, WHY would he have a different positioning than anybody else????

Posted: Wed Nov 15, 2006 7:06 pm
by Luke
Is he using a mac? Sorry... have to ask!

Posted: Wed Nov 15, 2006 8:07 pm
by califdon
:lol: no, he's not. none of them. but I know what you mean!

Posted: Thu Nov 16, 2006 3:31 am
by daedalus__
There are some icky hacks you may need to employ to get things to render properly in IE.

There are a lot of bugs, you should look it up and see if you need to correct anything for IE.

Posted: Thu Nov 16, 2006 5:57 am
by aaronhall
I was experiencing a bug in IE on a site using CSS positioning where the page would display normally while the window was maximized. As you adjusted the width of the window, however, at some points during the resizing (within margins of 4 or so pixels.. ), IE would re-render the page and misalign on of the divs. This problem certainly doesn't have anything to do with how your monitor emits light. Your browser doesn't know the difference between an LCD and CRT any more than it knows whether the monitor is white or black. I'm thinking that the maximized window was at just the right width to bring up that IE bug... has he tried resizing the window on the LCD?

EDIT: Was trying to replicate it, and it turns out I never fixed it. Slowly try resizing the width of the window in IE (I'm using 6.0.2900): http://www.evilwalrus.org/view/scripts