CSS - Runde Ecken - IE - Hintergrundfehler

ibeg · 10.02.2012, 22:05

Ich versuche gerade bei div-Containern runde Ecken hinzubekommen, ohne dabei auf Grafiken zurückgreifen zu müssen.

In so ziemlich jedem Browser wird das auch mittlerweile in CSS unterstützt

Code:

-moz-border-radius:20px;
-webkit-border-radius:20px; 
-khtml-border-radius:20px;
border-radius: 20px;

Nur wer tanzt mal wiedermal aus der Reihe und wird noch immer vom Großteil der Menschheit verwendet? Richtig... IE.

Auch für solche Leute soll es angemessen dargestellt werden, aber das is wohl ned so einfach.

Abhilfe sollte eine .htc Datei schaffen, die es auch dem IE ermöglicht, Ecken abzurunden. Die "beste" die ich gefunden habe gibts hier
http://code.google.com/p/curved-corn...s.htc&can=2&q=

im css dann noch

Code:

behavior: url(border-radius.htc);

hinzufügen und es sollte gehen.

Tut es zwar auch aber nun hab ich ein weiteres Problem.

Ein Hintergrundbild, dass nur ganz oben in einer Zeile wiederholt werden soll, wird damit auch nach unten wiederholt -.-
Hätte wer ne Idee, oder ne *.htc die besser funktioniert?

Hier mal das entsprechende css

Code:

.linkbox {
  background: url(../images/title_bg.png);
  background-repeat: repeat-x;

  background-color: #fffba4;
  
  width: 700px;
  
  border-left: 2px solid #ed9622;
  border-right: 2px solid #ed9622;
  border-bottom: 2px solid #ed9622;
  
  -moz-border-radius:20px;
  -webkit-border-radius:20px; 
  -khtml-border-radius:20px;
  border-radius: 20px; 
  
  behavior: url(border-radius.htc);
  
  padding-top: 6px;
  padding-left: 20px;
  padding-right: 20px;
   
  margin-bottom: 20px; 
}

nikosch · 10.02.2012, 22:07

Zitat:

Richtig... IE.

Den IE gibt es nicht. Es gibt den IE5.5, den IE6, 7, 8, … auf dem Mac, unter Windows (XP, Windows 7 …), auf Mobilplattformen…

ibeg · 10.02.2012, 22:15

Sry, hast recht.

Gestestet in IE 8 (Win 7)
Bei wem anderen wars glaub ich IE 7 (Vista)

Das htc File sollte ab IE 6 Unterstützen.

halskrause · 10.02.2012, 22:25

MS ist schon der Hammer. Jede Sch.. wird einem bei Microsoft aufgezwungen oder im Hintergrund automatisch installiert. Jedoch tun die das nicht mit deren neueren Browsern. IE 9 ist sehr gut gelungen. Man könnte fast sagen, dass MS mit dem Browser UpToDate ist.

Sieh es so: Was der Bauer nicht kennt... Die Leute, die IE <= 8 haben werden keine abgerundeten Ecken vermissen. Sogar auf Youtube sind die Ecken beim IE 8 nicht abgerundet. Bei anderen Browsern schon!.

ibeg · 10.02.2012, 22:39

Hab gerade gesehen dass IE 9 border-radius unterstützt.
Gut. Wer nicht UpToDate ist hat pech gehabt *g* Wäre aber trotzdem schön gewesen

eagle275 · 15.02.2012, 15:33

halskrause: das Problem ist in jedem Falle MS .. denn leider bekommt man den modernen IE9 und seinen designierten Nachfolger IE10 NICHT mehr für Win XP, das besonders in Firmen immer noch das am häufigsten eingesetzte Windows ist. Meine Firma wird irgendwann 2013 wohl komplett von WinXP auf Win7 gehen und Vista überspringen, bis dahin darf ich mich auch mit IE 8 (würg) anfreunden, denn pünktlich mit der Freigabe für IE 8 wird leider Firefox verboten werden....

Solu · 15.02.2012, 16:03

Zitat:

denn pünktlich mit der Freigabe für IE 8 wird leider Firefox verboten werden....

Warum das?... Bin neugierig

drsoong · 15.02.2012, 17:39

Hatte zu dem Thema vor kurzem auch schon mal gepostet. http://www.php.de/html-usability-und...ie-lt-9-a.html (border-radius in ie lt 9) Da ist auch nicht viel mehr dabei rum gekommen, als dass IE < 9 User eben Pech haben. Ist inzwischen auch meine Meinung.

lucloef · 15.02.2012, 18:25

Guten Tag,

ich habe ein Input type="text", welches ich per CSS definiert habe.

HTML

PHP-Code:

 
  <input type="text" name="link" value="<?php echo $input_text; ?>" class="input_text" />

CSS

PHP-Code:

  input.input_text{

width:285px;

height:39px;

background-image:url('../images/input_text.png');

background-repeat:no-repeat;

border:0;

color:#b0b0b0;

outline: 0 none;

text-align:center;

padding-right:5px;

padding-left:5px;

}

Leider zeigt er mir an den Kanten weiße Hintergrundfarbe an. Ich habe das Problem schon einmal gelöst, aber weiß nicht mehr wie -.-

Beispiel:

Vielen Dank für Hilfe!

nikosch · 15.02.2012, 18:32

Das wird dann wohl so in deinem Bild sein.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Regulärer Ausdruck und runde Klammern	HSFighter	PHP Einsteiger	4	30.12.2011 17:20
Farbe von Abgerundeten Ecken mit transparenten Hintergrund ändern	Hoffi	PHP Einsteiger	22	30.08.2011 12:12
[Erledigt] html-code für runde Anführungszeichen	Der Gamer	PHP Tipps 2010	10	25.07.2010 19:07
Runde Ecken mit CSS	dh1sbg	HTML, Usability und Barrierefreiheit	4	17.08.2009 14:40
Welche CSS-Methode für abgerundete Ecken?	Fabse	HTML, Usability und Barrierefreiheit	8	02.10.2008 22:51
Need Help, wer kennt wen über welchen ecken? wie realisiern?	mysteryxxx	PHP Tipps 2008	18	23.09.2008 19:32
[Erledigt] Transparente Runde Ecken bei Thumbnial realisieren	tomtaz	PHP Tipps 2008	3	08.07.2008 01:20
class für bilder mit runden ecken	kid01	PHP Tipps 2008	1	03.03.2008 08:35
Rahmen mit runden Ecken	andrew22	HTML, Usability und Barrierefreiheit	2	06.04.2006 14:13
[fpdf] runde ecken mit hintergrundfarbe		PHP Tipps 2007	2	19.11.2005 11:54
[Erledigt] Nervige Striche beim IE (DIV mit runden Ecken)		HTML, Usability und Barrierefreiheit	9	03.10.2005 17:31
Bilder ohne ecken	Freeaak	HTML, Usability und Barrierefreiheit	3	17.07.2005 12:19
Der Profi frägt mal selbst -> abgerundete Ecken?!	suendesizer	HTML, Usability und Barrierefreiheit	7	18.01.2005 09:57
[Erledigt] runde Ecken?		HTML, Usability und Barrierefreiheit	3	01.09.2004 18:30

10.02.2012, 22:05
ibeg Erfahrener Benutzer Registriert seit: 18.04.2009 Beiträge: 126	CSS - Runde Ecken - IE - Hintergrundfehler Ich versuche gerade bei div-Containern runde Ecken hinzubekommen, ohne dabei auf Grafiken zurückgreifen zu müssen. In so ziemlich jedem Browser wird das auch mittlerweile in CSS unterstützt Code: -moz-border-radius:20px; -webkit-border-radius:20px; -khtml-border-radius:20px; border-radius: 20px; Nur wer tanzt mal wiedermal aus der Reihe und wird noch immer vom Großteil der Menschheit verwendet? Richtig... IE. Auch für solche Leute soll es angemessen dargestellt werden, aber das is wohl ned so einfach. Abhilfe sollte eine .htc Datei schaffen, die es auch dem IE ermöglicht, Ecken abzurunden. Die "beste" die ich gefunden habe gibts hier http://code.google.com/p/curved-corn...s.htc&can=2&q= im css dann noch Code: behavior: url(border-radius.htc); hinzufügen und es sollte gehen. Tut es zwar auch aber nun hab ich ein weiteres Problem. Ein Hintergrundbild, dass nur ganz oben in einer Zeile wiederholt werden soll, wird damit auch nach unten wiederholt -.- Hätte wer ne Idee, oder ne *.htc die besser funktioniert? Hier mal das entsprechende css Code: .linkbox { background: url(../images/title_bg.png); background-repeat: repeat-x; background-color: #fffba4; width: 700px; border-left: 2px solid #ed9622; border-right: 2px solid #ed9622; border-bottom: 2px solid #ed9622; -moz-border-radius:20px; -webkit-border-radius:20px; -khtml-border-radius:20px; border-radius: 20px; behavior: url(border-radius.htc); padding-top: 6px; padding-left: 20px; padding-right: 20px; margin-bottom: 20px; }


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.02.2012, 22:15
ibeg Erfahrener Benutzer Registriert seit: 18.04.2009 Beiträge: 126	Sry, hast recht. Gestestet in IE 8 (Win 7) Bei wem anderen wars glaub ich IE 7 (Vista) Das htc File sollte ab IE 6 Unterstützen.

10.02.2012, 22:25
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	MS ist schon der Hammer. Jede Sch.. wird einem bei Microsoft aufgezwungen oder im Hintergrund automatisch installiert. Jedoch tun die das nicht mit deren neueren Browsern. IE 9 ist sehr gut gelungen. Man könnte fast sagen, dass MS mit dem Browser UpToDate ist. Sieh es so: Was der Bauer nicht kennt... Die Leute, die IE <= 8 haben werden keine abgerundeten Ecken vermissen. Sogar auf Youtube sind die Ecken beim IE 8 nicht abgerundet. Bei anderen Browsern schon!.

10.02.2012, 22:39
ibeg Erfahrener Benutzer Registriert seit: 18.04.2009 Beiträge: 126	Hab gerade gesehen dass IE 9 border-radius unterstützt. Gut. Wer nicht UpToDate ist hat pech gehabt g Wäre aber trotzdem schön gewesen

15.02.2012, 15:33
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	halskrause: das Problem ist in jedem Falle MS .. denn leider bekommt man den modernen IE9 und seinen designierten Nachfolger IE10 NICHT mehr für Win XP, das besonders in Firmen immer noch das am häufigsten eingesetzte Windows ist. Meine Firma wird irgendwann 2013 wohl komplett von WinXP auf Win7 gehen und Vista überspringen, bis dahin darf ich mich auch mit IE 8 (würg) anfreunden, denn pünktlich mit der Freigabe für IE 8 wird leider Firefox verboten werden.... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

15.02.2012, 17:39
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	Hatte zu dem Thema vor kurzem auch schon mal gepostet. http://www.php.de/html-usability-und...ie-lt-9-a.html (border-radius in ie lt 9) Da ist auch nicht viel mehr dabei rum gekommen, als dass IE < 9 User eben Pech haben. Ist inzwischen auch meine Meinung. __________________ Es ist schon alles gesagt. Nur noch nicht von allen.

15.02.2012, 18:25
lucloef Benutzer Registriert seit: 12.08.2011 Beiträge: 67 PHP-Kenntnisse: Fortgeschritten	CSS Input (Text,Image) = backgroundfehler! Guten Tag, ich habe ein Input type="text", welches ich per CSS definiert habe. HTML PHP-Code: `<input type="text" name="link" value="<?php echo $input_text; ?>" class="input_text" />` CSS PHP-Code: `input.input_text{ width:285px; height:39px; background-image:url('../images/input_text.png'); background-repeat:no-repeat; border:0; color:#b0b0b0; outline: 0 none; text-align:center; padding-right:5px; padding-left:5px; }` Leider zeigt er mir an den Kanten weiße Hintergrundfarbe an. Ich habe das Problem schon einmal gelöst, aber weiß nicht mehr wie -.- Beispiel: Vielen Dank für Hilfe!

15.02.2012, 18:32
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Das wird dann wohl so in deinem Bild sein. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --