Styling issue - unwanted underline

**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.

Thread: Styling issue - unwanted underline

Thread Tools

Display

Threaded View

Re: Styling issue - unwanted underline

Posting Permissions