Perfect in Chrome/FF, ugly as sin in IE6. Any takers?

HTML & CSS
1

Hi,

The following snippet of code works perfectly in most modern browsers


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
<style type="text/css">* {margin:0;padding:0}</style>
  </head>
  <body>
    <div id="footer" style="background:#999;width:960px"> 
     
    <img src="/images/image.png" style="float:left;width:150px;height:189px;margin-left:20px" alt="" /> 
      
      <ul style="float:left;height:20px;list-style-type:none;">  
        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>

        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>

        <li style="float:left"><a href="/" title="View our Opening Times">Opening Times</a></li>
      </ul>
    
     <br /> 
    <p style="float:left;color:#fff;margin-top:80px;left:0">"this is a quote"</p> 
     
    </div>
  </body>
</html>

However, in IE6, it looks horrific.

Is there anything obvious I should be looking to change to fix it in IE6.

Many thanks for any pointers at all.

2

Hmm, I actually just tried it in: http://ipinfo.info/netrenderer/index.php and it looks not bad.

I may be back…

3

Hi,

You are using a doctype which triggers quirks mode in IE and all version will be broken. Use a full doctype as follows.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
#footer {
    background:#999;
    width:960px;
    overflow:hidden;/*clear:floats - if you need visible overflow use another clearing mechanism */
}
p.imgleft {
    float:left;
    width:150px;
    height:189px;
    margin-left:20px;
    display:inline;/* double margin bugfix*/
    background:red/* for testing */
}
#footer ul {
    overflow:hidden;/* clear floats*/
    height:20px;
    list-style-type:none;
    line-height:20px;
}
#footer li {
    float:left
}
p.quote {
    float:left;
    color:#fff;
    margin-top:80px;
}
</style>
</head>
<body>
<div id="footer">
    <p class="imgleft"><img src="/images/image.png" alt=""></p>
    <ul>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
        <li><a href="/" title="View our Opening Times">Opening Times</a></li>
    </ul>
    <p class="quote">"this is a quote"</p>
</div>
</body>
</html>

I’ve no idea what it was supposed to look like but the above renders consistently :slight_smile: