Welcome to WebmasterWorld Guest from 54.147.189.54

Forum Moderators: not2easy

Message Too Old, No Replies

Web page looks bigger on different Machines : HELP

     
5:18 pm on Jan 20, 2010 (gmt 0)

New User

5+ Year Member

joined:Nov 10, 2009
posts: 10
votes: 0


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.

11:40 am on Feb 2, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 0


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.
4:52 pm on Feb 4, 2010 (gmt 0)

Full Member

5+ Year Member

joined:Dec 30, 2009
posts:249
votes: 0


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.
9:44 pm on Feb 10, 2010 (gmt 0)

New User

5+ Year Member

joined:Nov 10, 2009
posts: 10
votes: 0


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.
9:57 am on Mar 9, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 5, 2003
posts:61
votes: 3


Apple monitors have different resolution to others. 96dpi Apple, 72dpi others, iirc. That might be it?
7:51 pm on Mar 9, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 17, 2001
posts:1262
votes: 0


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.
8:03 pm on Mar 9, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4965
votes: 10


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?
7:01 am on Mar 14, 2010 (gmt 0)

New User

5+ Year Member

joined:Mar 5, 2010
posts: 13
votes: 0


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
4:50 pm on May 20, 2010 (gmt 0)

New User

5+ Year Member

joined:Nov 10, 2009
posts: 10
votes: 0


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.
6:45 pm on May 20, 2010 (gmt 0)

New User

5+ Year Member

joined:Mar 5, 2010
posts: 13
votes: 0


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
6:50 pm on May 20, 2010 (gmt 0)

New User

5+ Year Member

joined:Nov 10, 2009
posts: 10
votes: 0


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.