IE/Mozilla alignment problem..

**Mincer** · Oct 16, 2002, 06:57

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;
}

**Mincer** · Oct 16, 2002, 06:59

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?

The SitePoint Forums have moved.

User Tag List

Thread: IE/Mozilla alignment problem..

Thread Tools

Display

IE/Mozilla alignment problem..

Bookmarks

Bookmarks

Posting Permissions