Welcome to WebmasterWorld Guest from 107.20.104.161

Forum Moderators: not2easy

Message Too Old, No Replies

Web page looks bigger on different Machines : HELP

     

aniketrk

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

4:52 pm on Feb 4, 2010 (gmt 0)

5+ Year Member



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

9:44 pm on Feb 10, 2010 (gmt 0)

5+ Year Member



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

9:57 am on Mar 9, 2010 (gmt 0)

10+ Year Member



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

choster

7:51 pm on Mar 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

8:03 pm on Mar 9, 2010 (gmt 0)

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



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

7:01 am on Mar 14, 2010 (gmt 0)

5+ Year Member



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

4:50 pm on May 20, 2010 (gmt 0)

5+ Year Member



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

6:45 pm on May 20, 2010 (gmt 0)

5+ Year Member



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

6:50 pm on May 20, 2010 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month