Hallo,
wieder mal ärgere ich mich über Buttons
ich würde gern einfach Buttons haben die zumindest mal in allen Browsern gleich aussehen.
Hier mein html ausgangsmaterial wenn man so will
ich hätte mal versucht den Buttons einen hintergrund zu geben und einen Rahmen.
Pfeil bekommen sie einen Hintergrund mit einem Pfeil, aber das ist mir mal egal.
und hier mal mein css versuch.
mach ich grundlegend was falsch, gibts da schon wo Lösungen oder so?
wieder mal ärgere ich mich über Buttons
ich würde gern einfach Buttons haben die zumindest mal in allen Browsern gleich aussehen.
Hier mein html ausgangsmaterial wenn man so will
HTML:
<a class="button">Button</a>
<a class="button pfeil">Button</a>
<br/><br/>
<input class="button" type="submit" value="Button"/>
<input class="button pfeil" type="submit" value="Button"/>
<br/><br/>
<button class="button">Button</button>
<button class="button pfeil">Button</button>
ich hätte mal versucht den Buttons einen hintergrund zu geben und einen Rahmen.
Pfeil bekommen sie einen Hintergrund mit einem Pfeil, aber das ist mir mal egal.
und hier mal mein css versuch.
Code:
.button{
background: url("/button.png") repeat-x scroll 0 -1px #F5F5F5;
border: 1px solid #8e9295;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
height: 23px;
padding-left: 10px;
padding-right: 10px;
}
a.button{
padding-top: 4px;
padding-bottom: 4px;
line-height: 23px;
}
.pfeil{
background-position: right;
padding-right: 36px;
}
/* Target all Firefox */
@-moz-document url-prefix() {
.button{
padding-left: 6px;
padding-right: 6px;
}
a.button{
padding-left: 12px;
padding-bottom: 3px;
}
.pfeil{
padding-right: 31px;
}
}
/* Target IE 8 */
@media \0screen {
a.button{
padding-top: 3px;
padding-bottom: 3px;
}
}
/* Target IE 7 */
*+html .button{
padding-left: 0px;
padding-right: 0px;
}
*+html a.button{
padding-left: 12px;
padding-right: 12px;
padding-top: 3px;
padding-bottom: 3px;
background-position: 0 0;
}
*+html .button.pfeil{
background-position: right 0px;
padding-right: 13px;
}
*+html a.button.pfeil{
background-position: right 0px;
padding-right: 22px;
}
mach ich grundlegend was falsch, gibts da schon wo Lösungen oder so?