Forum Moderators: not2easy
I don't understand why IE is doing this.
I know I can fix this by forcing a width value on my tab. But I don't want to because the textual content of the tabs can change.
I also know that using images will do the trick. But I prefer the 4 <div> solution since I can modify the colors of the tabs border and background using css.
Here is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.top1, .top2, .top3, .top4 {display : block; overflow : hidden; height : 1px;}
.top1 {background : black; margin : 0px 5px; }
.top2 {border-right : black 2px solid; border-left : black 2px solid; margin : 0px 3px;}
.top3 {border-right : black 1px solid; border-left : black 1px solid; margin : 0px 2px;}
.top4 {height : 2px; border-right : black 1px solid; border-left : black 1px solid; margin : 0px 1px;}
.tabbar {display : block; height : 25px; padding : 2px 0 2px 5px; list-style-type : none;}
.tabtop {display:inline; background : transparent;}
.tabbottom {padding: 0px 5px 5px 5px; border-right : black 1px solid;
border-bottom : black 1px solid; border-left : black 1px solid;}
.tabcontent {padding: 0px 5px 5px 5px; border-top : black 1px solid; border-right : black 1px solid;
border-bottom : black 1px solid; border-left : black 1px solid;}
.tabbar li { display : block; float : left; margin: 0 3px 3px 3px;}
-->
</style>
</head>
<body>
<title1>Without round corners</title1>
<ul class="tabbar">
<div style="clear: both"></div>
<li>
<div class="tabcontent">
<a href="#" onclick="java script:alert('This is Tab A');">Tab A</a>
</div>
</li>
<li>
<div class="tabcontent">
<a href="#" onclick="java script:alert('This is Tab B');">Tab B</a>
</div>
</li>
<div style="clear: both"></div>
</ul>
<title1>With round corners</title1>
<ul class="tabbar">
<div style="clear: both"></div>
<li>
<div class="tabtop">
<div class="top1"></div>
<div class="top2"></div>
<div class="top3"></div>
<div class="top4"></div>
</div>
<div class="tabbottom">
<a href="#" onclick="java script:alert('This is Tab A');">Tab A</a>
</div>
</li>
<li>
<div class="tabtop">
<div class="top1"></div>
<div class="top2"></div>
<div class="top3"></div>
<div class="top4"></div>
</div>
<div class="tabbottom">
<a href="#" onclick="java script:alert('This is Tab B');">Tab B</a>
</div>
</li>
<div style="clear: both"></div>
</ul>
</body>
</html>
display: inline-block;
Instead of using horz. <div> to generate round corner. I simply use vertical <div>.
But:
- we must specify the height of the <li> tag
- we must set the height of the first and last <div> to the original heigh - 5px.
Thanx to those who replied earlier.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.sid1, .sid2, .sid3, .sid4 {float : left; display : block; overflow : hidden;}
.sid1 {margin : 5px 0 0 0 ; width : 1px ; background : black; height : 25px;}
.sid2 {margin : 3px 0 0 0 ; width : 1px ; border-top : black 2px solid ; }
.sid3 {margin : 2px 0 0 0 ; width : 1px ; border-top : black 1px solid ; }
.sid4 {margin : 1px 0 0 0 ; width : 2px ; border-top : black 1px solid ; }
.mid {border-top : black 1px solid; float : left; display : block; padding : 3px 0 0 0 ; font-size: 16px}
.tabbar li { display : block; float: left; height : 30px; border-bottom : black 1px solid; margin : 0 5px 0 5px}
-->
</style>
</head>
<body>
<ul class="tabbar">
<li>
<div class="sid1"> </div>
<div class="sid2"></div>
<div class="sid3"></div>
<div class="sid4"></div>
<div class="mid">
<a href="#" onclick="java script:alert('This is Tab A');"><nobr>Tab A</nobr></a>
</div>
<div class="sid4"></div>
<div class="sid3"></div>
<div class="sid2"></div>
<div class="sid1"> </div>
</li>
<li>
<div class="sid1"> </div>
<div class="sid2"></div>
<div class="sid3"></div>
<div class="sid4"></div>
<div class="mid">
<a href="#" onclick="java script:alert('This is Tab B');"><nobr>Tab B</nobr></a>
</div>
<div class="sid4"></div>
<div class="sid3"></div>
<div class="sid2"></div>
<div class="sid1"> </div>
</li>
</ul>
</body>
</html>
