SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Hi,

    The following snippet of code works perfectly in most modern browsers

    HTML Code:
    <!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. #2
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I actually just tried it in: http://ipinfo.info/netrenderer/index.php and it looks not bad.

    I may be back......

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <!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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •