Auto span width with border

HTML & CSS
1

I have a span around some text with a 2px border. I am trying to make the box expand and contract to fit the content (it is only one line) but when i do my right border disappears!

<span style=“border:2px solid C0C0C0; background-color:whitesmoke; padding:4px; margin: 0 auto”>

Any ideas?

cheer

monkey

2

Hi,

You can’t add auto margins to a span because it is an inline element and auto margins don’t apply. Also be careful with your typing as you have missed the hash from the color style and it will be ignored in standards mode…

If the span isn’t going to wrap then you can do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p.test{text-align:center;}
.test span {
    border:2px solid #c0c0c0;
    background:#f5f5f5;
    padding:4px;
    position:relative;/* ie6 border fix*/
}
</style>
</head>
<body>
<p class="test"><span >This is a test - this is a test</span></p>
</body>
</html>

Borders on inline elements tend to disappear in IE6 unless you add position:relative;

If you want the text to wrap to another line then you would need to float the span instead.

3

Tried this and all the borders disappeared! Also, I have another span within this which i don’t want to be set the same as the main span style.

cheers

4

Then you did something wrong or have other styles applied that you are not showing because the above code is working in all browsers. Just copy it and test to see it in working order. :slight_smile:

I’d need to see your full code to see what you are doing wrong. Have you got a link to the page in question?

Also, I have another span within this which i don’t want to be set the same as the main span style.

Just add a specific class to the span in question and other spans will not be affected.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p.test{text-align:center;}
.test span.test2 {
    border:2px solid #c0c0c0;
    background:#f5f5f5;
    padding:4px;
    position:relative;/* ie6 border fix*/
}
</style>
</head>
<body>
<p class="test"><span class="test2" >This is a test - this is a test</span></p>
</body>
</html>

Never use inline styles because you lose control from the stylesheet.