[thelist] Display is almost Perfect Between Firefox and IE (resend)
Anthony Baratta
anthony at baratta.com
Wed Apr 19 17:14:48 CDT 2006
(sorry fat fingers and sent too early)
Howdy...
I'm trying to re-create a set of navigation tabs using divs instead of tables. I have it 99% there, but have one specific issue that is driving me nuts.
* I can't figure out a way to make a "containing div" (e.g. class: MainTabDiv and SubTabDiv) partially lose it's bottom margin.
Basically I want this:
_______| text |__________
in Firefox, I have it working because I can force the contained div to "bleed over" the container div, wiping out the border just for that area. In IE, I guess you can't manipulate the contained divs in this fashion. ;-(
Here is some demo code, I'm behind a firewall at the moment and will post a complete example of the code outlined partially below when I get home. With this code you will not see the "protruding tab" or the fake drop shadows because you won't have the images.
I'm so close I can taste it. Any ideas on how to make IE/CSS work with this requirement?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
Body
{
font-size: 12px;
margin: 0px;
font-family: arial;
background-color: white
}
.MainTabDiv
{
background: #336699 url('./imgWhiteBar.jpg') repeat-x scroll top;
width: 100%;
height: 25px;
padding: 0px;
padding-top: 10px;
border-bottom: 1px solid #000000;
}
.MainTab
{
float: left;
padding: 0px;
padding-left: 15px;
padding-right: 15px;
width: auto;
line-height: 25px;
color: #444555;
text-decoration: none;
font-weight: bold;
border: 0px solid #000000;
}
A.MainTabLink, A.MainTabLink:active, A.MainTabLink:visited
{
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
A.MainTabLink:hover
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
.MainTabActive
{
float: left;
padding: 0px;
padding-left: 15px;
padding-right: 15px;
width: auto;
line-height: 30px;
background: #EDE9E1;
color: #00000;
text-decoration: none;
font-weight: bold;
margin-top: -5px;
border: 1px solid #000000;
border-bottom: 0px;
}
A.MainTabActiveLink, A.MainTabActiveLink:active, A.MainTabActiveLink:visited
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
A.MainTabActiveLink:hover
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
.MainTabDivider
{
float: left;
background: #FFFFFF;
width: 1px;
height: 15px;
line-height: 1px;
font-size: 1px;
margin: 5px;
}
.MainTabActiveDivider
{
float: left;
background: #336699 url('./imgActiveBar-Blue.jpg') no-repeat scroll top;
width: 4px;
height: 25px;
line-height: 1px;
font-size: 1px;
margin: 0px;
padding: 0px;
}
.SubTabDiv
{
background: #EDE9E1 url('./imgTanBar.jpg') repeat-x scroll top;
width: 100%;
overflow: visible;
height: 20px;
padding: 0px;
padding-top: 8px;
border-bottom: 1px solid #000000;
}
.SubTab
{
float: left;
padding: 0px;
padding-left: 15px;
padding-right: 15px;
width: auto;
line-height: 20px;
color: #444555;
text-decoration: none;
font-weight: bold;
}
A.SubTabLink, A.SubTabLink:active, A.SubTabLink:visited
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
A.SubTabLink:hover
{
color: #444555;
text-decoration: none;
font-weight: bold;
}
.SubTabActive
{
float: left;
padding: 0px;
padding-left: 15px;
padding-right: 15px;
width: auto;
line-height: 25px;
background: #FFFFFF;
color: #00000;
text-decoration: none;
margin-bottom: -1px;
margin-top: -5px;
border: 1px solid #000000;
border-bottom: 0px;
}
A.SubTabActiveLink, A.SubTabActiveLink:active, A.SubTabActiveLink:visited
{
color: #000000;
text-decoration: none;
}
A.SubTabActiveLink:hover
{
color: #000000;
text-decoration: none;
}
.SubTabDivider
{
float: left;
background: #000000;
width: 1px;
height: 10px;
line-height: 1px;
font-size: 1px;
margin: 5px;
}
.SubTabActiveDivider
{
float: left;
background: #EDE9E1 url("./imgActiveBar-Tan.jpg") no-repeat scroll left;
width: 4px;
height: 20px;
line-height: 1px;
font-size: 1px;
margin: 0px;
padding: 0px;
}
</style>
<body>
<br><br>
<div id="MainTabRow1" name="MainTabRow1" runat="server" class="MainTabDiv">
<div id="_One" name="_One" runat="server" class="MainTabActive"><a class="MainTabActiveLink" href="">About</a></div>
<div class="MainTabActiveDivider"> </div>
<div id="_Two" name="_Two" runat="server" class="MainTab"><a class="MainTabLink" href="">My Projects</a></div>
<div class="MainTabDivider"> </div>
<div id="_Three" name="_Three" runat="server" class="MainTab"><a class="MainTabLink" href="">Project Information</a></div>
<div class="MainTabDivider"> </div>
<div id="_Four" name="_Four" runat="server" class="MainTab"><a class="MainTabLink" href="">Briefs & Approvals</a></div>
<div class="MainTabDivider"> </div>
<div id="_Five" name="_Five" runat="server" class="MainTab"><a class="MainTabLink" href="">Impact Assessment</a></div>
<div class="MainTabDivider"> </div>
<div id="_Six" name="_Six" runat="server" class="MainTab">Reports</div>
<div class="MainTabDivider"> </div>
</div>
<div id="SubTabRow1" name="SubTabRow1" runat="server" class="SubTabDiv">
<div id="_SubOne" name="_One" runat="server" class="SubTabActive"><a class="SubTabActiveLink" href="">Summary Information</a></div>
<div class="SubTabActiveDivider"> </div>
<div id="_SubTwo" name="_Two" runat="server" class="SubTab"><a class="SubTabLink" href="">Project Categorization</a></div>
<div class="SubTabDivider"> </div>
<div id="_SubThree" name="_Three" runat="server" class="SubTab"><a class="SubTabLink" href="">Functional Checklist</a></div>
<div class="SubTabDivider"> </div>
</div>
<br><br><br>
<div id="MainTabRow2" name="MainTabRow2" runat="server" class="MainTabDiv">
<div id="_One2" name="_One2" runat="server" class="MainTab"><a class="MainTabLink" href="">About</a></div>
<div class="MainTabDivider"> </div>
<div id="_Two2" name="_Two2" runat="server" class="MainTab"><a class="MainTabLink" href="">My Projects</a></div>
<div class="MainTabDivider"> </div>
<div id="_Three2" name="_Three2" runat="server" class="MainTab"><a class="MainTabLink" href="">Project Information</a></div>
<div id="_Four2" name="_Four2" runat="server" class="MainTabActive"><a class="MainTabActiveLink" href="">Briefs & Approvals</a></div>
<div class="MainTabActiveDivider"> </div>
<div id="_Five2" name="_Five2" runat="server" class="MainTab"><a class="MainTabLink" href="">Impact Assessment</a></div>
<div class="MainTabDivider"> </div>
<div id="_Six2" name="_Six2" runat="server" class="MainTab">Reports</div>
<div class="MainTabDivider"> </div>
</div>
<div id="SubTabRow2" name="SubTabRow2" runat="server" class="SubTabDiv">
<div id="_SubOne2" name="_SubOne2" runat="server" class="SubTab"><a class="SubTabLink" href="">Summary Information</a></div>
<div id="_SubTwo2" name="_SubTwo2" runat="server" class="SubTabActive"><a class="SubTabActiveLink" href="">Project Categorization</a></div>
<div class="SubTabActiveDivider"> </div>
<div id="_SubThree2" name="_SubThree2" runat="server" class="SubTab"><a class="SubTabLink" href="">Functional Checklist</a></div>
<div class="SubTabDivider"> </div>
</div>
</body>
</html>
More information about the thelist
mailing list