View Full Version : browser and screen resolution
plumber
26 Jan 2010, 08:42 PM
does any1 know how to make a webpage veiwable in all screen relolutions and all browsers?
cause it gets pretty messed up on IE and a different screen relolution from mine
i formated it to Firefox but i still need help with all the other stuff because i dont even know where to begin other than asking here
if you want to see my site its
http://www.cashcratey.zymichost.com/
Wickham
27 Jan 2010, 01:07 AM
does any1 know how to make a webpage viewable in all screen resolutions and all browsers?
The method is the same for all browsers.
Code all widths in % totaling 100%. That means all elements like divs, tables, td tags, forms, lists and also side margins, side padding and also images
Borders can't be sized in % so make the total of all other items 97% or 98% to allow for borders in px.
You won't find it easy for your page. You have a header image 1078*272px but it's a background which cannot be stretched so you have to make it a normal image and size that in px
<img style="width: 100%;" src="webpics1/background01.JPG" alt="Background image"/>
If you don't give a height, that will change automatically in proportion to the width.
Your navbar will be a problem as it isn't flexible in width because of the font-size and the cellspacing in px. Even if you size the td tags in % the font-size will be too great for a small window so it would be better to have a vertical sidebar menu.
Your page doesn't have a doctype above the <html> tag which is needed by all browsers, especially IE. See http://www.w3.org/QA/2002/04/valid-dtd-list.html
Totally fluid page design works best where there is very little content, so it can squash up without a problem and still look good at very large resolution widths. You can code min-width and max-width but this doesn't work in IE6.
The best you can do with your code without altering it too much is to wrap everything in a container with
#container{ min-width: 1078px; max-width: 1380px; }
but it won't affect IE6.
You have the #container style but you aren't using it yet.
<body bgcolor="#80FDFF" text=#0068FF LINK=#001EB2 ALINK=#001EB2 VLINK=#001EB2>
<div id="container">
.........all content.........
</div>
</body>
Another tip - don't use capitals in files names like background01.JPG as servers are case-sensitive and it makes coding easier if you stick to lower case in the code and in filenames.
Powered by vBulletin® Version 4.2.0 Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.