homepage Welcome to WebmasterWorld Guest from 54.211.34.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Web page looks bigger on different Machines : HELP
aniketrk

5+ Year Member



 
Msg#: 4064374 posted 5:18 pm on Jan 20, 2010 (gmt 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.

 

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4064374 posted 11:40 am on Feb 2, 2010 (gmt 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.

milosevic



 
Msg#: 4064374 posted 4:52 pm on Feb 4, 2010 (gmt 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.

aniketrk

5+ Year Member



 
Msg#: 4064374 posted 9:44 pm on Feb 10, 2010 (gmt 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.

Mike_Feury

10+ Year Member



 
Msg#: 4064374 posted 9:57 am on Mar 9, 2010 (gmt 0)

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

choster

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4064374 posted 7:51 pm on Mar 9, 2010 (gmt 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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4064374 posted 8:03 pm on Mar 9, 2010 (gmt 0)

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



 
Msg#: 4064374 posted 7:01 am on Mar 14, 2010 (gmt 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

aniketrk

5+ Year Member



 
Msg#: 4064374 posted 4:50 pm on May 20, 2010 (gmt 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.

BillPitts



 
Msg#: 4064374 posted 6:45 pm on May 20, 2010 (gmt 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

aniketrk

5+ Year Member



 
Msg#: 4064374 posted 6:50 pm on May 20, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved