[Erledigt] width: auto führt zu fehlerhafter Darstellung im IE6

eagle275 · 12.11.2010, 10:24

so... da ich leider dieses Urviech von Browser noch unterstützen muss

also meine Firma hat sich nen neuen StyleGuide einfallen lassen, den ich schrittweise nun umsetze. Im Firefox komm ich gut voran.... leider macht der IE 6 Probleme.

Und zwar gibts neue Vorgaben für submits und Buttons... die sollen - im Gegensatz zu fester Breite beim alten Guide nun eine fließende Breite haben, die sich am Button-Text / Inhalt orientiert.

mein CSS dazu sieht erstmal so aus :

HTML-Code:

input.topbutton  {
		border : 0px none transparent;
		margin-left: 0px;
		margin-bottom: 3px;
		padding-left: 10px;
		padding-right: 10px;
		line-height:18px;
		color: #FFF;
		width: auto;
		font-family: Arial, sans-serif;
		font-weight: bold;
		font-size: 12px;
		height: 22px;
		background: url(../img/button_back.PNG) repeat-x top;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
	} 
input.topbutton:hover  {
		border : 0px none transparent;
		margin-left: 0px;
		margin-bottom: 3px;
		padding-left: 10px;
		padding-right: 10px;
		line-height:18px;
		color: #FFF;
		width: auto;
		font-family: Arial, sans-serif;
		font-weight: bold;
		font-size: 12px;
		height: 22px;
		background: url(../img/button_hover_back.PNG) repeat-x top;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
	}

- wie ersichtlich wird, soll ich gleich noch nen Hover-Effekt dazu "zaubern" und runde Ecken - und ich weiß, dass der IE wohl die letzten beiden Sachen nicht kann ...

Aber warum setzt er das width: auto; so dämlich um:

ich habe Buttons auf meiner Seite, die nur ein 22x22 px Bild darstellen - hier macht er korrekt die eigentliche Fläche von 22px+10px padding auf beiden Seiten.

Bei den anderen Buttons aber, die Text enthalten werden die viel größer als im Firefox. Vor allem, wenn der Text länger wird, verbreitert sich der Button immer mehr... kann das sein, dass der IE hier mit irgendwelchen fixen Breiten pro Zeichen rechnet und gar nicht "nachschaut", wie viel Platz er eigentlich braucht für die Zeichen bei der vorgegebenen Schriftart ? Im Firefox sehen alle Buttons aus, wie gewünscht - egal wie breit der Text ist, Textbreite + 10px padding links und rechts und gut ist

Habt ihr irgendwelche Tipps, wie ich dem IE das korrekt beibiegen kann? weglassen kann ich width leider nicht, da es für alle input Tags eine allgemeine Stylevorgabe gibt, die ihnen eine feste Breite zuweist, die darf keinesfalls beim Button ankommen...

oder muss ich wirklich alle anderen inputs mit ner Klasse umstylen, nur dies zu erreichen?

Edit .. vielleicht zur Veranschaulichung;

Code:

FF : ( B ), ( Button ), ( Button mit langem Text )
IE6: | B |, |  Button  |, |    Button mit langem Text    |

mimomamu · 12.11.2010, 13:12

width wird nicht vererbt und auto ist die Standardeinstellung. Do solltest also auch ohne explizite width-Eigenschaft auskommen. Aber (ich war wirklich erstaunt dass es dazu einen Wikipedi-Artikel gibt) Internet Explorer box model bug.

eagle275 · 12.11.2010, 13:21

nicht vererbt - aber ein

input {
width: 290px;
}

gilt auch für <input type="submit" - und die Buttons sollen nunmal nicht 300 Pixel groß werden

außerdem ist doch der wesentliche Teil des Box-Model-Bugs dem IE5.5 und IE 5 geschuldet... der IE 6 macht es ja schon weitgehend richtig - außer, dass er da verschiedene kleine Bugs einstreut (3 Pixel-Jog , Bleeding Fieldset ......)

ChrisB · 12.11.2010, 14:34

Wenn du ein Online-Beispiel bereitstellen würdest, würde ich mir das mal anschauen - aber mir selbst was dazu zu basteln, keine Lust.

eagle275 · 12.11.2010, 14:40

versuch ich heute abend - der server bei meinem Arbeitgeber ist von außen jedenfalls "dicht"

Heiko R · 12.11.2010, 14:55

Setz mal ein overflow:visible; mit in deinen Style.
Also width:auto; plus ein overflow:visible;

eagle275 · 12.11.2010, 15:10

danke . das tut ....

nun passen zwar noch einige Abstände nicht .. aber da ärgert mich wieder der 3 pixel jog - damit komm ich klar

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
2 CSS-Probleme	jeanorwin	HTML, Usability und Barrierefreiheit	3	18.10.2010 17:27
Internet Explorer stellt CSS falsch dar	dorky	HTML, Usability und Barrierefreiheit	16	19.08.2009 13:03
Kirchenwebsite - Wie Header & Footer includieren	Stretch30	PHP Tipps 2009	11	13.06.2009 14:05
[Erledigt] Transparente Runde Ecken bei Thumbnial realisieren	tomtaz	PHP Tipps 2008	3	08.07.2008 01:20
css-problem: width	mc_hammer	HTML, Usability und Barrierefreiheit	14	15.03.2007 23:14

12.11.2010, 10:24
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	[Erledigt] width: auto führt zu fehlerhafter Darstellung im IE6 so... da ich leider dieses Urviech von Browser noch unterstützen muss also meine Firma hat sich nen neuen StyleGuide einfallen lassen, den ich schrittweise nun umsetze. Im Firefox komm ich gut voran.... leider macht der IE 6 Probleme. Und zwar gibts neue Vorgaben für submits und Buttons... die sollen - im Gegensatz zu fester Breite beim alten Guide nun eine fließende Breite haben, die sich am Button-Text / Inhalt orientiert. mein CSS dazu sieht erstmal so aus : HTML-Code: input.topbutton { border : 0px none transparent; margin-left: 0px; margin-bottom: 3px; padding-left: 10px; padding-right: 10px; line-height:18px; color: #FFF; width: auto; font-family: Arial, sans-serif; font-weight: bold; font-size: 12px; height: 22px; background: url(../img/button_back.PNG) repeat-x top; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } input.topbutton:hover { border : 0px none transparent; margin-left: 0px; margin-bottom: 3px; padding-left: 10px; padding-right: 10px; line-height:18px; color: #FFF; width: auto; font-family: Arial, sans-serif; font-weight: bold; font-size: 12px; height: 22px; background: url(../img/button_hover_back.PNG) repeat-x top; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } - wie ersichtlich wird, soll ich gleich noch nen Hover-Effekt dazu "zaubern" und runde Ecken - und ich weiß, dass der IE wohl die letzten beiden Sachen nicht kann ... Aber warum setzt er das width: auto; so dämlich um: ich habe Buttons auf meiner Seite, die nur ein 22x22 px Bild darstellen - hier macht er korrekt die eigentliche Fläche von 22px+10px padding auf beiden Seiten. Bei den anderen Buttons aber, die Text enthalten werden die viel größer als im Firefox. Vor allem, wenn der Text länger wird, verbreitert sich der Button immer mehr... kann das sein, dass der IE hier mit irgendwelchen fixen Breiten pro Zeichen rechnet und gar nicht "nachschaut", wie viel Platz er eigentlich braucht für die Zeichen bei der vorgegebenen Schriftart ? Im Firefox sehen alle Buttons aus, wie gewünscht - egal wie breit der Text ist, Textbreite + 10px padding links und rechts und gut ist Habt ihr irgendwelche Tipps, wie ich dem IE das korrekt beibiegen kann? weglassen kann ich width leider nicht, da es für alle input Tags eine allgemeine Stylevorgabe gibt, die ihnen eine feste Breite zuweist, die darf keinesfalls beim Button ankommen... oder muss ich wirklich alle anderen inputs mit ner Klasse umstylen, nur dies zu erreichen? Edit .. vielleicht zur Veranschaulichung; Code: FF : ( B ), ( Button ), ( Button mit langem Text ) IE6: \| B \|, \| Button \|, \| Button mit langem Text \| __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste Geändert von eagle275 (12.11.2010 um 11:02 Uhr).


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

12.11.2010, 13:12
mimomamu Erfahrener Benutzer Registriert seit: 23.08.2010 Beiträge: 495 PHP-Kenntnisse: Fortgeschritten	width wird nicht vererbt und auto ist die Standardeinstellung. Do solltest also auch ohne explizite width-Eigenschaft auskommen. Aber (ich war wirklich erstaunt dass es dazu einen Wikipedi-Artikel gibt) Internet Explorer box model bug. __________________ Meinungen, die ich geäußert habe, sind nicht notwendigerweise meine eigenen. Abweichungen von der deutschen Rechtschreibung unterliegen dem Urheberrecht, dürfen aber unter den Bedingungen von verwendet werden

12.11.2010, 13:21
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	nicht vererbt - aber ein input { width: 290px; } gilt auch für <input type="submit" - und die Buttons sollen nunmal nicht 300 Pixel groß werden außerdem ist doch der wesentliche Teil des Box-Model-Bugs dem IE5.5 und IE 5 geschuldet... der IE 6 macht es ja schon weitgehend richtig - außer, dass er da verschiedene kleine Bugs einstreut (3 Pixel-Jog , Bleeding Fieldset ......) __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste Geändert von eagle275 (12.11.2010 um 13:25 Uhr).

12.11.2010, 14:34
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Wenn du ein Online-Beispiel bereitstellen würdest, würde ich mir das mal anschauen - aber mir selbst was dazu zu basteln, keine Lust. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

12.11.2010, 14:40
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	versuch ich heute abend - der server bei meinem Arbeitgeber ist von außen jedenfalls "dicht" __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

12.11.2010, 15:10
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	danke . das tut .... nun passen zwar noch einige Abstände nicht .. aber da ärgert mich wieder der 3 pixel jog - damit komm ich klar __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste