How can I eliminate phantom margins in my dropdown menu?


Tags: background-image,css-float,css

Problem :

I have a vertical drop-down menu that is working fairly well. I have one bug that I cannot get a handle on, though.

You can find my menu here: test Page

The menu works fine in internet explorer (except for a little drop on the first submenu, that I can live with (bonus points if you know what that's about), but in other browsers, my background flows from the submenu back to the main menu. Where the "margin" is coming from?

so far I've found that it has something to do with how I've styled my li:hover children

Potentially useful snippets from my CSS

ul#menu3{
display:block;
left:20px;
margin:0;
width:10em;
padding:0;
position:absolute;
list-style:none;
}
ul#menu3 li{
color:#000000;/*
float:left;*/
position:relative;
margin:0;/*
margin-bottom:-1px;*/
line-height:31px;
text-align:center;
width:10em;
padding:0;
font-weight:bold;
display:block;
vertical-align:middle;
background-image:url(../../../menu4/awmdata/button-tile.gif);
}
ul#menu3 li:hover ul{
text-align:center;
vertical-align:bottom;
background-image:url(../../../menu4/awmdata/button-tile.gif);
background-repeat:repeat;
left:auto;
margin-top:-31px;
}
ul#menu3 li ul{
position:absolute;
left:-999em;
margin-left:10em;
margin-top:-31px;
}
ul#menu3 li ul li{
color:#000000;
margin:0;
left:auto;
padding:0;
font-weight:bold;
}


Solution :

Stick this at the top of your styles.css

ul, li {
    margin: 0;
    padding: 0;
}

When using unordered lists for menu's it's always a good idea to remove the margin and padding so you have better control with your layout from the start


    CSS Howto..

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?

    Responsive portrait images, Hows & Dont's?

    how to get attribute value using selenium and css

    CSS/XHTML: Show div after a specific count of table rows

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    How do you have a hidden div appear and change sizes using css or jquery?

    how to edit the width of menu bar in dreamweaver

    How can I fix the footer to dynamically change with height of the grid sections as they increase?

    How do I get this HTML canvas animation to appear on top of my image?

    How to draw many diagonal lines[right hash lines] using css, html?

    how to make the images always in center

    How to make the background of my text larger?

    How to get rid of spaces with CSS

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How to understand this CSS inheritance (or override, selection)

    CSS InfoBox over all elements how to place? [closed]

    How to position the sharing buttons on upper-left corner of the game and not the view?

    How to resize all div images to a particular size?

    How to put padding on SPAN only when not empty

    How to elasticity of the char length in javascript or css? [duplicate]

    How to get parent DIV width and set child DIV width

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    How do you use CSS to make a group of images that flow over the edges of the browser window?

    How to make a div scroll able when window height is reached

    how to style this via css in Bootstrap

    How to set an html element's height as { 100% - 10em from bottom }

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?