SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member jhflau11's Avatar
    Join Date
    Mar 2003
    Location
    USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS popup/mousover help

    Hi,

    I'm trying to have it when you mouseover a link the image next to the links will changes. I have it working for the most part in Firefox/Mozilla. In Safari there is an alignment issue and in IE the image won't change back when you mouseout. Thank for the help.


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>NOAA's Coral Reef Information System</title>
    <style>
    body {margin: 0; padding: 0; background: #F8F6EA; font-size:10pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
    #container { width: 720px; margin: 0px; text-align:left;}
    #left {float:left; border-right:1px solid #F27F4D; width:535px; padding:5px;}
    #right {float:left; width:155px; border-left:1px solid #F27F4D; margin-left:-1px;/* makes border line up with #left border */ padding-left:5px; font-size:9pt;}
    #right li { margin-left:-30px; padding:0 0 10px 9px; background: url(siteart/homearrow.gif) top left no-repeat; list-style-type: none;}
    #right a {font-weight:bold;}
    #intro {font-style:italic;}
    #mainnav {width:535px; height:400px;}
    #mainnav img{margin: 0; padding: 5px 5px 5px 0; border-right:1px solid #F27F4D; border-top:1px solid #F27F4D; border-bottom:1px solid #F27F4D; float:left;}
    #mainnav ul {list-style: none; width:450px;}
    * html #mainnav ul {width:350px;/*for IE*/}
    #mainnav ul li {position: relative;}
    #mainnav ul li a {display: block; text-decoration: none; padding: 20px 10px 0 10px; font-size:14pt; font-weight:bold; font-family:Helvetica, Verdana, Arial, sans-serif;}
    * html #mainnav ul li a {padding: 0 10px 0 10px; /*for IE*/}
    #mainnav ul li a:hover {border-bottom:1px solid #F27F4D;}

    #mainnav ul li a:link img{display:none;}
    #mainnav ul li a:visited img{display:none;}
    #mainnav ul li a:hover img {position: absolute; top: 2px; left: -153px; height: 342px; width: 147px; display:block; border:0;}
    #mainnav ul li a:hover .reef {top: -38px;}
    #mainnav ul li a:hover .pro {top: -74px;}
    #mainnav ul li a:hover .lib {top: -114px;}
    #mainnav ul li a:hover .act {top: -151px;}
    #mainnav ul li a:hover .gloss {top: -189px;}
    * html #mainnav ul li a:hover img {left: -162px;/*for IE*/}

    #textnav {font-size:8pt; text-align:center; width:495px;}
    a:link {color: #333366;}
    a:visited {color: #333366;}
    a:hover {color: #006699;}
    h2{color: #336; font-weight: bold; font-size: 10pt;}
    </style>
    </head>

    <body>
    <div id="container">
    <div><!--#include virtual="includes/coris_homebanner.ssi" --></div>

    <div id="left">
    <div id="intro">
    <p>NOAA's Coral Reef Information System (CoRIS) is designed to be a single
    point of access to NOAA coral reef information and data products, especially
    those derived from NOAA's Coral Reef Conservation Program.</p>
    <p>&nbsp;</p>
    </div>
    <div id="mainnav">
    <img name="test_r2_c2" src="images/test_r2_c2.gif" width="147" height="342" border="0" alt="Coral">
    <ul>
    <li><a href="#">DISCOVER NOAA's DATA<img src="images/test_r2_c2_f6.gif"></a></li>
    <li><a href="#">ABOUT CORAL REEFS<img src="images/test2_r2_c2_f2.gif" class="reef"></a></li>
    <li><a href="#">PROFESSIONAL EXCHANGES<img src="images/test2_r2_c2_f5.gif" class="pro"></a></li>
    <li><a href="#">THE LIBRARY<img src="images/test2_r2_c2_f3.gif" class="lib"></a></li>
    <li><a href="#">NOAA's CORAL REEF ACTIVITIES<img src="images/test2_r2_c2_f4.gif" class="act"></a></li>
    <li><a href="#">GLOSSARY<img src="images/test2_r2_c2_f7.gif" class="gloss"></a></li>
    </ul>
    </div>
    <div id="textnav">
    <hr width="25%">
    <p><br>
    <a href="backmatter/siteinfo.html">About This Site</a> | <a href="backmatter/toc.html">Table of Contents</a> | <a href="backmatter/supportingdocs.html">Supporting Documents</a> | <a href="backmatter/contactus.html">Contact Us</a><br>
    <a href="backmatter/acknowledge.html">Acknowledgements</a> | <a href="backmatter/disclaimer.html">Disclaimer</a> | <a href="backmatter/privacy.html">Privacy Policy</a><a href="backmatter/privacy.html"></a>
    </p>
    <p>&nbsp; </p>
    </div>
    </div>
    <div id="right">
    <h2 align="center">Special Note</h2>
    <ul>
    <li>Learn about the activities of the <a href="http://coralreef.gov" target="_blank">U.S.
    Coral Reef Task Force</a>.</li>
    <li>View the <a href="activities/actionstrategy/actionstrategy.html">National
    Coral Reef Action Strategy</a>.</li>
    <li>Read the report on the <a href="http://www.nccos.noaa.gov/publications/notables.html#corals" target="_blank">State
    of U.S. Coral Reefs</a>.</li>
    <li>Read the report on the Status of Coral Reefs of the World.</li>
    <li>Go to <a href="exchanges/welcome.html">Professional exchanges</a> for expert discussion on<a href="exchanges/coralgenome/coralgenome.html"> DNA
    sequencing in corals</a>.</li>
    <li>View the updated <a href="data/taxonomy5_1_04.html">Taxonomy</a> file of over 3000 scientific names found in NOAA coral data.</li>
    <li>Search by taxonomic name--a new search feature in the <a href="http://coris.noaa.gov/text-search/search.jsp" target="_blank">Text
    Search</a>--in <a href="data/">Discover NOAA's Data</a>.</li>
    <li>Browse the Library for NOAA coral reef <a href="library/publications.html">publications</a> and <a href="noaaoffices/noaaoffices.html">Web
    sites</a>.</li>
    <li>Take the <a href="backmatter/usersurvey.html">User Survey</a>.</li>
    </li>
    </ul>
    <p><!--#include virtual="/includes/corisearch_home.html"--></p>

    </div>
    <div style="clear:both"></div>
    <div>
    <!--#include virtual="/includes/corisfoot.html"-->
    </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Addict trinity0159's Avatar
    Join Date
    Jul 2002
    Location
    California
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you give a link to where this page is so that I can download the images to see what is going on.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I don't have safari but try this for ie:
    Code:
    body {margin: 0; padding: 0; background: #F8F6EA; font-size:10pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
    #container { width: 720px; margin: 0px; text-align:left;}
    #left {float:left; border-right:1px solid #F27F4D; width:535px; padding:5px;}
    #right {float:left; width:155px; border-left:1px solid #F27F4D; margin-left:-1px;/* makes border line up with #left border */ padding-left:5px; font-size:9pt;}
    #right li { margin-left:-30px; padding:0 0 10px 9px; background: url(siteart/homearrow.gif) top left no-repeat; list-style-type: none;}
    #right a {font-weight:bold;}
    #intro {font-style:italic;}
    #mainnav {width:535px; height:400px;}
    #mainnav img{margin: 0; padding: 5px 5px 5px 0; border-right:1px solid #F27F4D; border-top:1px solid #F27F4D; border-bottom:1px solid #F27F4D; float:left;}
    #mainnav ul {list-style: none; width:450px;position: relative;}
    * html #mainnav ul {width:350px;/*for IE*/} 
    #mainnav ul li {}
    #mainnav ul li a {display: block; text-decoration: none; padding: 20px 10px 0 10px; font-size:14pt; font-weight:bold; font-family:Helvetica, Verdana, Arial, sans-serif;}
    * html #mainnav ul li a {padding: 0 10px 0 10px; /*for IE*/} 
    #mainnav ul li a:hover {border-bottom:0px solid #F27F4D;}
    #mainnav ul li a img{visibility:hidden;position: absolute; top: 2px; left: -153px; height: 342px; width: 147px; border:0;}
    #mainnav ul li a:hover img {visibility:visible; }
    * html #mainnav ul li a:hover img {left: -162px;/*for IE*/}
    * html a:hover{visibility:visible} 
     
    #textnav {font-size:8pt; text-align:center; width:495px;}
    a:link {color: #333366;} 
    a:visited {color: #333366;}
    a:hover {color: #006699;}
    h2{color: #336; font-weight: bold; font-size: 10pt;}
    Paul

  4. #4
    SitePoint Member jhflau11's Avatar
    Join Date
    Mar 2003
    Location
    USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul thanks for the help. I tried replacing the code you sent. But IE6 is still doing the same thing and then it wasn't working in Mac Mozilla.

    trinity0159, Here's a link to the page I'm redoing http://coris.noaa.gov/. I'm just redoing the page using CSS. You'll beable to see the rollover effect here.

    Thanks again for help.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Paul thanks for the help. I tried replacing the code you sent. But IE6 is still doing the same thing and then it wasn't working in Mac Mozilla.
    I tested the code in ie6 and firefox (and Opera7.5) and it works fine

    You must have changed something (or not changed something). Just copy all the css above and try it again. I've tested again with your original code and it works fine.

    If it doesn't work then post all the code you are using and I'll see where its going wrong.

    Paul

  6. #6
    SitePoint Member jhflau11's Avatar
    Join Date
    Mar 2003
    Location
    USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul. Thank you. You were right I must have missed something when I copied it over. It's working in all browsers now.

    I do have one last question. Only in IE the bottom border doesn't appear on hover. I did some slight edits ( edits have -----> in front). Here's the updated CSS.

    body {margin: 0; padding: 0; background: #F8F6EA; font-size:10pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
    #container { width: 720px; margin: 0px; text-align:left;}
    #left {float:left; border-right:1px solid #F27F4D; width:535px; padding:5px;}
    #right {float:left; width:155px; border-left:1px solid #F27F4D; margin-left:-1px;/* makes border line up with #left border */ padding-left:5px; font-size:9pt;}
    #right li { margin-left:-30px; padding:0 0 10px 9px; background: url(siteart/homearrow.gif) top left no-repeat; list-style-type: none;}
    #right a {font-weight:bold;}
    #intro {font-style:italic;}
    #mainnav {width:535px; height:400px;}
    #mainnav img{margin: 0; padding: 5px 5px 5px 0; border-right:1px solid #F27F4D; border-top:1px solid #F27F4D; border-bottom:1px solid #F27F4D; float:left;}
    #mainnav ul {list-style: none; width:450px;position: relative;}
    * html #mainnav ul {width:350px;/*for IE*/}
    #mainnav ul li {}
    #mainnav ul li a {display: block; text-decoration: none; padding: 20px 10px 0 10px; font-size:14pt; font-weight:bold; font-family:Helvetica, Verdana, Arial, sans-serif;}
    * html #mainnav ul li a {padding: 0 10px 0 10px; /*for IE*/}
    -----> #mainnav ul li a:hover {border-bottom:1px solid #F27F4D;}
    -----> #mainnav ul li a img{visibility:hidden;position: absolute; top: 2px; left: 0; height: 342px; width: 147px; border:0;}
    #mainnav ul li a:hover img {visibility:visible; }
    -----> * html #mainnav ul li a:hover img {left: -152px;/*for IE*/}
    * html a:hover{visibility:visible}

    #textnav {font-size:8pt; text-align:center; width:495px;}
    a:link {color: #333366;}
    a:visited {color: #333366;}
    a:hover {color: #006699;}
    h2{color: #336; font-weight: bold; font-size: 10pt;}

    Any ideas?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This is a common problem with ie and you will need to give the anchor a height before the border will show.

    Code:
    * html #mainnav ul li a {padding: 20px 10px 0 10px;height:40px;he\ight:20px /*for IE*/}
    Paul

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You'll need to set the ul margins to zero for Opera.

    Code:
    #mainnav ul {list-style: none; width:450px;position: relative;margin:0;padding:0}
    Paul

  9. #9
    SitePoint Member jhflau11's Avatar
    Join Date
    Mar 2003
    Location
    USA
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's working in all the browsers now. Thanks again Paul for all your help.


Bookmarks

Posting Permissions

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