Knappar mha CSS, display: block. Hjälp!

7 svar · 435 visningar · startad av Kenchu 6 juli 2004

KenchuMedlem sedan apr. 2004113 inlägg

Trådstart6 juli 2004 22:15#1

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?

SlarvpelleMedlem sedan mars 200459 inlägg

6 juli 2004 22:54#2

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

7 juli 2004 00:01#3

det blir problem fortfarande:

SlarvpelleMedlem sedan mars 200459 inlägg

7 juli 2004 00:20#4

Skulle du kunna posta ett kodexempel eller ännu hellre en länk?

KenchuMedlem sedan apr. 2004113 inlägg

7 juli 2004 00:29#5

HTML

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;

}

CheguelinMedlem sedan juli 2003303 inlägg

7 juli 2004 10:03#6

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

7 juli 2004 15:37#7

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

7 juli 2004 17:08#8

Problemet löst på annat vis...
Tack för er hjälp.