opensas opensas - 6 months ago 56
HTML Question

css - get rid of spaces between spans

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 length (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, spacing, and border, with no luck...

-- 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...

Answer

Get rid of the newlines between the spans. Example:

<div class='tab'>
  <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span>
</div>

Newlines are counted as a space in HTML.

Comments