SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: IE/Mozilla alignment problem..
-
Oct 16, 2002, 06:57 #1
- 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>
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; }
-
Oct 16, 2002, 06:59 #2
- 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; }
Bookmarks