button abstand (padding oder border) im IE

[ev0lst]

Hallo zusammen,

ich habe mich schon damals mal damit beschäftigt, aber ich weiß einfach nicht mehr wie es ging oder wie ich es damals gemacht habe.

Es geht darum:

Ich habe einen Submit-Button mit CSS deklariert.

.submit
{
background-image:...
border:solid 1px #000;
usw...
}

Soweit wird die Gurke im FF und Opera richtig angezeigt, aber der IE (was sonst), macht den üblichen "inner-border", der einen Effekt erzeugt, als gäbe es zwei Border...

Mir geht es darum; dass ich den Button einfach mit dem BG und dem Border angezeigt bekomme ohne diesen Doppel-Effekt.

Kann mir da jemand helfen?

Vielen Dank!

 

[ZodiacXP]

Hast du im HTML beim Input.submit das Attribut type="image" gesetzt?

http://de.selfhtml.org/html/formulare/formularbuttons.htm#grafische

 

[ev0lst]

Ne, soll ja ein dynamisches Feld sein, also mit Value Attribute, damit ich den Text des Buttons ändern kann. Ist wie ein ganz normaler Button, nur halt dass er BG und Border haben soll. Das Problem ist leider auch nur im IE, wie immer

 

[ZodiacXP]

Ok. Abgesehen davon, dass ich border: 1px solid #000; schreiben würd seh ich nichts im moment. Aber die Reihenfolge ist ja egal.

Browserversion wär mal nett und / oder Screenshot vielleicht auch bisken HTML.

 

[ev0lst]

IE6.0.2

Weißt was ich meine, oder? Nervt so dermaßen, sitze schon wieder 3 Stunden am dem Problem

Sry, hier noch die Bilder. Siehst dann ja was ich meine.

Hier noch der CSS Kram:

.submit
	{
		background-image:url(./../images/button_bg.gif);
		background-position:top left;
		border-color:#0081ab;
		border-width:1px;
		border-style:solid;
		padding:2px 5px 2px 5px;
		font-weight:bold;
		color:#FFF;
		font-size:12px;
		font-family: Arial, verdana, arial, Times new roman;
		

	}

 

[ev0lst]

Das oben und links (der leichte Border) ist gewollt! Ich meine diesen miesen hellen Rahmen zwischen den beiden Borders...

Rechts die Grafik ist absolut TOP so, die linke ist eine Katastrophe!

 

[ZodiacXP]

Hab das ein paar mal rekonstruiert.
Bin schon soweit, das du die Farbe von diesem Rahmen mit background-color ändern kannst. Am besten am Ende von .submit:

background-color : #0081ab;
border : 1px solid #hintergrund-der-seite;

Speziell für den IE

EDIT - weitere Ideen:

<div style="float:left; background-color:#0081ab; padding : 1px; height : 18px;">
  <input style="line-height:16px;" />
</div>

oder:

input {
border : 1px solid #hintergrund-der-seite;
background-color: #0081ab;
outline : 1px solid #0081ab;
}

outline wird von IE nicht interpretiert.

 

[Maik]

Hi,

damit wir hier zu einem abschliessenden Ergebnis kommen, empfehle ich Euch beiden an dieser Stelle einfach den Artikel Styling form controls im Allgemeinen und das Demo Styled submit buttons im Speziellen.

mfg Maik