Reply
how to remove text-decoration: underline
Old 11-11-2008, 12:16 AM how to remove text-decoration: underline
Experienced Talker

Posts: 46
Name: Adrian
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 &amp; 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?
elv8 is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 11-11-2008, 12:36 AM Re: how to remove text-decoration: underline
Average Talker

Posts: 29
Name: Dave
Could you not just move your closing h1 tag outside the span before your br?
davie_gravy is offline
Reply With Quote
View Public Profile
 
Old 11-11-2008, 01:40 AM Re: how to remove text-decoration: underline
Experienced Talker

Posts: 46
Name: Adrian
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 &amp; Cold Buffet </h1><br />
<span class="minimum">(Minimum 50 People)</span>
</div>

It seems to make things worse?
elv8 is offline
Reply With Quote
View Public Profile
 
Old 11-11-2008, 04:00 AM Re: how to remove text-decoration: underline
Junior Talker

Posts: 3
Name: Charles
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>
Charles42 is offline
Reply With Quote
View Public Profile
 
Old 11-11-2008, 04:34 AM Re: how to remove text-decoration: underline
chrishirst's Avatar
Super Moderator

Posts: 19,022
Location: Blackpool. UK
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>
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System | Bits & Bobs
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 11-11-2008, 01:39 PM Re: how to remove text-decoration: underline
LadynRed's Avatar
Super Moderator

Posts: 8,218
Location: Tennessee
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 11-11-2008, 06:32 PM Re: how to remove text-decoration: underline
Experienced Talker

Posts: 46
Name: Adrian
Hi,

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

Thanks again and thumbs up to all the posts.
elv8 is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to how to remove text-decoration: underline
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 



Page generated in 0.11265 seconds with 12 queries