List navigation random balnk space?

[FaT3oYCG]

Hi, I am making a site for myself to hold my CV and relevant information on and I was doing fine until I happened to come accross this problem.

 

I have made a navigation which uses a list with the inline css property and i cant seem to get rid of some random blank space between the items, I have set all margins and padding to 0 to see if I could find it and I am now confused as I couldn't even locate the problematic section.

 

I have attatched an image of what I mean, I have placed black lines arround the random blank space and a red arrow pointing to one of the places where it happens (although it happens to all of the items).

 

Here is the relevant HTML:

            <div id="top-bar">
                <ul>
                    <li><a href="#">Item One</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">This is Item Three</a></li>
                    <li><a href="#">Four</a></li>
                    <li><a href="#">This is a long Item 5</a></li>
                </ul>
            </div>

 

This is the CSS for that section:

#top-bar {
    background: #8FD7FF;
    margin: 0 20px 0 20px;
    padding: 5px 10px 5px 10px;
}

#top-bar ul {
    list-style:none;
    margin: 0;
    padding: 0;
}

#top-bar ul li {
    display: inline;
}

#top-bar ul li a {
    padding: 5px;
    color: #000000;
    text-decoration:none;
}

#top-bar ul li a:hover, #top-bar ul li:active a:hover, #top-bar ul li:active a:visited {
    color: #000000;
    background: #AFE3FF;
}

 

Any help is appreciated this is actually driving me nuts now.

 

Thanks,

 

Craig.

 

[attachment deleted by admin]

[MikeDean89]

Hmm, I'm pretty sure you need to assign 'margin: 0; padding: 0' on the 'li' element too.

 

#top-bar ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

 

Been a while since I built menus though.

[FaT3oYCG]

Nope doesn't work which is why I was confused? any other ideas .

[FaT3oYCG]

O.K. it works like this:

 

		<div id="top-bar">
			<ul>
				<li><a href="#">Item One</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">This is Item Three</a></li>
				<li><a href="#">Four</a></li>
				<li><a href="#">This is a long Item 5</a></li>
			</ul>

			<div class="clear">
			</div>
		</div>

 

#top-bar {
background: #8FD7FF;
margin: 0 20px 0 20px;
padding: 5px 10px 5px 10px;
}

#top-bar ul {
margin: 0;
padding: 0;
list-style:none;
}

#top-bar ul li {
float: left;
}

#top-bar ul li a {
padding: 5px;
color: #000000;
text-decoration:none;
}

#top-bar ul li a:hover, #top-bar ul li:active a:hover, #top-bar ul li:active a:visited {
color: #000000;
background: #AFE3FF;
}

.clear {
clear: both;
}

 

But does anyone know of a less "hacky" way where you use the display inline element or some other method that does not require the clear div?

[dbrimlow]

The only way clearing works is if you have float issues. This shouldn't fix a non-floated list element.

 

You have a specificity issue with other tags/selects someplace that are conflicting and over-riding the li or a element.

 

Because, if you just copy/paste ONLY your css and html with no resets or other elements, it works fine.

 

You have other conflicts causing this which means you are letting your css get out of control.

 

The problem isn't with the #top-bar elements. There is a conflict with something else of a higher specificity.

 

You should try to find out what because this will come back to bite you later on.

 

Also, why are you using the li:active pseudo link? It will actually have an issue if used because the pseudo links associated are in the wrong order.

 

a or a:link and a:visited pseudo links should always precede the a:hover and a:active pseudo links.

Not doing so will cause problems between browsers. As general practice it is a good idea to live by the "LVHA" (LoVeHAte) rule to avoid hours of frustration some day.

a:link, a:visited, a:hover, a:active.

 

A much cleaner way to have an "active" page list menu item automatically use a different style when "on page", is to use a same named ID and class in the CSS, then use the ID in the body tag and the specific class in the li menu.

 

The example will use the same style as hover and visited when on the specific li class page (body id matches li class="three"):

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>list</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#top-bar {
    background: #8FD7FF;
    margin: 0 20px 0 20px;
    padding: 5px 10px 5px 10px;
}

#top-bar ul {
    list-style:none;
    margin: 0;
    padding: 0;
}

#top-bar li {
    display: inline;
}

#top-bar li a {
    padding: 5px;
    color: #000000;
    text-decoration:none;
}

#top-bar li a:hover,  #top-bar li a:active,
#one li.one a:link, #one li.one a:visited,
#two li.two a:link, #two li.two a:visited,
#three li.three a:link, #three li.three a:visited,
#four li.four a:link, #four li.four a:visited,
#five li.five a:link, #five li.five a:visited {
     color: #000000;
    background: #AFE3FF;
}
</style>
</head>
<body id="three">
<div id="top-bar">
                <ul>
                    <li class="one"><a href="#">Item One</a></li>
                    <li class="two"><a href="#">Item 2</a></li>
                    <li class="three"><a href="#">This is Item Three</a></li>
                    <li class="four"><a href="#">Four</a></li>
                    <li class="five"><a href="#">This is a long Item 5</a></li>
                </ul>
            </div>
</body>
</html>

 

This way, enter it once in the css and use the same exact menu for every page, all you have to do is specify the ID for the body of each menu item page.

[FaT3oYCG]

O.K. which code did you copy and paste? as I stated that the second set of code that I posted works as I have changed it but would preffer to keep the display inline property, if you read the second set of code I use the float left property with the display block property.

 

Another problem I would point out is that the first set of code still causes the same issue even when the code is on its own meaning it is not a problem with my other CSS and must be something to do with the "Relevant" section of CSS that I posted in the first post.

 

I would also point out that you informed me of the LoVe HAte rule which I had forgotten about since the last time I was making a web page yet you still did not use that rule in the code that you posted up.

 

I notice that the code that you posted does not address the issue at hand either and simply informs me how to do something completley different which I was going to do next as I am styling my site completley with css.

 

Thanks for you efforts to help though, it was appreciated even if I still have the same issue.

 

Any more suggestions?

[dbrimlow]

I didn't see what you meant by "random" spacing, because the html wasn't set to use an "on page" class.

 

This is why I used the original html (and kept the broken li:active because they were vestigial). I posted my response at the same time you did yours, saw the clear element and modifed my response.

 

But after seeing your reply, I realized by "random spacing" you actually meant the default browser text indenting of inline li elements.

 

Your solution of using a  float and clear was actually a very good (and common)  solution - but, yes, it is a very inelegant one because it adds that annoying extra clear div. I use this myself in one of my sites that I am modifying from a open template.

 

The other typical float clearing methods:

 

1. use a float to clear a float and the clearfix method (look it up) - both methods would require floating the #top_bar container to clear the li floats. Then you would need to use the clear class in any non-floated html tags to follow - like <p class="clear">this comes after the top-bar div and will clear the float</p>

 

2.  overflow:auto trick - instead of float, simply add "overflow:auto" to the main container #top_bar.  You can remove the extra clear div/tag class.  And all divs/tags before or after will clear.

But you would need to include hacks for IE6 and IE7 HasLayout "*html #top-bar {height:1%;}" and ":firstchild + html #top-bar {min-height:1px;} - in IE6 the hover and on page backgrounds will not fill the entire block.

 

Good luck.

 

 

[FaT3oYCG]

Ahh O.K. good information thanks, it seems that the method I am using now will be best then, thanks again for pointing that out.