...

View Full Version : adding an underline



jerry62704
02-15-2008, 06:33 PM
I have some text that I want to highlight with a dashed underline. This is for a show display when the user clicks on it.

This works in FF, but not IE.

HTML:

<div id="hideDetails">
<ul>
<li>
<span class="underDash"
onmouseover="document.getElementById('details_desc').style.display='block';
document.getElementById('summary_desc').style.display='none';
document.getElementById('history_desc').style.display='none';
document.getElementById('inactive_desc').style.display='none';">
Detail description</span></li>

<li>
<span class="underDash"
onmouseover="document.getElementById('details_desc').style.display='none';
document.getElementById('summary_desc').style.display='block';
document.getElementById('history_desc').style.display='none';
document.getElementById('inactive_desc').style.display='none';">
Summary description</span></li>

<li>
<span class="underDash"
onmouseover="document.getElementById('details_desc').style.display='none';
document.getElementById('summary_desc').style.display='none';
document.getElementById('history_desc').style.display='none';
document.getElementById('inactive_desc').style.display='block';">
Inactive description</span></li>

<li>
<span class="underDash"
onmouseover="document.getElementById('details_desc').style.display='none';
document.getElementById('summary_desc').style.display='none';
document.getElementById('history_desc').style.display='block';
document.getElementById('inactive_desc').style.display='none';">
Poll History</span></li>
</ul></div> <!-- hide details -->

<p id="details_desc" class="hide">Bush polls are averaged between the top national non-partisan polls. The ones used are listed in the <a href="#details">detail</a> section below. They are averaged to eliminate spikes or valleys by one poll from distorting the national feeling.<br /></p>

<p id="summary_desc" class="hide">Bush polls summary has the poll, the current number, the direction since the last poll and the change, and the date. See the <a href="#summary">summary</a> section below.<br /></p>

<p id="inactive_desc" class="hide">When polls are too old, they are eliminated from the computations, but are listed in their own section for historical interest. Old polls will be re-added for the computations when they are current. See the <a href="#inactive">inactive</a> section for those polls.</p>

<p id="history_desc" class="hide">Once an average is determine, that one number is kept for historical purposes and for the graph of job approval ratings. The <a href="O_Bush_Poll2.php" target="_blank">history</a> section includes this number for the past year while the graph goes back to June 2001.</p>
</div>


CSS:

/* ***************************************************
hide text - show with onmouseover link
*************************************************** */
.hide {
display: none;
text-align: left;
}

.underDash {
border-bottom: thin dashed #0000aa;
}

div#hideDetails {
width: 100%;
float: left;
text-align: center;
margin-bottom: 1em;
font-size: 90%;
}

div#hideDetails li {
float: left;
list-style: none;
padding-right: 30px;
}

Any help will be greatly appreciated.

Andrew Johnson
02-15-2008, 06:45 PM
Instead of:


border-bottom: thin dashed #0000aa;


Try:


border-bottom: 1px dashed #0000aa;


If that doesn't work you may have to ad


margin-bottom:1px


However that may give you problems with a SPAN element so you may have to switch to a DIV element

jerry62704
02-15-2008, 06:53 PM
Didn't work, darn it.

Unrelated question. I thought I was responding to you in another thread to thank you for the code I'm using in this thread. But it looked like it went to someone else entirely. How do I "target" it?

Andrew Johnson
02-15-2008, 06:59 PM
I don't understand...

jerry62704
02-15-2008, 07:05 PM
I didn't see the underline in IE. Darn it. I was hoping that would work. It seems like such a easy thing. I was able to get the dashes to show when I applied it to the <div>, but that went across the whold page and not just under the words. No one would be able to figure out clicking on the words in that case.

Andrew Johnson
02-15-2008, 07:06 PM
Don't apply it to all DIVs... just change your SPAN to a DIV

From:

<span class="underDash"...>...</span>

To:

<div class="underDash"...>...</div>

jerry62704
02-15-2008, 07:16 PM
Bingo!

Any idea why you can't use a span over a div? It must be an inline v. block issue I would guess.

Andrew Johnson
02-15-2008, 08:04 PM
Yes, border's get kind of sketchy some times with inline elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum