Forum Moderators: not2easy
These three columns align just fine in both Firefox and IE6, but IE6 puts a big margin on the right side of the last column.
I have tried all kinds of fixes, from setting div widths to changing position to relative to setting the html layout, setting word-wrap to break-word and setting line-height to 1.1. Nothing seems to work. (I have been making these setting changes on the column style, except the width, which I've tried doing on the outermost div style.)
Can anyone help me get rid of this unsightly right margin that IE6 is putting in? Most of our users use IE6, as buggy as it is.
The code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.section_focus_box{
height:300px;
/*width:500px;*/
background-color:#666666;
clear: left;/* new attribute, to force focus box left in firefox */
float:left;
/*border-top:1px solid #666666;*/
/*border-right:1px solid #666666;*/
/*border-left:1px solid #666666;*/
}
.section_focus_box_card{
/*width:490px;
height:290px;
background-color: green;*/
/*overflow:hidden;*/
margin-top:5px;
margin-left:5px;
padding:0;
/*padding-left:5px;
padding-top:5px;
padding-right:0;*/
/*margin-top:5px;
float:left;*/
}
.section_focus_1column{
/*width:160px;
float:left;
background-color:white;
height:290px;
margin-right:5px; orig specs*/
margin-right:5px;
padding:0;
width:160px;
float:left;
background-color:white;
height:290px;
}
</style>
<title>Tab Box</title>
</head>
<body>
<div class="section_focus_box" id="section_focus_box">
<div class="section_focus_box_card" id="artsliving_focus_card">
<div class="section_focus_1column">
</div><!--end 1column-->
<div class="section_focus_1column">
</div><!--end 1column-->
<div class="section_focus_1column">
</div><!--end 1column-->
</div><!--end a&e focus_box_card-->
</div> <!--end section_focus_box-->
</body>
</html>
I tried adding margin-right:-5px; to the box_card. That worked great for the first card, but I have five cards (JavaScripot makes them appear when you click the tabs). The other cards are jogged over -5px.
