Styling issue - unwanted underline

**brucevde** · Mar 12th, 2010, 06:45 PM

Why does FF (or maybe the question should be why doesn't IE8) underline the text of the h3 and p tags contained within the div.

I have tried adding the text-decoration:none; style everywhere it seemed appropriate but cannot get rid of the underline in FF.

My work-around is a to remove the text-decoration:underline; from the PopupItem class and use the following

<span style="text-decoration:underline;">Spring Special - Free Introductory Offer!<span>

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></title>
<style type="text/css">
.Emphasize
{
    font-style: italic;
    font-weight: bold;
}

.PopupItem
{
    position:relative;
    text-decoration:underline;
    cursor:pointer;
    color: #dc143c;
    font-weight:bold;
    list-style-type:none;
}

.PopupSpecials
{
    width: 500px;
    position:absolute;
    left:-1000px;
    top:3ex;
    border:medium outset red;
    text-align: left;
    font-weight:normal;
    text-decoration:none;
    overflow:auto;
    background-color:white;
    color:Black;
}

.PopupSpecials h3{margin-top:5px;}

li:hover div.PopupSpecials{left:150px;}

</style>
</head>
<body>
<ul>
 <li class="PopupItem">Spring Special - Free Introductory Offer!
  <div class="PopupSpecials">
     <img src="images/specials_sm.JPG" alt="Spring Special" height="117" width="127" style="padding:5px 10px;float:left;"/>
     <h3>New Dogs Only</h3>
     <p>Receive a full day of <span class="Emphasize">free daycare</span><br />when you purchase any one of our discounted packages.<br /><br />Enroll your dog today!</p>
  </div>
 </li>
</ul>
</body>
</html>

**SambaNeko** · Mar 12th, 2010, 07:31 PM

Removing "position:relative" from .PopupItem fixes the problem. Why, I cannot say...

Edit: the above fixes the problem for Firefox, but not for Chrome. Hmmm.

Well, one alternative (aside from adding a span as you've done) would be to get rid of the text-decoration declarations and add a border-bottom to the <li>. The border will extend for the whole length of the <li> of course, so this may only be practical if you limit its width as well.

**SambaNeko** · Mar 12th, 2010, 10:04 PM

According to spec...

When specified on an inline element, [text-decoration] affects all the boxes generated by that element; for all other elements, the decorations are propagated to an anonymous inline box that wraps all the in-flow inline children of the element, and to any block-level in-flow descendants. It is not, however, further propagated to floating and absolutely positioned descendants...

So, the only way to get "text-decoration" to go away seems to be by using float or absolute positioning... and Chrome does not appear to comply with this rule, but Firefox and IE8 do.

**Merri** · Mar 12th, 2010, 10:20 PM

While I don't know why the CSS priority doesn't work as it should, here is more like I'd have done it anyway:

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></title>
<style type="text/css">
em
{
    font-weight: bold;
}

.PopupItem
{
	cursor: pointer;
	list-style: none;
	position:relative;
}

.PopupItem b
{
	color: #dc143c;
	text-decoration: underline;
}

.PopupSpecials
{
	background: white;
	border: medium outset red;
	left: -1000px;
	overflow: auto;
	position: absolute;
	text-align: left;
	top: 3ex;
	width: 500px;
}

.PopupSpecials h3
{
	margin-top: 5px;
}

li:hover div.PopupSpecials
{
	left: 150px;
}

</style>
</head>
<body>
	<ul>
		<li class="PopupItem">
			<b>Spring Special - Free Introductory Offer!</b>
			<div class="PopupSpecials">
				<img src="images/specials_sm.JPG" alt="Spring Special" style="padding:5px 10px;float:left;width:127px;height:117px"/>
				<h3>New Dogs Only</h3>
				<p>Receive a full day of <em>free daycare</em><br />when you purchase any one of our discounted packages.<br /><br />Enroll your dog today!</p>
			</div>
		</li>
	</ul>
</body>
</html>

I figured adding a new class for emphasis is redundant since there already is em for emphasis in HTML. Also, it makes sense to simply bold the list item's text in HTML since that is what you're doing anyway and you got something more to work with in CSS that makes some semantic sense as well.

One another kind of change would be to dump unordered list and replace it with a definition list, in which case you would have dt items replacing li items and dd item following the dt item would work like the div does right now. It would kind of have more semantic sense, but truth to be told that is simply a matter of preference. The HTML would be something like this:

Code:

<dl>
    <dt class="PopupItem">Spring Special!</dt>
    <dd class="PopupSpecials"><h3>New dogs only!</h3><p>Free free! Woof woof!</p></dd>

While in CSS you'd use something like dt.PopupItem:hover + dd.PopupSpecials { left: 100px; }
You wouldn't need to define top position at all, because the default position would be below the dt element anyway.

Edit!
Of course the one thing that I forgot to think about is whether user needs to click the DD element or not... once escaped from the dt element the dd element always closes. This may be better or it may be worse.

**brucevde** · Mar 14th, 2010, 12:35 PM

I figured adding a new class for emphasis is redundant since there already is em for emphasis in HTML.

Like you said we all have our preferences. My personal choice is to not use the HTML tags that have a visual effect preferring their CSS counter parts.

Regarding DL vs UL - I don't think either is appropriate in this case because there isn't a "list". I would have used a div but couldn't get it to work. However you inadvertently help me with that by posting

dt.PopupItem:hover + dd.PopupSpecials { left: 100px; }

I have never seen a class using a + sign before and couldn't find any information on w3schools.com about it. Are there other operators that can be used? Is this syntax supported by all browsers? What about older browsers?

Regardless, I think I will use the following code instead.
Thanks.

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></title>
<style type="text/css">
.Emphasize{font-style:italic;font-weight: bold;}

.PopupItem
{
	cursor: pointer;
	color: #dc143c;
	text-decoration: underline;
}

.PopupSpecials
{
	background: white;
	border: medium outset red;
             left:-1000px;
	position: absolute;
	text-align: left;
	width: 500px;
}

h2.PopupItem:hover + div.PopupSpecials{left:10px;}
</style>
</head>
<body>
<div>
    <h2 class="PopupItem">Spring Special!</h2>
    <div class="PopupSpecials">
      <img src="images/specials_sm.JPG" alt="Spring Special" height="117" width="127" style="padding:5px 10px;float:left;"/>
      <h3>New Dogs Only</h3>
      <p>Receive a full day of <span class="Emphasize">free daycare</span><br />when you purchase any one of our discounted packages.<br /><br />Enroll your dog today!</p>
    </div>
</div>
</body>
</html>

**Merri** · Mar 14th, 2010, 12:43 PM

The + selector is not supported by Internet Explorer 6. Other than that it is supported by all major browsers.

Thread: Styling issue - unwanted underline

Thread Tools

Display

Styling issue - unwanted underline

Re: Styling issue - unwanted underline

Re: Styling issue - unwanted underline

Re: Styling issue - unwanted underline

Re: Styling issue - unwanted underline

Re: Styling issue - unwanted underline

Posting Permissions