By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,080 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > validation not good enough for ie
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

Validation not good enough for IE

P: 5
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
Share this Question
Share on Google+
3 Replies
drhowarddrfine
Expert 5K+
P: 7,435
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
P: 9
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
P: 5
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.

Question stats

  • viewed: 925
  • replies: 3
  • date asked: Jan 4 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates