SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Rome
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy List and css[IE VS FIREFOX]

    Hi folks,
    my problem is really stupid as boring!
    In order to have a roll-over effect on a vertical menu with only image, i have used this code:

    HTML Code:
    <style>
    img{border-width: 0}
    div#navigation{float: left;padding-top: 20px}
    div#navigation ul{list-style-type: none;margin: 3px;padding: 0;}
    div#navigation li{display:inline;margin:0;padding:0}
    div#navigation li a{display:block;}
    div#navigation a:hover{line-height: 1px; /*serve per IE*/}
    div#navigation a:hover img{visibility: hidden}
    li#one{background: url("buttons/home_over.jpg") no-repeat top left}
    li#two{background: url("buttons/news_over.jpg") no-repeat top left}
    li#three{background: url("buttons/members_over.jpg") no-repeat top left}
    li#four{background: url("buttons/login_over.jpg") no-repeat top left}
    li#five{background: url("buttons/contact_over.jpg") no-repeat top left}
    li#six{background: url("buttons/gallery_over.jpg") no-repeat top left}
    li#seven{background: url("buttons/downloads_over.jpg") no-repeat top left}
    li#eight{background: url("buttons/rules_over.jpg") no-repeat top left}
    li#nine{background: url("buttons/links_over.jpg") no-repeat top left}
    </style>
    
    <div id="navigation">
    <ul>
        <li id="one"><a href="newss.php"><img src="buttons/home_.jpg" alt="home page"></a></li>
        <li id="two"><a href="#"><img src="buttons/news_.jpg" alt="news archive"></a></li>
        <li id="three"><a href="memberso.php"><img src="buttons/members_.jpg" alt="members"></a></li>
        <li id="four"><a href="admin/index.php" target="_new"><img src="buttons/login_.jpg" alt="login"></a></li>
        <li id="five"><a href="imgmenu.html"><img src="buttons/contact_.jpg" alt="contact"></a></li>
    	<li id="six"><a href="gallery.php"><img src="buttons/gallery_.jpg" alt="gallery"></a></li>
        <li id="seven"><a href="downloads.php"><img src="buttons/downloads_.jpg" alt="downloads"></a></li>
        <li id="eight"><a href="rules.php"><img src="buttons/rules_.jpg" alt="rules"></a></li>
        <li id="nine"><a href="links.php"><img src="buttons/links_.jpg" alt="links"></a></li>
        </ul>
    </div>
    So, it is very simple: when the mouse is over any li elements it hidden the image and shows the background image with this div#navigation a:hover img{visibility: hidden}
    In order to solve the stupid bug in IE that show a white space beetween the li elements of a UL list, i used this trick founded on the net div#navigation li{display:inline;margin:0;padding:0}

    So it works perfectly under IE but when i try with FireFox,it not shows the background image!
    If i cut the "display:inline" from here
    div#navigation li{display:inline;margin:0;padding:0} it work on firefox, but the menu is showed with a large white space beetween each list item (each image) on IE6...
    How to solve it?!?
    There is some solution or i have to sniff the browser type and get the right .css for it!?!?!
    Sorry for my bad english,
    thank you in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Theres a few things you can do.

    First you could just give ie the style that it needs.
    Code:
    div#navigation li{margin:0;padding:0}
    * html div#navigation {display:inline}/* only ie will get this*/
    Or you could try adding a space before the closing anchor which for some strange reason often cures the problem.
    Code:
    <li id="one"><a href="newss.php"><img src="buttons/home_.jpg" alt="home page"> </a></li>
    There is one other thing to try and that is closing the whitespace in the html before the closing between the closing list item and the opening list item

    Code:
    </li><li>
    One of those should sort your problem with any luck.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Rome
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much man, the first trick work like a charm!
    So, may i ask you more: how about any links or tutorials about this problem , or any links about differences about different interpretation of css/html by browsers!?
    thank you again

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

    You will find some info about browser problems here (but not explicitly about the above problem).

    http://www.positioniseverything.net/

    http://www.thenoodleincident.com/tut...css/index.html

    Paul


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
  •