K knolpak Medlem sedan mars 2009 2 inlägg Frågan 23 mars 2009 19:04 #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
Danne V Medlem sedan aug. 2006 8 090 inlägg 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.