css - get rid of spaces between spans

Posted by opensas on Stack Overflow See other posts from Stack Overflow or by opensas
Published on 2010-03-25T22:33:07Z Indexed on 2010/03/25 22:43 UTC
Read the original article Hit count: 537

Filed under:

css

|

css-positioning

|

padding

|

tabs

|

html

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'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</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...

Developer IT