#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
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.
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.