I would like to underline the <h1> tag on every page with a dotted line. text-decoration-style is available from CSS 3. As an alternative I could set a border-bottom but that will inherit the width of the parent div. Is there a way to do this so the line will adjust to the width of the <h1> text?
Edit: Solved. I have set the <h1> tag to
display: inline-block;
lol - Yes inline-bock or float it 
Remember you will need the hack for IE7 and ie6.
h1.test{display:inline-block}
* html h1.test{display:inline}
*+html h1.test {display:inline}
Hey Paul, not nice from your part ! 
Hmmm…
Maybe a … span ?! 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h1 underline</title>
<style type="text/css">
h1 span {
border-bottom:thick dotted #ff0000;
}
</style>
</head><body>
<h1><span>Underline me</span> Underline me not!</h1>
</body></html>
What do you mean As I always say: " Keep the hacks in the CSS and not in the html"
<span> is not hack Neither is the css I posted. It’s valid CSS. Any html that is not required is a hack or misuse of the element (in my opinion) although it does depend on how easy the css hack is and what the implications of using it are.
Yes I agree that both are important but ultimately clean html is the most important to me.
I work by the principle that any html that is not actually required for the job in hand can be classed as a hack because it is inserted for a purpose that is not semantic and not needed. I would rather use a css hack than add unnecessary elements if at all possible.
Sometimes it isn’t possible or is better and easier to add elements and in these cases it’s fine. Using hacks can open a pandoras box so it is wise to use them carefully.
3)We’ll just have to agree to disagree:)
Let HTML speak for it self
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h1 underline</title>
<style type="text/css">
h1 span, h1.csshack {
border-bottom:thick dotted #ff0000;
}
h1.csshack {
display:inline-block;
}
</style>
</head><body>
<h1><span>Underline me</span> Underline me not!</h1>
<span>I'm fine, thank you. My brother though may have some issues.</span>
<h1 class="csshack">Underline me whole</h1>
<span>But wait, what about me?</span>
</body></html>
The CSS hack of inline-block requires more CSS than you bargain for. While the use of span keeps HTML semantic, serve its purpose as a span according to specs and also makes for a cleaner CSS, while keeping the h1 untouched at its default style core.
And let the validator speak for me.
Validation Output: 2 Errors
Line 20, Column 6: document type does not allow element “SPAN” here; missing one of “P”, “H1”, “H2”, “H3”, “H4”, “H5”, “H6”, “PRE”, “DIV”, “ADDRESS” start-tag
<span>I’m fine, thank you. My brother though may have some issues.</span>
The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as “<p>” or “<table>”) inside an inline element (such as “<a>”, “<span>”, or “<font>”).
Line 22, Column 6: document type does not allow element “SPAN” here; missing one of “P”, “H1”, “H2”, “H3”, “H4”, “H5”, “H6”, “PRE”, “DIV”, “ADDRESS” start-tag
<span>But wait, what about me?</span>
That is invalid and a bad example. You can’t have a span as a direct child of the body as it is invalid.
It would also be non semantic should you wrap it in a div because then it runs into a block level element at the same level which should be avoided (although not invalid - just non semantic because you finish a block element you should start another block box or the browser has to construct an anonymous block to do this. Besides that is a recipe for disaster in iE as it just hates inline elements running ito block elements).
Ignoring all those issues you could of course just set the span to display:block so please no more contrived examples
I said we’d just have to agree to disagree on this point as you have your point of view and I know you won’t change and I accept that.
Check-mate: Paul! Mitică loses!
Now, I was giving a bad example. First and foremost because of the two h1 elements existing on the same page for a html 4.01 DTD. But it was intended for good.
Using the extra CSS for span falls in the “unclean CSS” category I mentioned. Not just because it’s extra, but because it is an unnecessary juggle with the default definition for both h1 and span.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h1 underline</title>
<style type="text/css">
h1 span, h1.csshack {
border-bottom:thick dotted #ff0000;
}
h1.csshack {
display:inline-block;
}
</style>
</head><body>
<h1><span>Underline me</span> Underline me not!</h1>
<ins>I'm fine, thank you. My brother though may have some issues.</ins>
<h1 class="csshack">Underline me whole</h1>
<del>But wait, what about me?</del>
</body></html>
Wow - I don’t hear that often I must be privileged today (or you are going to get me somewhere else lol)
To be honest, I do think the span is a good idea and obviously safer if the element is being used all over the place. For a one-off I would try not to use it but I don’t disregard it as an option.
Indeed. See my post after check-mate 
Interesting conversation To be honest I used a <span>. I didn’t read the responses until now so I’m a bit confused now. This is how I have it:
.content h1 {
padding-bottom: 20px;
display: inline-block;
font-size: 150%;
color: #003153;
font-weight: bold;
}
.content h1 span{
display: block;
border-bottom: #DCDDE0 dotted 1px;
}
Is this okay?
We’ll have to see some mark up also.
But it’s not that OK looking to me
This is the markup:
<h1>Ατσαλάκης Real Estate - Η Εταιρεία<span></span></h1>
No, it’s one or the other. I think we may have confused you
noonope’s way
<!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">
content h1 {
padding-bottom: 20px;
font-size: 150%;
color: #003153;
font-weight: bold;
}
.content h1 span {
border-bottom: #DCDDE0 dotted 1px;
}
</style>
</head>
<body>
<div class="content">
<h1><span>Short underline</span></h1>
</div>
</body>
</html>
Thank you guys! helpful as ever