Border-Bottom staat verkeerd.

[Breaky623]

Nou ik heb dus een Lavalamp menuutje (Met CSS + JS)
En mijn border bottom staat niet onder de tekst mar de rechtsonder.. dus niet goed.
Ik weet wel waar het aan licht maar ik krijg het niet opgelost.
Dus eerst even de website en voorbeeld code.

Voorbeeld: http://www.breaky.eu/123

CSS

#blob {
	border-bottom: 5px solid #e7c006;
	position: absolute;
	z-index : 1;
}

#menu {
	word-spacing: 50px;
	text-align: center;
}

#menu li {
	display: inline;
	margin: 0;
	padding: 0;
}

#menu li a {
	z-index: 2;
	text-decoration: none;
	font-family: CrackandBold, Arial;
	word-spacing: 50px;
	font-size: 28px;
	color: #000;	
}

JAVASCRIPT van Lavalamp menu
[JS](function($) {

$.fn.spasticNav = function(options) {

options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '',
easing : 'easeOutExpo'
}, options);

return this.each(function() {

var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;

$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);

blob = $('#blob', nav);

$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);

});


}); // end each

};

})(jQuery);[/JS]

Stukje html code van menu

<ul id="menu"> 
            <li id="selected"><a href="#">Home</a></li> 
            <li><a href="#">Info</a></li> 
            <li><a href="#">Results</a></li> 
            <li><a href="#">Members</a></li> 
            <li><a href="#">Contact</a></li> 
		</ul>

Nou het probleem ligt dus bij text-align: center; Als ik die weghaal is alles goed maar dan staat het menu niet gecentreert uiteraard. En ik wil niet gaan werken met margins denk ik, want dan krijg ik hem niet precies in het midden.

#menu {
	word-spacing: 50px;
	text-align: center;
}

Dus aan die text align center ligt het.. maar hoe kan ik het nu fixxen?

 

[csshunter]

Wat de oplossing kan zijn weet ik ook zo gauw niet, maar ik heb de volgende verschijnselen:

• In Chrome staan de lijntjes netjes onder de items.
• In Firefox-3.5, Opera-9.64 en Safari-5 staat bij de start het lijntje te rechts van Home, maar goed bij de andere menu-items. En nadat je op een ander item geweest bent, gaat het ook goed bij het Home-item!
• In IE7 gaat het systematisch fout: het lijntje pakt telkens de margin-right tot aan het volgende item mee.
• In FF-3.5 met de muis onbewogen op een item gaan staan: veroorzaakt om de seconde even 1cm naar links schieten van het lijntje, om meteen weer onder het item te gaan staan.
• In Safari-5 met de muis onbewogen op een item gaan staan: veroorzaakt na een seconde dat het lijntje onder Home gaat staan, en niet meer terugkomt.
• In Chrome met de muis onbewogen op een item gaan staan: veroorzaakt ook na een seconde dat het lijntje onder Home gaat staan, en niet meer terugkomt.
• In Opera-9.64 met de muis onbewogen op een item gaan staat: veroorzaakt niets, lijntje blijft er stil onder staan.
• In IE7 met de muis onbewogen op een item gaan staat: veroorzaakt ook niets, lijntje blijft er stil onder staan.

Kortom: een bonte variëteit aan verschillen... :shocked:
Het zou dus zomaar kunnen zijn, dat er zowel met het script als met de css wat zou moeten gebeuren.

Met vriendelijke groet,
CSShunter
____________
PS: O, de html-validator signaleert o.a. een aantal keren dezelfde <div id="text">. Misschien geeft die, in combinatie met de diverse jquery-scripts, de onstuimigheid van de functie "spasticNav()"?
(dat mag je wel zeggen! )