Forum Moderators: not2easy
HTML Code....
<div id="sub_header">
<div id="updated">Last Updated: 1/13/2009</div>
<div class="article_options">
<ul>
<li><a href="" id="share_article">Share</a></li>
<li><a href="" id="email_article">Email</a></li>
<li><a href="" id="print_article">Print</a></li>
</ul>
</div>
</div>
CSS Code....
div#sub_header {
width: 100%;
height: 22px;
padding: 0;
margin: 5px 0 5px 0;
border-bottom: 1px solid #dbdbdb;
}
div#updated {
float: left;
width: 40%;
line-height: 25px;
height: 25px;
font-size: 12px;
font-style: italic;
min-width: 200px;
display: inline;
margin: 5px 0 5px 0;
position: relative;
}
.article_options {
float: left;
width: 56%;
line-height: 25px;
height: 25px;
text-align: right;
font-size: 13px;
font-style: italic;
display: inline;
min-width: 200px;
margin: 5px 0 5px 0;
position: relative;
}
.article_options ul {
padding: 0;
margin: 0;
overflow: hidden;
}
.article_options li {
margin: 0;
float: right;
line-height: 20px;
position: relative;
margin: auto;
padding-left: 15px;
list-style-type: none;
}
.article_options #print_article {
background:url(http://www.example.com/images/print.gif) 0 50% no-repeat;
}
.article_options #email_article {
background:url(http://www.example.com/images/email.gif) 0 50% no-repeat;
}
.article_options #share_article {
background:url(http://www.example.com/images/share.gif) 0 50% no-repeat;
}
.article_options a {
padding-left: 20px;
height: 20px;
display: inline;
line-height: 20px;
text-decoration: none;
}
I need the bottom line to show for the sub_header DIV
Anyhow, I've tried testing it using the Multiple IE's program from TredoSoft and I can't see the bottom border. Not sure if IE6 is different in the Multiple IE's environment or not.
I used your code above when I looked.
I still can't spend much time on this but I have noticed that your outter div's height is smaller than the content inside of it. Combine this with a number of situations when problems only arise because of the way IE6 handles heights, paddings and margins you might find one of these is the problem.
In situations like this I would set ALL margins and paddings to zero and work forward. Because I can see it but you can't the problem is hard to work out. Maybe add overflow:visible or position:relative to see if your version is hidden behind something.
If IE6 is in quirks mode it will act significantly different from when it is not.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Nothing in front of it -
What is IE6 quirks mode, I'm not familiar with that.
