Browser Compliance

This page shows what a CSS2 encoded page looks like on different browsers on different operating systems. The screenshots were taken of http://garyblue.port5.com/webdev/3col-modern.html

The following OS's and browsers were used...

Windows XP - MSIE 6.0.29, Opera 7.54, Firefox 1, Netscape Navigator 7.2, WebTV Viewer
Mac OSX - MSIE 5.2, Netscape Navigator 7.2 and Safari 1.0.3
FC5 Linux - Konqueror 3.4.1, Firefox 1.0.4 and Epiphany 1.7.1

Linux Epiphany, Linux FireFox, Windows FireFox, Windows Netscape

Linux Konqeror
Notice the difference in colour to the image above. The difference is due to the opacity property.

Mac MSIE

Mac Netscape, Windows Opera

Mac Safari - notice the misalignment on the right

Windows MSIE

Windows WebTV Viewer

The Code...

Gary Turner's test page has the following code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="generator"
content="HTML Tidy for Windows (vers 1st February 2003), see www.w3.org" />
<meta name="editor" content="Emacs 21" />
<meta name="author" content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=us-ascii" />

<title>Three column</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
margin: 0;
padding: 0;
}

body {
background-color: #888;
color: black;
}

p {
font-size: 1em;
margin: 1em 10px;
}

h1, h2, h3 {
text-align: center;
}

#wrapper {
width: 90%;
margin: 1em auto;
max-width: 60em;
border: 1px solid black;
background-color: #88f;
}

#main { opacity: .8;
display: table;
margin: 0 10px;
border: 1px solid black;
border-spacing: 10px;
background-color: #8f8;
}

#col1, #col2, #col3 {
display: table-cell;
border: 1px solid black;
}

#col1 {
width: 20%;
background-color: #8ff;
}

#col2 {
background-color: #f88;
}

#col3 {
width: 20%;
background-color: #f8f;
}

.box {
margin: 1em 10px;
border: 1px solid black;
background-color: #fff;
-moz-border-radius: 10px;
}

/*]]>*/
</style>
</head>

<body>
<div id="wrapper">
<h1>Generic Banner Logo</h1>

<div id="main">
<div id="col1">
<h2>Menu</h2>

<ul>
<li>menu item</li>

<li>menu item</li>

<li>menu item</li>

<li>menu item</li>
</ul>
</div><!-- end col1 -->

<div id="col2">
<h2>Main Content</h2>

<h3>Part 1</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris accumsan, magna vel feugiat rhoncus, ligula pede
pulvinar urna, eu fermentum nunc magna sed purus. Maecenas nec
sapien. Etiam a diam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</p>

<h3>Part 2</h3>

<p>In sit amet ante in pede consectetuer congue. Maecenas quam.
Nam ac velit. Vivamus lorem orci, convallis sit amet, porta
sed, cursus in, tortor. Nulla facilisi. Maecenas malesuada,
sapien eu vehicula ultrices, nisl dolor sagittis orci, in
varius nulla libero at magna. Fusce a sapien at pede nonummy
scelerisque. Suspendisse wisi pede, bibendum quis, adipiscing
quis, sollicitudin non, eros.</p>
</div><!-- end col2 -->

<div id="col3">
<h2>News items</h2>

<div class="box">
<p>some bit of gossip</p>
</div>
</div><!-- end col3 -->
</div><!-- end main -->

<p>&copy;2005</p>
</div><!-- end wrapper -->
</body>
</html>

This page created 29th June 2005, last modified 3rd July 2005


GoStats stats counter