PDA

View Full Version : browser and screen resolution



plumber
26 Jan 2010, 09: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, 02: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.