Grow your CSS skills. Land your dream job.

Problem with Internet Explorer

  • # May 25, 2009 at 4:14 pm

    Hi,

    For some reason my design works fine in Safari and Firefox but doesn’t work in Internet Explorer – please could someone help me to correct this?

    http://www.i-web-solutions.org/virgo

    It’s the menu area – the rest I think is fine.

    Cheers,
    Steve

    # May 25, 2009 at 11:38 pm

    Your navigation bar has this CSS:

    Code:
    #nav li {
    border-right:1px double gray;
    display:inline;
    margin:0;
    [b]padding-bottom:20px;
    padding-top:20px;[/b]
    }

    #nav li a {
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    [b]padding:20px;[/b]
    text-transform:uppercase;
    }

    Notice the bolded paddings. This gives the Nav items a total of 40px of padding on top and bottom, and you only want 20.

    Use this code for #nav li a:

    Code:
    #nav li a {
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    [b]padding: 0 20px;[/b]
    text-transform:uppercase;
    }

    Enjoy,

    # May 26, 2009 at 2:07 pm

    Hi,

    Thanks for the quick reply. I’ve made the changes but now I’m presented with a new problem.

    The hover image for the list items now appear in the middle of the button when I hover over (picture of an arrow). I need this at the bottom of the button – how would I do that, I’ve tried all sorts of background-position stuff…

    Cheers,
    Steve

    # May 26, 2009 at 3:22 pm

    Ok, I’ve just been playing about with firebug and it should go something like this:

    Code:
    #nav {
    background:#2B80B6 url(images/menubg.jpg) repeat scroll 0 0;
    margin: 0 15px 30px;
    }

    #nav ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    }

    #nav li {
    background:transparent url(images/border.jpg) no-repeat scroll right center;
    display:inline;
    float:left;
    height:55px;
    margin:0;
    }

    #nav li a {
    color:#FFFFFF;
    display:block;
    font-size:14px;
    font-weight:bold;
    margin-top:20px;
    padding:0 20px 20px;
    text-transform:uppercase;
    }

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".