Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts

    Question adding an underline

    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:
    Code:
      <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:
    Code:
    /* ***************************************************
       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.

  • #2
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    Instead of:
    Code:
    border-bottom:		thin dashed #0000aa;
    Try:
    Code:
    border-bottom:		1px dashed #0000aa;
    If that doesn't work you may have to ad
    Code:
    margin-bottom:1px
    However that may give you problems with a SPAN element so you may have to switch to a DIV element

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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?

  • #4
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    I don't understand...

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.

  • #6
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    Don't apply it to all DIVs... just change your SPAN to a DIV

    From:
    Code:
    <span class="underDash"...>...</span>
    To:
    Code:
    <div class="underDash"...>...</div>

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Bingo!

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

  • #8
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    Yes, border's get kind of sketchy some times with inline elements.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •