Eftersom det inte är några borders när man inte har musen över så kanske du borde göra så att det är borders även när man inte har musen över.
a.Sub {
border: 1px solid transparent;
}
Borde väl göra susen?
HTML & CSSur HTML, XHTML & CSS
15 svar · 369 visningar · startad av aleborg
Sitter med en meny men det vill sig inte som jag vill:
https://windows.kontrollpanelen.se/test/html/
menyn till vänster rör på sig vid "hover", så här ser klassen ut:
A.Sub:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
border-style:solid;
border-width:1px;
border-color:#999999;
background-color:#F2F7FF;
display: block;
width: 95%;
height: 100%;
}
hur får man menyobjekten att vara still?
Eftersom det inte är några borders när man inte har musen över så kanske du borde göra så att det är borders även när man inte har musen över.
a.Sub {
border: 1px solid transparent;
}
Borde väl göra susen?
Det är väl inte så konstigt ;)
Du lägger ju till en border vid hoover, och den kräver ju lite plats.
Lägg till border även på a.sub, fast "osynlig"(transparent)
hjälpte tyvärr inte :(
Det fungerar här i alla fall.
Är "a.sub" och "a.sub:hover" identiska frånsett border?
Saknas en "border-style:solid;" i "A.Sub:link"
Så här ser det ut nu:
.Sub {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
border-style:solid;
border-width:1px;
border-color:transparent;
background-color:transparent;
display: block;
width: 95%;
height: 100%;
}
A.Sub:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
border-style:solid;
border-width:1px;
border-color:transparent;
background-color:transparent;
display: block;
width: 95%;
height: 100%;
}
A.Sub:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
border-style:solid;
border-width:1px;
border-color:transparent;
background-color:transparent;
display: block;
width: 95%;
height: 100%;
}
A.Sub:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
border-style:solid;
border-width:1px;
border-color:#999999;
background-color:#F2F7FF;
display: block;
width: 95%;
height: 100%;
}
A.Sub:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
border-style:solid;
border-width:1px;
border-color:transparent;
background-color:#transparent;
display: block;
width: 95%;
height: 100%;
font-weight:bold;
}
och så här ser det ut nu:
https://windows.kontrollpanelen.se/test/html/
Funkar prima för mig. :)
(i Firefox)
Nu när jag kollade i IE så ser det riktigt annorlunda ut. Du borde ta en titt i Firefox, om du inte gjort det. Eller vise versa.
Ja, nu står dom still i moz åminstonde ;)
inte i IE6
nu finns border hela tiden runt :(
aleborg skrev:
nu finns border hela tiden runt :(
Ta en titt här.
r/ Men vaf*n. Länken strular. Validera din CSS så ser du felen. http://jigsaw.w3.org/css-validator/
Har inte med olika modes att göra då? (IE i "quirks" moz i "standard")
R: din css-fil innehåller även "<style type="text/css">
<!--
-->
</style>"
Onödigt (kan även störa(?)) tabort
Om jag vill ha border på hover men inte annars brukar jag istället för att sätta en border med samma färg som bakgrunden eller så öka min margin (eller lägga till margin) såhär:
a {
padding: 5px;
margin: 10px;
background #999;
}
a:hover {
margin: 9px;
border: 1px solid #000;
}
Det är ju mycket bättre än att sätta en "osynlig" border.
aleborg, utan att ha testat så har jag fixat till din css lite. Det här blir samma sak som det du skrev innan:
a.sub {/*.sub låg ska väl bara ligga på a-elementet? */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#000000;
text-decoration: none;
background-color: transparent;
display: block;
width: 95%;
height: 100%;
margin: 1px; /* håller plats åt bordern */
}
/* om man inte anger något för :link så blir det samma som man har satt på a.sub
samma sak gäller :visited, den ärvs från a.sub */
a.sub:hover {
border: 1px solid #999; /*sammandragning av de olika border-egenskaperna*/
background-color:#F2F7FF;
margin: 0px;
}
/*här räcker det att ange skillnaderna mot deklarationen av a.sub. Resten ärvs */
/*:active hade precis samma egenskaper som a.sub och behöver inte heller upprepas */
Hoppas att det fungerar.
[OT]
Hittade något annat roligt. :)
När man drar musen över "Change language" och sedan bort igen så växer den på höjden. Gör man det tillräckligt många ggr så blir den sketastor. :P
[/OT]