KenchuMedlem sedan apr. 2004113 inlägg Tjo!
Sitter och arbetar lite på en sida. Jag har dock just stött på ett problem: Internet Explorer och Mozilla läser min CSS-fil på olika vis, vilket gör att min bild för knapparna expanderar (bilder kommer).
Här kan ni se skillnaden:
Den vänstra bilden visar hur det ser ut i internet explorer, i den högra mozilla.
Så vad har jag gjort då? Jo, se här:
a.link:link {
display: block;
width: 150px;
height: 25px;
padding: 5px 0px 0px 5px;
background-image: url(button.bmp);
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #E6AD00;
text-decoration: none;
}
Bilden i bakgrunden är 150*25pixlar. För att texten ovanpå bilden inte ska vara precis på kanten har jag satt en padding på toppen, och en på vänster sida, som ni ser. Vad som händer när jag gör detta är att hela rutan (display: block) växer med 5px i y-led och 5px i x-led i Mozilla. Hur skall man fixa det här? Kan man lösa det här med knappar på något annat vis?
Re: Knappar mha CSS, display: block. Hjälp!
Mozilla tillämpar W3Cs CSS box model, där padding läggs till angiven height/width, medan IE5/win tillämpar en äldre variant där padding dras från angiven height/width. Vilken variant IE6 och Opera7 använder beror på Doctypen.
Ett vanligt sätt att lösa det här är att visa olika CSS för IE jämfört med andra webbläsare, men man kan också kringå hela problemet tex så här:
div {
width: 150px;
height: 25px;
}
a {
display: block;
width: auto;
height: auto;
padding: 5px 0 0 5px;
}
</style>
</head>
<body>
<div><a href="">foo</a></div>
<div><a href="">foo</a></div>
KenchuMedlem sedan apr. 2004113 inlägg det blir problem fortfarande:
Skulle du kunna posta ett kodexempel eller ännu hellre en länk?
KenchuMedlem sedan apr. 2004113 inlägg HTML
<div><a class="link" href="?p=news.php&m=news">News</a></div>
CSS
div {
width: 150px;
height: 25px;
}
a.link:link {
display: block;
width: auto;
height: auto;
padding: 5px 0px 0px 5px;
background-image: url(button.bmp);
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #E6AD00;
text-decoration: none;
}
sätt background-image i div. För övrigt behöver du inte skriva 0px, det räcker med 0 ty noll är alltid noll :) Jag skulle även sätta vertical-align till middle och köra med margin-left: 5px; på a istället.
div {
background-image: url(button.bmp);
height: 25px;
vertical-align: middle;
width: 150px;
}
a.link:link {
color: #e6ad00;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
margin-left: 5px;
text-decoration: none;
}
KenchuMedlem sedan apr. 2004113 inlägg well, problemet med den "lösningen" är att knappen inte ändras när det blir mouse over. :( Har ju nämligen olika highlights/shadows för hover och active.
KenchuMedlem sedan apr. 2004113 inlägg Problemet löst på annat vis...
Tack för er hjälp.
