patricklachance Posted August 3, 2006 Share Posted August 3, 2006 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] Link to comment Share on other sites More sharing options...
patricklachance Posted August 7, 2006 Author Share Posted August 7, 2006 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> Link to comment Share on other sites More sharing options...
dcole.ath.cx Posted August 7, 2006 Share Posted August 7, 2006 good for you! Solving your own problems show everyone you want to learn. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now