CSS alignment - LCD vs. CRT ??

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

CSS alignment - LCD vs. CRT ??

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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...
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post 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. >.>
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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...
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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!
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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??
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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).
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Is this something to do with screen resolution?
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

That's my guess, but I tried resizing my screen and it didn't really break anything.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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????
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Is he using a mac? Sorry... have to ask!
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post by califdon »

:lol: no, he's not. none of them. but I know what you mean!
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post 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.
User avatar
aaronhall
DevNet Resident
Posts: 1040
Joined: Tue Aug 13, 2002 5:10 pm
Location: Back in Phoenix, missing the microbrews
Contact:

Post 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
Post Reply