Forum Moderators: not2easy
Below is my code for page <snip>
It looks great in IE7 and up. IE6 it doesn't. The boz sits above my h1 instead of floating. Please help.
* HTML DIV.center DIV.calloutBox {
FLOAT: right; MARGIN-RIGHT: 2px
}
DIV.calloutBox {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(../images/bgs/related-lastli.gif) #b6b7a2; FLOAT: right; PADDING-BOTTOM: 2px; MARGIN: 5px 5px 10px 10px; WIDTH: 190px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid;
}
DIV.calloutBox H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 10pt; PADDING-BOTTOM: 3px; MARGIN: 0px; WIDTH: 100%; COLOR: #333; PADDING-TOP: 3px; BORDER-BOTTOM: #b6b7a2 3px solid; BACKGROUND-COLOR: #dedfcd; TEXT-ALIGN: center;
}
DIV.calloutBox UL.nav LI.menucontent {
PADDING-RIGHT: 2px; PADDING-LEFT: 16px; BACKGROUND: url(../images/icons/icon_dot2_12.gif) #ebecd9 no-repeat 2px 6px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #ccc 1px solid;
}
DIV.calloutBox UL.nav DIV.menucontent {
PADDING-RIGHT: 2px; PADDING-LEFT: 16px; BACKGROUND: url(../images/icons/icon_dot2_12.gif) #ebecd9 no-repeat 2px 6px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #ccc 1px solid;
}
DIV.calloutBox UL.nav LI.menucontent {
DISPLAY: block; FONT-WEIGHT: normal; FONT-SIZE: 8.5pt; WIDTH: auto; COLOR: #000; BACKGROUND-COLOR: #ebecd9
}
DIV.calloutBox UL.nav DIV.menucontent {
DISPLAY: block; FONT-WEIGHT: normal; FONT-SIZE: 8.5pt; WIDTH: auto; COLOR: #000; BACKGROUND-COLOR: #ebecd9
}
DIV.calloutBox UL.nav A.menulink {
DISPLAY: block; FONT-WEIGHT: normal; FONT-SIZE: 8.5pt; WIDTH: auto; COLOR: #000; BACKGROUND-COLOR: #ebecd9
}</style><div class="calloutBox" id="cb_27"><h2>specifics</h2>
<ul class="nav">
<li class="menucontent"><a class="menulink" title="specifics" href="#">specifics</a></li>
<li class="menucontent"><a class="menulink" title="specifics" href="#">specifics</a></li>
<li class="menucontent"><a class="menulink" title="specifics" href="#">specifics</a></li>
<li class="menucontent"><a class="menulink" title="specifics" href="#">specifics</a></li>
<li class="menucontent"><a class="menulink" title="specifics" href="#">specifics</a></li>
</ul>
</div>
[edited by: swa66 at 2:04 pm (utc) on Dec. 7, 2009]
[edit reason] specifics and link removed, please see ToS and Forum Charter [/edit]
* HTML DIV.center DIV.calloutBox {
FLOAT: right; MARGIN-RIGHT: 2px
}
Try removing it.
Second thing I do is simplify. I've converted everything to lower case, don't know if it applies to CSS or not but lower case is required in attributes to validate XHTML, I just follow style . . .
Last thing, of course, validate [validator.w3.org]. All this will help.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
h1 {
float:left;
width: 75%;
text-align: center;
border: 1px solid #000;/* remove when done */
}
.calloutBox {
width: 190px;
float:right;
padding: 0 0 2px 0; /* top, right, bottom, left, like clock */
/* don't have your images */
/* background: url(../images/bgs/related-lastli.gif) #b6b7a2; */
background: #b6b7a2;
margin: 5px 5px 10px 10px;
/* border-bottom: #ccc 1px solid; */
border: #ccc 1px solid;
}
.calloutBox h2 {
/* width: 100%; should not be nec. */
padding: 3px 0 3px 0;
margin:0;
font-weight: bold;
text-align: center;
font-size: 10pt;
color: #333;
border-bottom: #b6b7a2 3px solid;
background: #dedfcd;
}
.calloutBox ul li {
padding: 3px 2px 3px 16px;
/* background: url(../images/icons/icon_dot2_12.gif) #ebecd9 no-repeat 2px 6px; */
border-bottom: #ccc 1px solid;
}
/* there **is** no div.menucontent? Not sure what you meant here, */
/* maybe comma sep for two selectors? not needed if only one ul */
/*DIV.calloutBox UL.nav, DIV.menucontent { */
calloutBox ul {
padding: 3px 2px 3px 16px;
/* background: url(../images/icons/icon_dot2_12.gif) #ebecd9 no-repeat 2px 6px; */
background: #ebecd9;
border-bottom: #ccc 1px solid;
}
/* li selector not needed if you apply to a */
/*.calloutBox li { } */
.calloutBox a {
display: block;
font-weight: normal;
font-size: 8.5pt;
color: #000;
/* not needed */
/*background: #ebecd9; */
}
</style>
</head>
<body>
<h1>some heading</h1>
<div class="calloutBox" id="cb_27">
<h2>specifics</h2>
<ul>
<li><a title="specifics" href="#">specifics</a></li>
<li><a title="specifics" href="#">specifics</a></li>
<li><a title="specifics" href="#">specifics</a></li>
<li><a title="specifics" href="#">specifics</a></li>
<li><a title="specifics" href="#">specifics</a></li>
</ul>
</div>
</body>
</html>
