CSS Forum

**elv8** · 11-11-2008, 01:16 AM

Hi,

I have a bit of a problem trying to remove an underline from a heading. I have defined <h1> with the appropriate styles. The heading is on the 1st line which is underlined and on the 2nd line is an additional comment which should not be underlined.

In Example...

Hot & Cold Buffet - Underlined with specific styles
(Minimum 50 People) - no underline with different styles

CSS

h1 {
font-size:18px;
font-family:"Arial";
padding-bottom:5px;
color: #B37E13;
text-align: center;
font-weight: bold;
text-decoration:underline;
}

.minimum {
text-decoration:none;
font-family:"Trebuchet MS";
font-size:10px;
padding-top:-5px;
padding-bottom:-5px;
color: #a1701b;
text-align:center;
}

HTML

<h1>Hot & Cold Buffet <br />
<span class="minimum">(Minimum 50 People)</span></h1>

I have used the span so I can keep it in the <h1> tag so I don't have additional space if used with the <p> tag. In dreamweaver I can see that the line has been removed but on the latest Firefox and IE the line seems to still be visible?

Is there another way to write this so I can have the 2nd line without the underline or is it not supported by browsers other then just with the <a> tag?

**davie_gravy** · 11-11-2008, 01:36 AM

Could you not just move your closing h1 tag outside the span before your br?

**elv8** · 11-11-2008, 02:40 AM

I thought a span tag needs to be inside a p, h1, etc tag? When I do this to the code I loose the styles and the 2nd line behaves without any styles on a separate line.

You said to try it like this:

<div>
<h1>Hot & Cold Buffet </h1><br />
<span class="minimum">(Minimum 50 People)</span>
</div>

It seems to make things worse?

**Charles42** · 11-11-2008, 05:00 AM

Hi Elv8,

Try the following...

Hope it helps you out.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    h1 {
        font-size:18px;
        font-family:"Arial";
        padding-bottom:5px;
        color: #B37E13;
        text-align: center;
        font-weight: bold;
        text-decoration:underline;
    }   

    .minimum {
        text-decoration:none;
        font-family:"Trebuchet MS";
        font-size:10px;
        position:relative;
        top:-15px;
        color: #a1701b;
        font-weight: bold;
        text-align:center;
    }
    </style>
</head>
<body>
    <h1>Hot &amp; Cold Buffet</h1>
    <div class="minimum">(Minimum 50 People)</div>
</body>
</html>

**chrishirst** · 11-11-2008, 05:34 AM

The text-decoration is on the parent element so will apply for the full width. even though the child span has no text-decoration it is part of the parent heading, so the parent underline continues through.

change the colour of the child span and you will see that the underline colour remains as the parent colour.

so add another span with NO underline and remove the text decoration from the parent

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
h1 {
	font-size:18px;
	font-family:"Arial";
	padding-bottom:5px;
	color: #B37E13;
	text-align: center;
	font-weight: bold;
}   
h1 span.ul {
	text-decoration:underline;
}
h1 span.noul {
	font-family:"Trebuchet MS";
	display:block;
	font-size:10px;
	color: #a1701b;
	text-align:center;
	text-decoration:none;
}
</style>
</head>
<body>
    <h1><span class="ul">Hot &amp; Cold Buffet <span><span class="noul">(Minimum 50 People)</span></h1>
</body>
</html>

**LadynRed** · 11-11-2008, 02:39 PM

Or, you could change the H1 to display: inline, then it would only extend the width of the text itself and not the width of the container.

**elv8** · 11-11-2008, 07:32 PM

Hi,

Thanks for all the great response and finally got it to work.

Thanks again and thumbs up to all the posts.