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.

Member Avatar for diafol

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

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.

Member Avatar for 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.

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...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.