hacked at the box model!

**jpschwartz** · Feb 10, 2004, 20:31

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>

</style>
</head>
<body>
<div id="left">
<div id="leftcontent">
<p><a href="#">Link</a></p>
</div>
</div>
</body>
</html>

**vgarcia** · Feb 10, 2004, 20:43

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

**jpschwartz** · Feb 10, 2004, 22:09

Thanks! That does the trick!

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:

**jpschwartz** · Feb 11, 2004, 10:20

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

**Paul O'B** · Feb 11, 2004, 10:32

Try this:

Code:

#leftcontent p a {height:22px;}

Paul

**jpschwartz** · Feb 11, 2004, 10:50

Yep, that does it! MANY thanks!!

Originally Posted by Paul O'B

Try this:

Code:

#leftcontent p a {height:22px;}

Paul

The SitePoint Forums have moved.

User Tag List

Thread: hacked at the box model!

Thread Tools

Display

hacked at the box model!

Bookmarks

Bookmarks

Posting Permissions