Absolute Positioning Issue with Navigation Bar

[ajwei810192]

Hi,

I have a snippet of CSS as follows:

#navbar {
    position: absolute;
    top: 75px;
    right: 4px;
    padding: 2px 0 2px 32px;
    white-space: nowrap;
    background: #629632;
}
#navbar ul {
    display:block;
    font-size:12px;
    height:1px;
    list-style:none;
    padding-bottom:1.3em;
}
#navbar a {
    display:block;
    text-decoration:none;
    color:#FFFFFF;
    font-size:12px;
    font-weight:bold;
    padding: 2px 0.5em 1px;
    width:8em;
}
#navbar a:hover {color:yellow;}
#navbar li {
    float:left;
    font-size:12px;
    width:8em;
    list-style-type:none;
}
#navbar li ul {display:none;font-size:12px;}
#navbar li:hover ul {
    position:absolute;
    display:block;
    width:8.01em;
    color:blue;
    font-size:12px;
}

Here is my HTML snippet:

<div id="navbar">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Me</a></li>
                    <li><a href="work.html">Work Samples</a></li>
                    <li><a href="mail.php">Contact Me</a></li>
                </ul>
            </div>

For some reason, when I look at the output on the browser, it looks like there is a huge gap between Home and About Me, and very little spacing between Work Samples and Contact Me. I tried padding-left, padding-right, but they don't seem to work. Could anyone please give me some suggestion on what I might have missed here so I could keep the same spacing between the 4 elements?

Thanks for your help.

[diafol]

Really need to use absolute? Want to post your url? Perhaps that'll help.

[ajwei810192]

Really need to use absolute? Want to post your url? Perhaps that'll help.

Hi,

I somehow did a work around by taking the width out in my elements, so it looks like now it is working. Thanks.

[diafol]

OK - although you seem to have solved it yourself, mark it solved so that others don't waste their time fixing the fixed. Cheers.

[Jansz36]

I had similar problem. Finally I have added inside a Div layer table column(s) which make sure any image or text stay as you have positioned. Hope this helps for other...