Enjoy unlimited access to all forum features for FREE! Optional upgrade available for extra perks.

Chrome problem

Discussion in 'Website Design' started by Reg Wharf, Dec 5, 2010.

Thread Status:
Not open for further replies.
  1. Reg Wharf United Kingdom

    Reg Wharf Active Member

    Joined:
    Jun 2009
    Posts:
    126
    Likes Received:
    3
    Hi guys,
    Using the following code:


    <!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" lang="en" xml:lang="en">
    <head>
    <title>66-2col</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css" />

    body {margin:20px;padding:0;background:#888;}

    #container {width:780px;margin:0 auto;border:10px solid green;}
    #header {height:90px;background:url(toppblu.png);}
    #nav {height:20px;background:url(toppred.png);}
    #right {width:600px;float:right;height:400px;background:#ffa;}
    #left {width:180px;float:left;height:400px;background:#fff;}
    #footer {clear:both;width:100%;height:30px;background:url(toppblu.png);}

    h1 {font: normal 26px georgia,arial,tahoma;color:#fff;}
    #header h2 {font: normal 17px arial,tahoma;color:#ffff66;}
    #right h2 {font: normal 19px arial,tahoma;color:#eb0000;}
    h3 {font: normal 18px verdana,arial,tahoma;color:#777;margin:0 0 -1.7em 0;}

    p {font: normal 11.5px verdana,arial,tahoma;color:#333;}



    .tube {margin:10px;margin-top:0;}

    #navlist
    {
    padding-left: 0;
    margin-left: 0;
    border-bottom: 0px dotted #aaa;
    width: 160px;
    }

    #navlist li
    {
    list-style: none;
    margin-left: 0px;
    padding: 0.1em 0.5em;
    border-bottom: 1px dotted #aaa;
    }

    #navlist li a {
    text-decoration:none;
    font:normal 12px arial,verdana,tahoma;color:#b22222; }
    #navlist li a:hover {color:#ffcc00;}

    </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1>Website Title</h1>
    <h2>Your website slogan goes here</h2>

    </div>

    <div id="nav">

    </div>



    <div id="right">
    <div class="tube">

    <h2>Website Title</h2>

    <p>
    Your website slogan goes here
    Your website slogan goes here

    Your website slogan goes here

    Your website slogan goes here

    Your website slogan goes here

    Your website slogan goes here

    Your website slogan goes here

    Your website slogan goes here

    Your website slogan goes here

    Your website slogan goes here
    </p>



    </div>
    </div>

    <div id="left">
    <div class="tube">

    </br>
    <center><h3>Categories</h3></center>
    </br>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">I think that</a></li>
    <li><a href="#">A written list</a></li>
    <li><a href="#">Might look just</a></li>
    <li><a href="#">A little better</a></li>
    <li><a href="#">Dont you think</a></li>
    </ul>
    </div>


    <center><h3>Categories</h3></center>
    </br>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">I think that</a></li>
    <li><a href="#">A written list</a></li>
    <li><a href="#">Might look just</a></li>
    <li><a href="#">A little better</a></li>
    <li><a href="#">Dont you think</a></li>
    </ul>
    </div>



    </div>
    </div>



    <div id="footer">

    </div>
    </div>

    </body>
    </html>

    It works fine in IE but there is a big gap above the header in Chrome.
    Any suggestions?

    I've used the universal selector * to get rid of it but then I can't select
    the background option.

    Cheers,
    Mark.
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
    IWA Meetup
     
  3. alex

    alex Active Member

    Joined:
    Sep 2007
    Posts:
    842
    Likes Received:
    47
    Not entirely sure if this will work, but try putting this at the top of the CSS to remove all browser defaults:

    HTML,BODY,TD,TR,TH,TABLE,DIV,P,FORM,H1,UL,LI,TEXTAREA,INPUT {margin:0;padding:0;}

    you may also be able to do the following, but I heard some browsers don't interpret it correctly:

    *{margin:0;padding:0;}
     
  4. Tricky1 United Kingdom

    Tricky1 Active Member

    Joined:
    Nov 2008
    Posts:
    389
    Likes Received:
    31
    This should help, haven't got Chrome on this laptop to check, but should work.

    Change : body {margin:20px;padding:0;background:#888;}

    To: body {margin:0px 20px 20px 20px; padding:0;background:#888;}

    Richard
     
  5. Reg Wharf United Kingdom

    Reg Wharf Active Member

    Joined:
    Jun 2009
    Posts:
    126
    Likes Received:
    3
    Thanks for your help guys I've got it sorted now.
    Cheers,
    Mark.
     
Thread Status:
Not open for further replies.