467,162 Members | 960 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,162 developers. It's quick & easy.

Validation not good enough for IE

Hello all,

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 &copy; 2007 - 2008 Guillebeau Iron, Inc.</p>

</div>

</div>

</body>
</html>
[/HTML]


CSS Source:
Expand|Select|Wrap|Line Numbers
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /*
  5.  
  6.     CSS for http://guillebeauiron.com
  7.     Copyright 2007 Guillebeau Iron, Inc.
  8.  
  9.     Design by NULL Byte Design
  10.     URL: http://thenullbyte.org
  11.  
  12. */
  13.  
  14. body {
  15.     margin: 0;
  16.     padding: 0;
  17.     font-size: 105%;
  18.     font-family: "Lucida Grande", Veranda, sans-serif;
  19.     line-height: 1.5em;
  20.     color: #333;
  21. }
  22.  
  23. #wrap {
  24.     margin: 0 auto;
  25.     padding: 2em;
  26.     width: 50em;
  27. }
  28.  
  29. #header {
  30.     float: left;
  31.     width: 100%;
  32.     margin: 0;
  33.     padding: 0;
  34. }
  35.  
  36. #header #logo {
  37.     float: left;
  38.     width: 170px;
  39.     margin: 0;
  40.     padding: 0;
  41.     padding-bottom: 1em;
  42. }
  43.  
  44. #header p#title {
  45.     float: right;
  46.     width: 440px;
  47.     margin: 2em 15em .5em 0;
  48.     padding: .1em;
  49.     border-bottom: 1px solid #cccccc;
  50.     font-size: 80%;
  51.     color: #666;
  52.     font-style: italic;
  53. }
  54.  
  55. #header p#title span {
  56.     margin: 0;
  57.     padding: 0;
  58.     display: block;
  59.     font-weight: bold;
  60.     font-style: normal;
  61.     font-size: 180%;
  62. }
  63.  
  64. #header ul#nav {
  65.     float: left;
  66.     display: block;
  67.     margin: .2em 0 0 2em;
  68.     padding: 0;
  69. }
  70.  
  71. #header ul#nav li {
  72.     display: inline;
  73.     margin: 0;
  74.     padding: 0;
  75.  
  76. }
  77.  
  78. #header ul#nav li a {
  79.     text-decoration: none;
  80.     margin: 2px;
  81.     padding: .1em .7em .1em .7em;
  82.     border: 1px solid #000;
  83.     color: #4e4e4e;
  84. }
  85.  
  86. #header ul#nav li a:hover {
  87.     background: #ccc;
  88. }
  89.  
  90. #content {
  91.     clear: all;
  92.     float: left;
  93.     margin: 2em 2em 2em 1em;
  94.     padding: 0;
  95. }
  96.  
  97. #content h2 {
  98.     margin: 0;
  99.     padding: 0;
  100. }
  101.  
  102. #footer {
  103.     clear: all;
  104.     float: right;
  105.     margin: 0;
  106.     padding: 0;
  107.     border-top: 1px solid #999999;
  108.     text-align: right;
  109. }
  110.  
  111. #footer p{
  112.     margin: 0;
  113.     padding: .2em;
  114.     font-size: 95%;
  115.     color: #999999;
  116. }

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 ?
Jan 4 '08 #1
  • viewed: 970
Share:
3 Replies
drhowarddrfine
Expert 4TB
Validation never guarantees a page that works as you want. It only means the syntax and placement is correct.

You didn't validate your CSS. There is no such thing as 'clear: all'.
Jan 4 '08 #2
AndesHelp
As soon as I removed the "clear: all;" syntax from "style.css" the website was displayed correctly in my IE and Firefox.
Jan 4 '08 #3
As soon as I removed the "clear: all;" syntax from "style.css" the website was displayed correctly in my IE and Firefox.
yeah, i saw that right after i posted. and it did actually validate as XHTML Transitional :\
Jan 6 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

17 posts views Thread by Phil Powell | last post: by
2 posts views Thread by wumingshi | last post: by
67 posts views Thread by Scott Meyers | last post: by
41 posts views Thread by Gérard Talbot | last post: by
2 posts views Thread by Marius Traelnes | last post: by
4 posts views Thread by Alan Silver | last post: by
10 posts views Thread by NikitaTheSpider@gmail.com | last post: by
7 posts views Thread by h7qvnk7q001@sneakemail.com | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.