SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please Help: Padding Issue with Netscape

    I set a <div> that contains my main content to

    padding-left: 100px

    and gave it a white background and a width set to 500 pixels. This div is flush under the header. The entire page has a grey background color, so the content area has to align with the header. Basic stuff.

    In IE everything lines up. But when I add the padding for the div, Netscape moves the entire box to the right. It's as if it's adding the width pixels ontop of the padding pixels. In IE it doesn't do this. I have tried playing with the margins and even border-left.

    Any suggestions?

    Thanks

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Do you have a link, or source code to share with us?

  3. #3
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please view in IE6 and Netscape 7. The two headers line up in IE but because of padding Netscaping is not ligning up.

    To demonstrate what Netscape is doing I added a header in red.

    Please note that the 4 pixels for padding-left are pushing the white block beyond the header. This is the same problem I had earlier. With Netscape it is messing up the design of the site because the white area is the main content area. Any thoughts?

    If I can't get one setting to work, is there a way to use the div name in javascript and assign different padding-lefts?

    Thanks so much for any help

    ------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .header {
    width: 700px;
    background-color: red;
    }

    .main {
    padding : 4px 4px 4px 4px;
    width: 700px;
    background-color: #ffffff
    }

    </style>
    </head>

    <body bgcolor="#999999">
    <div class="header">Header</div>
    <div class="main">
    test
    </div>
    </body>
    </html>

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Read this page to find out what your problem is.

    This is a case of IE messing up, not the other browsers. Basically, IE puts padding, borders, and margins IN the "box" div, while the w3c recommends that those measures be ADDED to the width of the div (which is what Netscape, Mozilla, Opera, etc. do). Follow Tantek's hack in the link above and you'll see that it will work.

  5. #5
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Won't work locally!

    I found the web page describing the problem with IE putting padding on the inside and thus making compatibility with Netscape impossible. I tried the hack. And while it certainly works in my IE 6 browser after being served from the webserver, when I download the .css and the .html code and copy them

    http://www.tantek.com/CSS/Examples/boxmodelhack.html

    to an .html file on my local drive the boxes do not line up. The only difference from the web page generated on my local machine and the web page served from the web server is the original line of code

    <style type="text/css" media="all">@import "boxmodelhack.css";</style> in

    http://www.tantek.com/CSS/Examples/boxmodelhack.html

    I changed it so that the classes are in the header of the .html file.

    Can you explain why it is not working. Or, just take a look at the code below and suggest how I can make the red header in .header line up with the white box in .main in both Netscape and IE

    Thanks for the help.

    ----------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .header {
    width: 700px;
    background-color: red;
    }

    .main {
    padding : 4px 4px 4px 4px;
    width: 700px;
    background-color: #ffffff
    }

    </style>
    </head>

    <body bgcolor="#999999">
    <div class="header">Header</div>
    <div class="main">
    test
    </div>
    </body>
    </html>


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
  •