webForumDet fria alternativet

Får underlines från textlänkar på css-meny

HTML & CSS

2 svar · 508 visningar · startad av knolpak

Medlem sedan mars 20092 inlägg
Frågan#1

Tjena!

Jag har en layout som bla består av en listmeny och bland annat en helt vanlig enkel kod för "border-underlines" på textlänkar (hover osv) Problemet är att jag får samma underline från textlänkarna på min meny.

Textlänkarna:

a:link { text-decoration: none; border-bottom: 0.0625em dotted #808080; color:#333}
a:visited { text-decoration: none; border-bottom: 0.0625em dotted #808080; color:#333}
a:active { text-decoration: none; border-bottom: 0.0625em dotted #808080; color:#333}
a:hover { text-decoration: none; border-bottom: 0.0625em solid #808080; color:#333}

Menyn:

#nav {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}

			/* I-MoFo-E */
			#nav {
				/* IE<7 */
				_height: 1%;

				/* IE7 */
				+display: inline-block;
			}

			#nav:after {
				content: ".";
				display: block;
				clear: both;
				height: 0;
				visibility: hidden;
			}

				#nav li {
					background: url(grafik/topmenu_bg.gif) repeat-x left top;
					float: left;
				}

					#nav li a {
						display: block;
						padding: 6px 10px 6px 15px;
						font-family:Arial, Helvetica, sans-serif;
						font-size: 0.75em;
						font-weight:bold;
						text-transform: uppercase;
						text-decoration: none;
						color: #000;

						outline: 0;
					}

					/* I-MoFo-E */
					#nav li a {
						_width: 1%;
						_white-space: nowrap;
					}
				
				#nav li:hover {
					background-position: left -28px;
				}
				
					#nav li:hover a {
						color: #000;
					}
				
				#nav li.selected, #nav li.selected:hover {
					background-position: left -28px;
				}
				
					#nav li.selected a, #nav li.selected:hover a {
						color: #fff;
					}

Containern för menyn (om det nu spelar någon roll):

#menu { 
	width: 62.5em;
	height: 1.75em;
	background-image:url(grafik/menu-bg.gif);
	text-align: left;
	float:left;
}

Och html:en för menyn:

<div id="menu">
<ul id="nav">
    <li class="selected"><a href="index.htm">Hem</a></li>
    <li><a href="bloggar.htm">Bloggar</a></li>
    <li><a href="om.htm">Om</a></li>
    <li><a href="recept.htm">Recept</a></li>
    <li><a href="forum.htm">Forum</a></li>
    <li><a href="minkost.htm">Min kost</a></li>
    <li><a href="minsida.htm">Min sida</a></li>
    <li><a href="webshop.htm">Webshop</a></li>
    <li><a href="events.htm">Events</a></li>
    <li style="margin-left:12.8125em;"><a href="hjalp.htm">Hjälp</a></li>
    <li><a href="omoss.htm">Om oss</a></li>
</ul>
</div>

Blir border-bottom även på min meny för att den includerar "a"? Hur löser jag då detta? IE måste väl ha "a" med för att klara hovern?

/Adde

Medlem sedan aug. 20068 090 inlägg
#2

Du måste ju skilja på textlänkar och menylänkar på något sätt i stilmallen. T.ex. kan du ju skriva

#menu a:link {bla bla bla}
#menu a:visited {bla bla bla}
#menu a:hover {bla bla bla}
#menu a:active {bla bla bla}

...för menylänkarna.
Kolla förresten ordningen på dom: link,visited, hover, active ska det vara för att vara säker på att det ska funka i alla läsare.

Medlem sedan mars 20092 inlägg
#3

Lysnade! Tackar!

254 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
119 ms — deklarationer (db)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)