Hallo Freunde des CSS,
ich habe folgendes Script:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--
#box1 {
position: absolute;
left: 200px;
top: 75px;
width: 200px;
z-index: 4;
border-left: 1px solid #FFFFFF;
}
a.link2 {
color: #000000;
font-size: 10px;
text-decoration: none;
display:block;
padding-top: 8px;
padding-left: 20px;
padding-bottom: 8px;
width: 200px;
border-bottom: 1px solid #FFFFFF;
background-color:#CCCCCC;
}
a.link2:hover {
color: #000000;
font-size: 10px;
text-decoration: none;
background-color: #010d80;
display:block;
padding-top: 8px;
padding-left: 20px;
padding-bottom: 8px;
width:200px;
border-bottom: 1px solid #FFFFFF;
background-color:#FFFFFF;
}
-->
</style>
</head>
<body>
<div id="box1">
<a href="#" class="link2">Blindtext</a>
<a href="#" class="link2">Blindtext</a>
<a href="#" class="link2">Blindtext</a>
<a href="#" class="link2">Blindtext</a>
</div>
</body>
</html>
Ich möchte, dass die Buttons alles 200 Pixel breit sind.
Bei Opera & IE funktioniert das auch. Beim Firefox werden
die Buttons 220 Pixel lang. Das padding-left: 20px; macht die
Box länger. Was muss ich im Script anpassen,
damit es im Firefox auch 200 Pixel breit ist.
Es soll bei allen drei Browser gleiche Breite und Höhe der Bunttons anzeigen.
Gruß an alle CSS Profis