Horizontal Menu Help

Hey there,

I’ve got the following menu to style:


This is the HTML


<div id="main_menu">
	<ul>
		<li class="first"><a href="#">HOME</a></li>
		<li><a href="#">TANDEM</a></li>
		<li><a href="#">BOOKINGS</a></li>
		<li><a href="#">PHOTOS/DVD</a></li>
		<li><a href="#">QUESTIONS</a></li>
		<li><a href="#">CONTACT</a></li>
		<li><a href="#">TEAM</a></li>
	</ul>
</div>

This is the CSS


#main_menu {
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 22px;
}
#main_menu ul {
	list-style-type: disc;
	list-style-position: inside;
	color: #B2B2B2;
	padding-left: 0px;
}
#main_menu ul li {
	float: left;
	padding-right: 10px;
}
#main_menu ul li.first {
	list-style-type: none;
}
#main_menu li a {
	padding: 0 0 3px 0;
	text-decoration: none;
	color: black;
}
#main_menu li a:hover {
	background: url(../images/red-underscore.png) no-repeat bottom center;
}

The problem
I’m using @font-face for the menu text and I can get it looking pretty good BUT the separating DISC increases in size when I increase the font size. Any ideas would be appreciated.

Firefox, Chrome and Safari play nice but the DISCS are too big

IE 8 just sucks.

I’m thinking I might have to use CSS sprites but that’s not too accessibility friendly is it?

Increasing the font size of the anchor and not the div should do it.

Hi,

IE8 has always rendered it’s bullets small like that.

For x-browser consistency I would use a background image for the bullet. Just apply the BG image to the LI, pad out the left side where that image would go and you can use background-position to fine tune it.

Agreed, a simple background image is usually the best approach, and it’s just as accessible.

Hi Rayzur,

Yes thanks, that’s what ended up doing, I just didn’t take the time to write it here yet.

Cheers for the input and help!

Final HTML


<div id="main_menu">
	<ul>
		<li><a href="#">HOME</a></li>
		<li><a href="#">TANDEM</a></li>
		<li><a href="#">BOOKINGS</a></li>
		<li><a href="#">PHOTOS/DVD</a></li>
		<li><a href="#">QUESTIONS</a></li>
		<li><a href="#">CONTACT</a></li>
		<li class="last"><a href="#">TEAM</a></li>
	</ul>
</div>

CSS


#main_menu {
	font-family: 'Yanone Kaffeesatz', arial, serif;
	font-size: 22px;
}
#main_menu ul {
	list-style-type: none;
	list-style-position: inside;
	color: #B2B2B2;
	padding-left: 0px;
}
#main_menu ul li {
	float: left;
	padding-right: 15px;
	padding-left: 10px;
	background: url(../images/bullet.png) center right no-repeat;
}
#main_menu ul li.last {
	background: none;
	padding-right: 0px;
}
#main_menu li a {
	padding: 0 0 3px 0;
	text-decoration: none;
	color: black;
}
#main_menu li a:hover {
	background: url(../images/red-underscore.png) no-repeat bottom center;
}

The result:

It looks good in all browsers except for Firefox 4 the bullets don’t look really evenly spaced as seen in the screenshot but it’ll have to do for now.

You could make the bullet a graphic, ( displayed as the BG of the LI) that will keep their size constant. The other solution would be relative sizing… which will take some trial and error.

.rule LI { font-size: the em/% amount that makes the bullet the size you want)
.rule LI a { font-size: the % amount that makes the set text the size you want)

for example…
.rule li { font-size: .25em} /* this means that the size of the bullet is about 1/4 from its base container /
.rule li a { font-size: 400%} /
in turn, the menu text is 4 times as lage as the bullets. proportions may vary, of course */

It looks good in all browsers except for Firefox 4
I wouldn’t attempt to fix it just yet as FF4 is still a beta version. I’ve heard rumors of it being launched very soon but not sure what the date is since it has been postponed a couple of times already.

Looking at your code, you could try using numeric values instead of keywords though and see if that makes a difference.


#main_menu ul li {
    float: left;
    [COLOR=Blue]padding: 0 15px 0 10px;[/COLOR]
    background: url(../images/bullet.png)  no-repeat [COLOR=Blue]100% 50%[/COLOR];
}

You might consider getting rid of that wrapping div too, it’s not doing anything that the UL itself couldn’t do.
Just apply the ID directly to the UL and style it accordingly. :wink: