I'm back again with a slight issue with IE (who doesnt have an issue with it :\ ). I am developing a website for a client of mine, and they really like the look of it. Its nearly done, and I decided to XHTML validate it, and guess what: It passed !
I was fairly happy, up until i ran a test on the site through browsershots.org. There I noticed that any incarnation of Internet Explorer rendered the site horridly.. absolutely terribly awfully.
Here is a shot of what it is supposed to look like (in Firefox):
http://browsershots.org/png/original/1a/1ae717bfebb9173e6281e262775f7f15.png
and here is what im getting in IE:
http://browsershots.org/png/original/95/9530f3b865a91d66074a48faedbfafed.png
index.html Source:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Development Page</title>
</head>
<body id="home_page">
<div id="wrap">
<div id="header">
<div id="logo">
<img src="forty_clear.png" width="167" height="167" alt="Logo" />
</div>
<p id="title"><span>Guillebeau Iron Incorporated</span>"Top Quality Workmanship In Wrought Iron Fabrication And Design."</p>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>Content Title</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<h2>Content Title</h2>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer">
<p>Copyright © 2007 - 2008 Guillebeau Iron, Inc.</p>
</div>
</div>
</body>
</html>
[/HTML]
CSS Source:
Expand|Select|Wrap|Line Numbers
- @charset "utf-8";
- /* CSS Document */
- /*
- CSS for http://guillebeauiron.com
- Copyright 2007 Guillebeau Iron, Inc.
- Design by NULL Byte Design
- URL: http://thenullbyte.org
- */
- body {
- margin: 0;
- padding: 0;
- font-size: 105%;
- font-family: "Lucida Grande", Veranda, sans-serif;
- line-height: 1.5em;
- color: #333;
- }
- #wrap {
- margin: 0 auto;
- padding: 2em;
- width: 50em;
- }
- #header {
- float: left;
- width: 100%;
- margin: 0;
- padding: 0;
- }
- #header #logo {
- float: left;
- width: 170px;
- margin: 0;
- padding: 0;
- padding-bottom: 1em;
- }
- #header p#title {
- float: right;
- width: 440px;
- margin: 2em 15em .5em 0;
- padding: .1em;
- border-bottom: 1px solid #cccccc;
- font-size: 80%;
- color: #666;
- font-style: italic;
- }
- #header p#title span {
- margin: 0;
- padding: 0;
- display: block;
- font-weight: bold;
- font-style: normal;
- font-size: 180%;
- }
- #header ul#nav {
- float: left;
- display: block;
- margin: .2em 0 0 2em;
- padding: 0;
- }
- #header ul#nav li {
- display: inline;
- margin: 0;
- padding: 0;
- }
- #header ul#nav li a {
- text-decoration: none;
- margin: 2px;
- padding: .1em .7em .1em .7em;
- border: 1px solid #000;
- color: #4e4e4e;
- }
- #header ul#nav li a:hover {
- background: #ccc;
- }
- #content {
- clear: all;
- float: left;
- margin: 2em 2em 2em 1em;
- padding: 0;
- }
- #content h2 {
- margin: 0;
- padding: 0;
- }
- #footer {
- clear: all;
- float: right;
- margin: 0;
- padding: 0;
- border-top: 1px solid #999999;
- text-align: right;
- }
- #footer p{
- margin: 0;
- padding: .2em;
- font-size: 95%;
- color: #999999;
- }
If anyone could be so kind as to help me with this issue, it would be greatly appreciated.
*also, does IE5.5 - 6 not understand "margin: 0 auto;" for centering ?