I'm trying to emulate a tab bar with html
I'd like the width of each tab to be set according to the
text lenght (that is, no fixed width) and to word wrap in case it exceeds the screen width
I've almost achieved it
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
but, there's a very annoying space between the opening tab image and the closing one...
as you can see I've tried with padding, spacin, and border, with no luck...
any idea?
thanks a lot
saludos
sas
-- edit
I tried replacing the spans with a small table (one row, three TDs) but it's the same, only the space between is smaller...
