HTML/CSS Spacing issue

mistercrabb · 19 Feb 2012 at 19:21

Hi,
Having a bit of a problem here. Basically I have a horizontal menu, evenly spaced with CSS. That's fine. The only problem is, there is too much space underneath it.

There's too much space between the links and the orange image below them.

Here's my HTML:

Code:

<ul class="navbar"> <!--Nav Bar-->
			<li><a href="./index.html">HOME</a></li>
			<li><a href="./about.html">ABOUT</a></li>
			<li><a href="./services.html">SERVICES</a></li>
			<li><a href="./order.html">ORDER</a></li>
			<li><a href="./contact.html">CONTACT</a></li>
			<li class="filler"></li>
		</ul>

CSS:

Code:

.navbar {
	text-align:justify;
	width: 770px;
	padding: 5px 40px 0;
}

.navbar li {
	display: inline-block;
	font-size: 1.2em;
	font-weight: 600;
}

.navbar .filler {
	width:100%;
    display: inline-block;
    height:0;
}

The site is using the reset CSS found at http://meyerweb.com/eric/tools/css/reset/ so all margins/padding should default to 0 (firebug confirms this, it just looks like <ul class="navbar"> is taller than what's inside it for some reason).

Any ideas?
It's not a margin on the image below as far as I can tell.
Changing font-size, font-weight, line-spacing does nothing.

EDIT: Commenting out <li class="filler"></li> fixes the vertical space but screws up the horizontal spacing. Grr.
EDIT2: Link to simplified version of the site: http://robertcrabb.co.uk/test/index.html

PrChaos · 19 Feb 2012 at 20:04

Forgive me for asking but why do you only have three values for padding in .navbar? Unless I've misinterpreted what youre trying to do, there should be four values.

First: Top padding
Second: Right padding
Third: Bottom padding
Fourth: Left padding.

AshScott · 19 Feb 2012 at 20:11

Hey there bud, can I have a link to the site please? will be easier to find a fix, thats all

also, a little side note, not all browser support inline-block. Try giving the <li> tags the inline sattribute, and the <a> tags the block attribute, so your css would be

Code:

.navbar li {
	display: inline;
	font-size: 1.2em;
	font-weight: 600;
}

.navbar li a {
        display: block;
}

Ash

Randomface74 · 19 Feb 2012 at 20:14

whatever filler is for, you can probably achieve it a different way

mistercrabb · 19 Feb 2012 at 20:51

PrChaos said:
Forgive me for asking but why do you only have three values for padding in .navbar? Unless I've misinterpreted what youre trying to do, there should be four values.

First: Top padding
Second: Right padding
Third: Bottom padding
Fourth: Left padding.

The middle value specifies padding for the right and left sides. I don't think that should be a problem..

AshScott said:
Hey there bud, can I have a link to the site please? will be easier to find a fix, thats all

Simplified version here: http://robertcrabb.co.uk/test/index.html

billysielu said:
whatever filler is for, you can probably achieve it a different way

It's required to spread the links evenly. I also tried the top answer from HERE but it has the same problem.

It seems like somewhere it's taking a whitespace and putting it right below the links, using the same font-size as the links.

AshScott · 19 Feb 2012 at 20:56

on the ul do margin-bottom: -15px;

Randomface74 · 19 Feb 2012 at 21:01

mistercrabb said:
It's required to spread the links evenly.

It isn't, we're talking about seperating content from presentation here, you absolutely don't put an empty list item in your content to satisfy some janky presentation elsewhere.

They're evenly spaced because you put 40px padding on them... not sure what you're getting at.

Randomface74 · 19 Feb 2012 at 21:07

Code:

<style>

* { margin:0;padding:0;font-family:verdana; }

ul{
 /**/
}

li {
	display: inline;
}

li a {
	background:#BBB;
	padding: 5px 40px 0;
	font-size: 1.2em;
	font-weight: 600;
}

li a:hover { background:#CCC; }

div { background:red; }

</style>

<ul>
	<li><a href="./index.html">HOME</a></li><!--
	--><li><a href="./about.html">ABOUT</a></li><!--
	--><li><a href="./services.html">SERVICES</a></li><!--
	--><li><a href="./order.html">ORDER</a></li><!--
	--><li><a href="./contact.html">CONTACT</a></li>
</ul>
		
<div>stuff underneath</div>

Tripnologist · 19 Feb 2012 at 23:11

Your li.filler is what is causing that space as it's collapsing underneath.

gord · 20 Feb 2012 at 09:13

AshScott said:
on the ul do margin-bottom: -15px;

I see you went with this solution, which in no offence to Ash, is probably the worst here. You don't need to use a negative margin. I also don't like the sound of filler. I think you're using it to evenly distribute your nav links, where you could just use fixed width anchors.

AshScott · 20 Feb 2012 at 19:42

Yeah it wasnt the best choice :/

mistercrabb · 21 Feb 2012 at 12:41

Thanks for the replies guys,
the idea was to have a .navbar class which automatically justifies it's links across the available width regardless of the number of links. Hence allowing me to re-use the navbar class wherever I want it, with whatever number of links I want (it would also make adding and removing links very easy).

billysielu said:
They're evenly spaced because you put 40px padding on them... not sure what you're getting at.

They don't have any padding at all, it's justified text. If I remove the width definitions from my CSS they spread evenly across the page.

Obviously my solution is pretty messy, does anyone have a better way of spreading the links out without using fixed-width anchors? Otherwise I'll probably just stick with the negative margin.

Tripnologist · 21 Feb 2012 at 14:05

There is no way of doing it without fixed width, or per nav padding without using a messy hack like you have. However, if you're deadset on doing it this way, you'd probably be better off doing it with javascript. The reason being that your method is not going to work in older browsers and there are far more people with older browsers than there are with js turned off.

mistercrabb · 21 Feb 2012 at 15:01

Tripnologist said:
There is no way of doing it without fixed width, or per nav padding without using a messy hack like you have. However, if you're deadset on doing it this way, you'd probably be better off doing it with javascript. The reason being that your method is not going to work in older browsers and there are far more people with older browsers than there are with js turned off.

Okay thanks, I hadn't really thought about older browsers yet! I'll probably switch to fixed-width anchors for a bit and try the javascript idea when I get round to it.