Results 1 to 4 of 4

Thread: Padding on hover works in FF but not IE

  1. #1
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Padding on hover works in FF but not IE

    Hi there

    I have set the hover of the menu to create padding to give the effect of growth and emphasis to each link. It works great in ff but will not expand in ie - please help this is driving me crazy!!

    The link - http://www.roundcloud.co.uk/index.html

    Here is my html:

    HTML Code:
    <div id="menu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Competition</a></li>
    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Customers</a></li>
    <li><a href="index.html">Partners</a></li>
    <li><a href="index.html">Contact</a></li>
    </ul>
    </div>
    and the css:

    Code:
    * {
    margin: 0px;
    padding: 0px;
    }
    
    html {
    height: 100%;
    margin-bottom: 1px;
    }
    
    body {
    width: 800px;
    margin: 0px auto 0px auto;
    font-family: georgia;
    font-size: 9pt;
    background-color: #000;
    color: #fff;
    text-align: justify;
    padding: 10px 0px 0px 0px;
    background-image: url("freshair.jpg");
    background-repeat: no-repeat;
    background-position: center;
    }
    
    /* MENU
    -------------------------------*/
    
    div#menu {
    }
    
    div#menu ul {
    width: 800px;
    font-size: 13pt;
    font-weight: bold;
    }
    
    div#menu li {
    padding: 5px 0px 5px 0px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: inline;
    float: left;
    width: 133px;
    text-align: center;
    }
    
    div#menu li a {
    text-decoration: none;
    color: #fff;
    }
    
    div#menu ul li a:hover {
    text-decoration: none;
    color: #0041c9;
    background-color: #fff;
    padding: 10px;
    font-weight: bold;
    border: 1px solid #0041c9;
    margin: 0px;
    }
    Last edited by Snookerman; 04-22-2009 at 08:07 AM. Reason: added [html] and [code] tags and added "Resolved" prefix

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Add this to your CSS code:
    Code:
    div#menu ul li a:hover {
    text-decoration: none;
    color: #0041c9;
    background-color: #fff;
    padding: 10px;
    font-weight: bold;
    border: 1px solid #0041c9;
    margin: 0px;
    position: relative;
    }
    Good luck!

  3. #3
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Snookerman - awesome, thank you. I will be posting on here from now on, I wasted hours, my talents are clearly limited.....

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome, glad to help!
    You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title.
    This will let other users know the problem has been solved.

    Good luck with your site!

  5. The Following User Says Thank You to Snookerman For This Useful Post:

    roadjan (03-30-2009)

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
  •