Problem med implementering av CSS-meny

Jag bytte css-meny och denna jag använder mig nu är både enklare och verkar fungera bättre.

Dock har jag ett problem. Så här ser huvudkoden ut:

<div id="menu">
<ul class="nav" style="position: relative;">

<li><strong>Browsers</strong>
<ul>
<li><a href="http://mozilla.org/">Mozilla</a></li>
<li><a href="http://mozilla.org/products/firefox/">Firefox</a></li>
<li><a href="http://mozilla.org/products/camino/">Camino</a></li>
<li><a href="http://kmeleon.sourceforge.net/">K-meleon</a></li>
<li><a href="http://galeon.sourceforge.net/">Galeon</a></li>
<li><a href="http://netscape.com/">Netscape</a></li>
<li><a href="http://microsoft.com/">Internet Explorer</a></li>

<li><a href="http://opera.com/">Opera</a></li>
<li><a href="http://apple.com/safari/">Safari</a></li>
<li><a href="http://konqueror.org/">Konqueror</a></li>
</ul></li>

<li><strong>Browsers</strong>
<ul>
<li><a href="http://mozilla.org/">Mozilla</a></li>
<li><a href="http://mozilla.org/products/firefox/">Firefox</a></li>
<li><a href="http://mozilla.org/products/camino/">Camino</a></li>
<li><a href="http://kmeleon.sourceforge.net/">K-meleon</a></li>
<li><a href="http://galeon.sourceforge.net/">Galeon</a></li>
<li><a href="http://netscape.com/">Netscape</a></li>
<li><a href="http://microsoft.com/">Internet Explorer</a></li>

<li><a href="http://opera.com/">Opera</a></li>
<li><a href="http://apple.com/safari/">Safari</a></li>
<li><a href="http://konqueror.org/">Konqueror</a></li>
</ul></li>

</ul>
</div>

Så här css-koden ut:

/*Nav bar styles*/

ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}

ul.nav{
display: table;
}

ul.block{
width: 100%;
table-layout: fixed;
}

ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/

ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}

ul.nav li:hover>ul{
display : block;
}

.nav ul li a{
display: block;
padding: 2px 10px;
}

/*Menu styles*/

ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}

ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}

ul.nav,
.nav ul{
border: 1px solid #369;
}

.nav a{
text-decoration: none;
}

Nu till problemet. I den bifogade bilden ser man hur menyn ligger precis på kanten till det gråa och det vita. Menyn vill jag ska ligga helt och hållet i meny-diven (det gråa fältet) men den verkar ha hamnat lite på sniskan. Någon som vet vad som kan vara fel baserat på koden? :)

Nu hade jag precis "tweakat" iordning menyn i Firefox och började känna mig nöjd med integrationen i övriga sidan. Sedan var det som att bli avrättad när jag öppnade menyn och sidan i Internet Explorer. Då såg menyn plötsligt ut som 7 svåra år. Jag bli så förbannad att Microsoft inte ska klara av något som Firefox klarar betydligt bättre.

Nu kanske jag får skrota hela idén med menyn då 50 % av användarna kommer få se denna bedrövelse om jag väljer att ha den kvar. Ni kan se resultatet på den bifogade bilden!

Eftersom de css-baserade menyer som jag nu provat inte fungerar bra samtidigt i både IE och Firefox har jag tittat på ett alternativ som jag haft ögona på tidigare. Menyn är designad av projectseven.com och heter MenuMagic II. Någon som har erfarenhet av denna meny (se bifogad bild)? Är den värd de pengar den kostar?

Kolla på http://www.htmldog.com/articles/suckerfish/ och http://www.alistapart.com/articles/hybrid/ innan du slänger ut pengar på nåt.

Hur går det brorsan? Löser det sig med menyerna? :q

/J

Tibbling skrev:

Hur går det brorsan? Löser det sig med menyerna? :q
/J

Det går sådär x(

Vad är det specifikt i CSS-koden som gör att IE tolkar det hela så annorlunda?

Jag har verkligen kört fast :e Nästlande CSS-satser är verkligen inte min grej just nu. Det är rörigt värre i mitt huvud när jag försöker få till denna meny.

Det började bra med en meny (http://www.phoenity.com/newtedge/horizontal_nav/) som jag lyckades implementera. Sedan visade det sig dessvärre att den inte var kompatibel med IE :(

Nåväl...jag fick ett länktips av OlleBoop till htmldog.com där jag nu har försökt att få till ett menyexempel de har. Det fungerar väl relativt bra förutom att jag inte får till utseendet på den nya.

Jag har bifogat en bild av den tidigare och den nuvarande menyn (av Suckerfish) där man tydligt kan se skillnaderna i utseende.

Bifogar den senaste koden för html och css. Om någon har tips på vad som bör ändra i CSS-koden mottages det tacksamt eftersom jag själv gått bet! :stud

HTML:

<ul id="nav">

	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>
		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a>
				<ul>
					<li><a href="#">Belontia</a></li>
					<li><a href="#">Betta</a></li>
					<li><a href="#">Colisa</a></li>
					<li><a href="#">Macropodus</a></li>
					<li><a href="#">Malpulutta</a></li>
					<li><a href="#">Parosphromenus</a></li>
					<li><a href="#">Pseudosphromenus</a></li>
					<li><a href="#">Sphaerichthys</a></li>
					<li><a href="#">Trichogaster</a></li>
					<li><a href="#">Trichopsis</a></li>
				</ul>
			</li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>

		</ul>
	</li>
</ul>

CSS:

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
	font-weight: none;
	color: #000;
	text-decoration: none;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;	
	list-style-type: none; 
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #fff;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	border: solid 1px #00A0DB;
	background: #fff;
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

Lägesrapport: Äntligen börjar jag se ljuset i tunneln. Har fått hyffsad ordning på menyn. Har ett litet problem som framgår av den bifogade filen med röd pil.

Någon som vet hur man får menytexten att ligga dikt an mot vänsterkanten på ramen?

Kan du inte posta den kod du använder alt länka till sidan?