See what others see

[xxclixxx]

Ever wonder how your pages look on other browsers? Well here is where you can get screenshots of it and find out!

http://browsershots.org/

Free or you can pay $15 for a month of priority processing (just gets you the screen shots faster if you are impatient like me =P)

[drkelp]

Great site thx Tim. My site looks medoiocre on all of them!!

Cheers

G

[inge]

Mine look exactly as intended in all of them.
But checking for many browsers took a looong time!
Tip: Check your pages for compliance first, then most
pages will display OK in most browsers
(It can be good to know thatOpera can't center tables, but tables are soon deprecated anyway, and DIVS are often much easier to handle).

[gide83]

Just discovered this link (thx, Tim) sounds great. I'm in queue.
I'm used to testing my stuff in IE7 only - it's my second/barely used
browser - and always get surprised with the layout difference.
I've bookmarked this link, thanks again.

[inge]

I have created a basic CSS file that defines some parameters that are often undefined, or defined differently in different browsers.
It helps me a lot to have my pages shown the same way for all browsers (Well, almost; some tags may be missing).
There are some "class" tags that I use a lot; they are also shown.

Here it is:
<style type="text/css">
body { font-size:20px; }
a { color:#a90; }
a:visited
{ color:#980;
text-decoration:none;
}
a:hover
{ color:#db0;
font-size:115%;
background:#33e;
}
p, dl
{ margin:0 0 1em 0;
padding:0;
}
form, img, html
{ display:block;
margin:0;
padding:0;
font-size:100%;
}
input, textarea { font-size:110%; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-align:center; }
h1 { font-size: 300%; margin:0 0 .7em 0; }
h2 { font-size: 250%; margin:0 0 .7em 0; }
h3 { font-size: 200%; margin:0 0 .7em 0; }
h4 { font-size: 175%; margin:0 0 .7em 0; }
h5 { font-size: 150%; margin:0 0 .7em 0; }
h6 { font-size: 120%; margin:0 0 .7em 0; }

.banner { width:20em; }
.c, .l, .r { font-size:80%; }
.c
{ font-weight:normal;
background:#fafaff;
text-align:right;
}
.l
{ color:red;
text-align:left;
}
.r, .right { text-align:right; }
</style>

Before you can use this you must send me $5. :D:D:D

[gide83]

Is there a special tag or action to implement in source code in order to have
the same lay out/looking in most of the browsers used?
I'm talking about basic HTLM, I'm not an advanced webpages creator, just
learning day after day how to improve my skills. I did the test with Browsershots, oups!...

[inge]

My basic CSS takes care of most of it, since it overrides browser defaults.
Things that some browser's won't do, like centering tables, can't be solved with CSS.

[gide83]

Thanks, inge, but frankly learning CSS right now is not my plan :o

[wyattchaz]

thanks tim and inge

[abrockie]

Before you can use this you must send me $5. :D:D:D

Would you take Euros?

[inge]

Is there a special tag or action to implement in source code in order to have the same lay out/looking in most of the browsers used?
I'm talking about basic HTLM, I'm not an advanced webpages creator, just
learning day after day how to improve my skills. I did the test with Browsershots, oups!...

In order to make it look right you should remove everything (or as much as possible) that has to do with layout from your HTML.
HTML should describe the contents, and CSS the layout. If you do this right, everything should in principle look the same with all modern browsers.
Some browser bugs can be overcome by using some simple tricks in the CSS, because some browsers ignore and some interpret some special constructs.

What I wrote before about some browsers not being able to center objects is wrong. The problem was that the tag "align" is actually invalid in XHTML code, and replaced by the CSS code "margin:auto". Using this, centering also looks the same in IE7 and FF7 (and probably Opera).

In order to make sure that different browsers display the same thing, you should used HTML1.0 Strict, which means that you will not be able to make a proper website without putting ALL the formatting into CSS files, and very close to none in the HTML (Tags like <p></p>, <br /> etc. are still accepted). Additionally there are simple things you simply can't do without using a little JavaScript -- which means that clients that switch off JavaScript will make otherwise compliant websites more or less useless.

Constructs like <center> or <div align="center"> are ignored in a standard-compliant browser when XHTML is used. This made me believe that IE7 was OK and FF3 was not. The fact is the other way around, because these constructs are not even defined in XHTML.

I recommend warmly the book "CSS, The missing Manual" by David Sawyer McFarland. This book opened my eyes in many ways, and has made it much easier for me to control the output from my web scripts.

I also recommend for anyone writing web scripts to check them using the W3C validator. The error descriptions can be hard to understand in the beginning, but it's a GREAT help to make sure that your websites are compliant and WILL look the same with different browsers.

[inge]

Would you take Euros?

Anything except Icelandic Kronor! :D