Web page looks bigger on different Machines : HELP

[aniketrk]

Hello all,
quick question. I have created a small web site. All static. no dynamic content. I validated the pages and they are all fine. The web site looks perfect on my safari browser, firefox and internet explorer. It looks good on many other machines. but some machines (windows), I tried my web page on IE, and it looked very big. I had to scroll from one end to another. Have no idea why it happened. Also, I have lots of <DIV>'s which I have used and the outer div is centered in the middle, so everything looks centered. I have done that by using CSS :
#container{
position: relative;
margin-left:auto;
margin-right:auto;
width: 1200px;
height:926px;
}

Looks perfect in my machine (MAC), but the browser where the page looks big, when I try to change the resolution to small or view the web page small, the page moves to left and does not remain centered. I dont even know if its a problem with my CSS or HTML. Do you guys have any idea's? Please let me know cause this is the only bug thats remaining.
Thanks in advance.

[limbo]

Hi aniketrk

Your CSS looks correct to me, for centering a page - so I'd hazard a guess that there's another issue there, either an HTML one, or cascade where the parent container is floated?

Could IE issue could be a resolution one? Maybe your screen res is different from the mac to PC screen? If so, then test the site at your base res on both platforms.

[milosevic]

If you refresh the page after resizing the browser window, does it then go back to the centre?

It's kind of hard to tell what your issue is from the initial post - "it looked very big" is too vague to give any advice because you could mean a whole lot of things.

[aniketrk]

Thanks guys for your replies. What I did was I changed the header image width from 1200px to 1050px. it reduced the width of the page a lot and looks okay on the browsers. But I am still confused as to,
why does a width of 1200px (centered) look proper on safari and looks very wide on other browsers.
exg :

1200px on safari

| |HEADERIMAGE| |

1200px on other browsers

||HEADERIMAGE||

THE HEADER IMAGE COVERS THE WHOLE PAGE and as the width of the page is related to the header image, the whole page becomes wide.

[Mike_Feury]

Apple monitors have different resolution to others. 96dpi Apple, 72dpi others, iirc. That might be it?

[choster]

A pixel is a pixel on most any consumer platform, Mac vs. Windows is irrelevant in that regard. The resolution to which you refer is used for print approximations of screen layouts, not for the screen itself.

Have you validated your code to ensure there is no bad markup or conflicting styles? If so, I would try wrapping the header image in a block (img by default is an inline element) and styling it. It's also not clear to me why position: relative needs to be set at all.

[Fotiman]

I tried my web page on IE, and it looked very big.

Could it simply be that the View > Text Size is set to Larger or Largest on those machines?

[BillPitts]

Hi aniketrk,
What size monitor do you have on your Mac. A buddy of mine has one of the giant flat screens. You know, the kind that you could open up a drive-in theater with? My online magazine, which fits my 15-inch flat screen, looks absolutely puny on his.

Could this be what you're seeing? Are you building on a large monitor?

Bill

[aniketrk]

I am not sure what the problem was. I am still trying to find out the reasons it happened. But what I did was-
My header image was 1300px wide (which i thought might have caused the complete container and the page to blow out of proportion.)
so I reduced it to 1050px. Now it looks okay.
One more thing I was doing was using div's and absolute positioning.
I changed that whole thing and created everything from scratch using tables and relative positioning.
Thanks,
Aniket.

[BillPitts]

Hi aniketrk,
In case you don't have a copy yet, I'd like to recommend David Sawyer McFarland's book, CSS: The Missing Manual. This has become a very useful reference book for me. It could answer quite a few of your questions!

Bill

[aniketrk]

Bill,
Thanks for your response. I actually use lynda.com and learn from those tutorials. i will also buy the book you mentioned.
Thanks again.
Aniket.