Web Analytics Made Easy -
StatCounter CSS rollover navbar problem, please help - CodingForum


No announcement yet.

CSS rollover navbar problem, please help

  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS rollover navbar problem, please help

    Hi Everyone,

    I'm working on a redesign and I'm having trouble with a CSS rollover navbar. URL: http://robincottrell.com/robincottrell/peace.shtml

    What I want is for the small image-links (i.e., home1.gif) to be static until the user rolls over them. On rollover, the larger, more decorative image (home2.png) would replace it.

    What I'm getting now is some weird situation where both are visible and then the smaller one disappears on rollover. I'd also like to get them all onto one line and regulate the width of each individually so they look even, which I can't remember how to do, but if I could get the first problem solved, it would make my day. Anyone with a fresh pair of eyes and expertise (or helpful hints), please help!

    Relevant CSS:(http://robincottrell.com/robincottre...incottrell.css)

    /* Special thanks to Alan Who for his Rollover CSS Image Menu tutorial at http://www.alanwho.com/web-developme...css-image-menu */

    div#topnav {
    top: 100px;
    left: 50px;
    margin: 0;
    padding-top: 5px;
    position: absolute;
    z-index: 1;
    visibility: visible;

    #topnav img {
    border: none;

    #topnav li {
    display: inline;

    #topnav li a { float: left; display:block; width: 110px; height: 50px; margin: 0; padding: 0;}
    #topnav li a img { border:none; vertical-align:bottom; /* for IE6 */}
    #topnav li a:hover { visibility:visible; /* for IE6 */ }
    #topnav li a:hover img { visibility:visible; /* for IE6 */ }
    #topnav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
    #home { background:url(../images/home2.png) no-repeat center;}
    #bio { background:url(../images/bio2.png) no-repeat center;}
    #music { background:url(../images/music2.png) no-repeat center; }
    #photos { background:url(../images/photos2.png) no-repeat center; }
    #contact { background:url(../images/contact2.png) no-repeat center; }
    #sitemap { background:url(../images/sitemap2.png) no-repeat center; }
    #links { background:url(../images/links2.png) no-repeat center; }
    /* Not quite working... */

    Topnav HTML:(http://robincottrell.com/robincottre...i_topnav.shtml)
    <!-- begin topnav --><div id="topnav">
    <a title="" href="index.shtml" id="home">
    <img src="images/home1.gif" alt="home" /></a>
    <a title="" href="bio.shtml" id="bio">
    <img src="images/bio1.gif" alt="bio" /></a>
    <a title="" href="music.shtml" id="music">
    <img src="images/music1.gif" alt="music" /></a>
    <a title="" href="images/photos/phpslideshow.php" id="photos">
    <img src="images/photos1.gif" alt="photos" /></a>
    <a title="" href="contact.shtml" id="contact">
    <img src="images/contact1.gif" alt="contact" /></a>
    <a title="" href="sitemap.shtml" id="sitemap">
    <img src="images/sitemap1.gif" alt="sitemap" /></a>
    <a title="" href="links.shtml" id="links">
    <img src="images/links1.gif" alt="links" /></a>
    <!-- end topnav --></div>

    Thank you for taking the time to read this, and for any suggestions you can give.