patricklachance
-
Posts
2 -
Joined
-
Last visited
patricklachance's Achievements
Newbie (1/7)
0
Reputation
-
I've found the solution !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. 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>
-
I'm trying to develop a simple way to display tabs with <ul><li> and <div>.I use float:left on my <li> items to display the tabs horizontally.Then I add 4 <div> elements with special border/margin values to give an effect of round corners on the top of my tabs. With Firefox it works, but with IE, tab width expand to the browser limits. 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: [size=3][font="Courier New"]<!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>[color="#009900"][b] <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>[/b][/color] [color="#CC0000"][b] <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>[/b][/color]</body></html>[/font][/size]