SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast jpschwartz's Avatar
    Join Date
    Jul 2003
    Location
    Topeka
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hacked at the box model!

    I'm trying to use the box-in-a-box approach to controlling padding and borders across browsers that use different box models. The following code yields an inner box that bulges outside (widthwise) of its outer box in Netscape 6.1 for Windows and Safari 1.2 for Mac, but stays inside the outer box in IE 6.0 for Windows and IE 5.2 for Mac. How do I get the inner box to stay inside a fixed-width outer box?

    -Jim

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>box model question</title>
    <style>
    <!--
    body {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    }

    #left {
    position: absolute;
    top: 95px;
    left: 0;
    width: 124px;
    height: 200px;
    background-color: red;
    }

    #leftcontent p a {
    padding: 0px 0px 0px 7px;
    font-size: 1em;
    text-decoration: none;
    font-weight: bold;
    color: #00337F;
    display: block;
    width: 100%;
    line-height: 22px;
    border: 1px solid #000000;
    background-color:#CCCCCC;
    }
    -->
    </style>
    </head>
    <body>
    <div id="left">
    <div id="leftcontent">
    <p><a href="#">Link</a></p>
    </div>
    </div>
    </body>
    </html>

  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)
    In #leftcontent p a, you're assigning a width of 100% plus 7px left padding. IE will render in quirks mode with that DOCTYPE, but Mozilla and Safari aren't in this case. To fix that, try this CSS instead:
    Code:
     body {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    }
    
    #left {
    position: absolute;
    top: 95px;
    left: 0;
    width: 124px;
    height: 200px;
    background-color: red;
    }
    
    #leftcontent p {
      width: 100%;
      /*moved from the #leftcontent p a rule*/
    }
    
    #leftcontent p a {
    padding: 0px 0px 0px 7px;
    font-size: 1em;
    text-decoration: none;
    font-weight: bold;
    color: #00337F;
    display: block;
    /*width removed.*/
    line-height: 22px;
    border: 1px solid #000000;
    background-color:#CCCCCC;
    }

  3. #3
    SitePoint Enthusiast jpschwartz's Avatar
    Join Date
    Jul 2003
    Location
    Topeka
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That does the trick!

    Quote Originally Posted by vgarcia
    In #leftcontent p a, you're assigning a width of 100% plus 7px left padding. IE will render in quirks mode with that DOCTYPE, but Mozilla and Safari aren't in this case. To fix that, try this CSS instead:

  4. #4
    SitePoint Enthusiast jpschwartz's Avatar
    Join Date
    Jul 2003
    Location
    Topeka
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A problem, though: the inner box no longer is the link; just the text in it. So the user has to position the cursor over the text to access the link. Any help?

    Jim

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Try this:
    Code:
    #leftcontent p a {height:22px;}
    Paul

  6. #6
    SitePoint Enthusiast jpschwartz's Avatar
    Join Date
    Jul 2003
    Location
    Topeka
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, that does it! MANY thanks!!

    Quote Originally Posted by Paul O'B
    Try this:
    Code:
    #leftcontent p a {height:22px;}
    Paul


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
  •