8 replies [Last post]
Martagnan
Offline
Regular
uk
Last seen: 13 years 50 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

I have a CSS Menu List... for some reason I am getting a 1 pixel margin appearing between each <li>...</li>. I have checked, stripped back and even rebuilt my code and come to the conclusion that this must be a browser problem. Has anyone else experienced this?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

single pixel margin in menu list

This sounds very much like a css bug in the browser.

I know there is one that keeps adding a pixel in IE6 (I think it was IE6)

Go over to www.positioniseverything.net and look for the type of problem you describe. I am sure I have seen similar there.

As a good idea, if you post a sample url with the problem, AND tell us which browser(Drunk you have tested it in, that too would be good.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

single pixel margin in menu list

Yes, do you have the code... did you zero all margins and padding from both the <li> and the parent <ul>?

Could be the whitespace bug but I doubt it, this is normally more than 1 pixel.

The next sentence is true. The previous sentence is false. Discuss...

Martagnan
Offline
Regular
uk
Last seen: 13 years 50 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

single pix margin

hello - thanks for looking at this... the url is theoddies.com and its the menu on the left. CSS file is at theoddies.com/css/navigation.css

Cheers

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

single pixel margin in menu list

Hi

I know this is going to sound really odd, but have you tried taking the

BACKGROUND-COLOR: #087474;

out of the

#menu LI A

style and putting it in the

#navigation

style?

Coz I suspect the list has a structure of its own, without the color attribute it will be transparent.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

single pixel margin in menu list

I've had a crack at it... seems to be working now in IE6 (and Firefox):

http://pub.c-o2.net/pub/pub.htm

Although you'd given CSS rules for the #menu ul and #menu li a, you hadn't given any CSS rules to #menu li. I've added them in for you (see CSS code below). Chances are, since you hadn't styled the actual <li> elements they could have been acting unpredictably.

Here's the amended CSS you need to replace in your navigation.css file:

/* ----- Amended! ----- */

#menu ul 
	{
padding: 0;
margin: 0;
list-style-type: none;
text-align: left;
font: normal 12px/16px Arial, Helvetica, Sans-serif;
	}
div#menu li
	{
	padding: 0;
	margin: 0;
	width: 144px;
	background: #087474;
	}
#menu li a
	{
	display: block;
	color: #EEF7F7;
	text-decoration: none;
	padding: 0;
	margin: 0;
	width: 144px;
	background: #087474;
	padding: 31px 5px 5px 10px;
	}

/* ----- End amendments ----- */

(As I always seem to say), it could be tidier, but it works. Let me know if it's okay.

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

single pixel margin in menu list

By the way, your design looks nicer than the pub Wink (best pub web site this side of the North West!)

The next sentence is true. The previous sentence is false. Discuss...

Martagnan
Offline
Regular
uk
Last seen: 13 years 50 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

Thanks co2

Your fix seems to be ok co2, I tried it on my local server and will adjust the live site later this week - thanks very much for your help. If you get chance could you let me know where I was going wrong?

P.S. The exterior of the pub gives no clues to the lovely, homely, fireside, traditional interior Smile If your ever passing I owe you a beer!

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 23 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

single pixel margin in menu list

As I said above... To get a standard unordered list to work as a nice looking navigation link list (as you have done so well), you need to make sure the 'defaults' of standard <ul> and <li> HTML output are somewhat nullified.

As you are aware, a normal, non-styled <ul> and <li> will produce bullets, margins, and padding.

You had remove the bullets, margin and padding auto-generated by the <ul> tag, but hadn't removed the padding/margins from the <li> tags. Styling the lists links (as in your CSS 'li a'), will only style the link, not the <li> it's sitting in.

Hope that helps.

And yep, if I'm passing, I'll pop in for a jar! Wink

The next sentence is true. The previous sentence is false. Discuss...