Issue with an unwanted gap on horizontal navbar

[timbarden]

Hi all,

I have a little problem with a horizontal navbar I’m creating. I’ve cut my code down to the basic structure to illustrate the problem more simply.

Basically, the navbar is 100% wide, with 5 buttons each 20% wide, but I’m finding there is a very slight gap on the right-hand side of the last button at the end of the bar. Slowly resizing the browser makes the gap change size in steps, from thin to thick, thin, thick … if that makes sense?! Depending on the window size it can seem okay, but then resizing it a little makes the gap appears.

This page will hopefully demonstrate the problem (I’ve blackened the 5th button so the blue gap is highlighted clearly): http://www.tim-barden.co.uk/play/arses.php

My code may well be a complete mess, but any suggestions would be very much appreciated! Cheers!

HTML:

help


me


please


:)


gap to the right >

CSS:

#nav {

width: 100%;

background-color: #609be6;

list-style-type: none;

float: right;

}



#nav li a {

text-decoration: none;

font-family: Times;

font-size: 16px;

color: #3f6abf;

float: left;

width: 20%;

text-align: center;

padding: 18px 0 20px;

}



#nav li:nth-child(5) a {	/* so the problem is highlighted in this example */

background-color: #000;

}



#nav li:hover a {

color: #fff;

background-color: #f935d2;

}

[chrisburton]

@cuboid5 First, why are you floating #nav to the right?

Check this: http://jsfiddle.net/3BjSh

[timbarden]

Yeh, sorry, that was part of the original structure, which I simplified (clearly not enough!) for this example – I’ve realised I don’t need it actually.

Thanks for showing your rewritten code. The gap issue still exists though, and I’ve been wondering if it’s something to do with the browsers perhaps. Resizing the window slowly, it’s like the browser only responds every few pixels to making the nav buttons exactly 20% width. Am I making any sense?

[chrisburton]

Yeah I would say that’s the problem. It is trying to adjust 20% evenly for each anchor link across the nav.

[timbarden]

Mmm it’s a bit rubbish and frustrating isn’t it? I’m surprised this isn’t easily fixable, unless I’ve made a hash of constructing the navbar in the first place … I’m working with a completely fluid layout so I need my navbar to be flexible.

[TreeTopStudio]

With Firefox 6.02 on MacOS 10.5.8 – I’m not seeing the problem.

Unless you’ve fond a solution before I posted this comment…

[timbarden]

@TreeTopStudio, hi, yeh you’re right, Firefox seems able to cope with the adjusting, tried it in v5 too – all good!

But Chrome 15, Safari 5.1, and Opera 11.52 on Mac show up the gap for me. Mightily frustrating, especially if there is no workaround! It might not seem a huge deal, but in my actual navbar on the site (which is roughly 50% width of the page) it looks quite obvious and pretty sloppy (mmm, perhaps it is!).

Thanks for checking it out

[Author]

Posts