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

Home New Posts Topics Members FAQ

home > topics > html / css > questions > validation not good enough for ie

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

PHP
Recommendations for PHP Form Validation Script
17 posts views Thread by Phil Powell | last post: by
post-schema/application validation
2 posts views Thread by wumingshi | last post: by
How important is validation?
67 posts views Thread by Scott Meyers | last post: by
3 questions on validation
41 posts views Thread by Gérard Talbot | last post: by
Strange problem with validation
2 posts views Thread by Marius Traelnes | last post: by
Why has my validation stopped working? [1/1]
4 posts views Thread by Alan Silver | last post: by
New bulk HTML validation service available
10 posts views Thread by NikitaTheSpider@gmail.com | last post: by
PHP
Best approach for server side Form Validation ?
7 posts views Thread by h7qvnk7q001@sneakemail.com | last post: by
BYTES.COM © 2021
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap
HTML / CSS Answers Sitemap
HTML / CSS Insights Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.