SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: hacked at the box model!
-
Feb 10, 2004, 20:31 #1
- 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>
-
Feb 10, 2004, 20:43 #2
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; }
-
Feb 10, 2004, 22:09 #3
- Join Date
- Jul 2003
- Location
- Topeka
- Posts
- 77
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks! That does the trick!
Originally Posted by vgarcia
-
Feb 11, 2004, 10:20 #4
- 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
-
Feb 11, 2004, 10:32 #5
- 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;}
-
Feb 11, 2004, 10:50 #6
- Join Date
- Jul 2003
- Location
- Topeka
- Posts
- 77
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yep, that does it! MANY thanks!!
Originally Posted by Paul O'B
Bookmarks