SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE/Mozilla alignment problem..

    As I said in another thread, I'm currently playing with learning page layouts using css.

    This is my current test page, and I can get most of it to work as I want, except that IE seems to render the 2 side bars 2 pixels too far out towards the edges of the browser.



    Here is the HTML:

    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" xml:lang="en" lang="en">
    
      <head>
        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
        <title>Stylesheet Testing</title>
        <link href="tprhstyle.css" rel="stylesheet" type="text/css" />
      </head>
      
      <body>
     
        <div id="hdr">
          <h1>This is the header</h1>
        </div>
    
        <div id="colLeft">
          <p>This text should appear in the left column</p>
        </div>
    
        <div id="colRight">
          <p><a href="#">Some link</a></p>
          <p>This text should appear in the right column.</p>
        </div>
    
        <div id="colCentre">
          <p>This random gibberish should appear in the center....*snip*</p>
        </div>
      
    </html>
    And here is the stylesheet:

    Code:
    html {
      border-bottom: none;
      border-left: none;
      border-right: none; 
      border-top: 16px solid #369;
    }  
    
    body { 
      margin-top: 16px;
      margin-left: 8px;
      margin-right: 8px;
    }
    
    body, div, th, td, form, p, li, ul, ol {
      font-family: Verdana, Arial, sans-serif;
      font-size: 12px;
    }
    
    p { margin:0 0 0 0; }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: "Trebuchet MS", Arial, sans-serif;
      text-transform: uppercase;
    }
    
    h1 {
      font-size: 140%;
      padding-top: 1px;
      padding-bottom: 1px;
      margin:0 0 0 0;
    }
    
    h2 { font-size: 130%; }
    
    h3 { font-size: 110%; }
    
    h4 { font-size: 100%; }
    
    a { color: #336699; }
    
    a:hover {
      border-bottom: 1px dashed red;
      color: red;
      text-decoration: none;
    }
    
    #hdr {
      background-color:#eee;
      position:relative;
      bottom:8px;
      border:1px dashed #ccc;
      padding: 5px;
      }
    
    #colLeft {
      background-color:#eee;
      position:absolute;
      width:140px;
      margin-left:8px;
      left:0px;
      right:auto;
      border:1px dashed #ccc;
      padding: 5px;
    }
    
    #colRight {
      background-color:#eee;
      position:absolute;
      width:140px;
      margin-right:8px;
      right:0px;
      left:auto;
      border:1px dashed #ccc;
      padding: 5px;
    }
    
    #colCentre {
      background-color:#eee;
      position:relative;
      margin-right:160px;
      margin-left:160px;
      border:1px dashed #ccc;
      padding: 5px;
    }

  2. #2
    SitePoint Wizard Mincer's Avatar
    Join Date
    Mar 2001
    Location
    London | UK
    Posts
    1,140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I found a solution:

    Code:
    body { 
      margin-top: 16px;
      margin-left: 8px;
      margin-right: 8px;
    }
    Not sure if that's a good way of doing it or not?


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
  •