Question

I created the menu with css but in IE it shows with a problem.

Internet Explorer:

_{(source: picofile.com)}

Firefox:

_{(source: picofile.com)}

CSS:

<style>
.invertedshiftdown{
    padding: 0;
    width: 100%;
    border-top: 5px solid #D10000;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
}
.invertedshiftdown ul{
    float:right;
    margin:0;
    padding: 0;
    list-style: none;
}
.invertedshiftdown li{
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-transform:uppercase;
}
.invertedshiftdown a{
    float: left;
    display: block;font-size:11px;
    color: black;
    text-decoration: none;
    margin: 0 1px 0 0; 
    padding: 5px 10px 9px 10px; 
    background-color: white; 
}
.invertedshiftdown a:hover{
    background-color: #D10000; 
    padding-top: 9px;
    padding-bottom: 5px;
    color: white;
}
.invertedshiftdown .current a{
    background-color: #FF7400;
    padding-top: 9px; 
    padding-bottom: 5px;
    color: white;
}
</style>

HTML:

<div style="width:600px;height:30px;float:right;">
    <div class="invertedshiftdown">
        <ul>
            <li ><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
            <li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
            <li ><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
            <li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>
            <li><a href="http://www.dynamicdrive.com/style/" title="CSS">CSS</a></li>
            <li ><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
        l>
    </div>
</div>

How can I fix this?

Answer 1

Use css line-height instead of padding and it should solve your problems.