Elemente verschoben im IE8

[tleilax]

Nur noch am Rande:

Ich weiss nicht, ob es sich wirklich auf das Layout auswirkt, aber die Art und Weise, wie Du das label-Tag verwendest, ist so vermutlich nicht vorgesehen...

 

[tobias1985]

Das Problem kenn ich. Als Workaround - und wirklich Browsersicher hat sich bei mir folgende Lösung entwickelt:

<div style="background: Buttongrafik">
<input type="text" value="Suchbegriff" style="border:none; background: none;" />
</div>

So hab ich mir das zumindest ausgedacht und es funktioniert wunderbar. Ein Div-Layer im Hintergrund mit der Buttongrafik und darüber ein durchsichtiges Eingabefeld, das du beliebig adjustieren kannst.

Wenn jemand eine elegantere, Browserunabhängige Lösung hat - immer her damit

Danke für den Tipp. Schön wärs gewesen. Alles justiert, bis es im Opera gepasst hat. Im IE8 siehts genauso aus wie zuvor.

EDIT: Den IE8 interessiert das paddig-top beim Textfeld nicht. Deshalb kann ich das Textfeld nicht verschieben. (im Opera gehts)

@tleilax: Das ist auch nur ein Teil eines kompletten Designs.

 

[Freddixx]

Dann gib dem Textfeld doch einen Margin per Browserweiche

 

[strolch00]

Ich will jetzt nicht gehauen werden, allerdings frag ich mich ob Ihr schon mal über Tabellen nachgedacht habt? Wir sind zwar in der heutigen Zeit auf DIV Layer und CSS geil, allerdings sollte man die Existenz von Tabellen nicht vergessen und in diesem speziellen Fall denke ich ist es einfacher und semantisch korrekter, als ne div/input,css Suppe zusammen zu brauen und sich mit den verschiedenen Darstellungen herum zu ärgern.

 

[theHacker]

Ich will jetzt nicht gehauen werden, allerdings frag ich mich ob Ihr schon mal über Tabellen nachgedacht habt? [...] semantisch korrekter, als ne div/input,css Suppe zusammen zu brauen [...]

*verhau*
Da is doch nicht mal ansatzweise ne Tabelle zu entdecken. Es geht um ein Textfeld und n Button. Nie im Leben is ne Tabelle semantsich korrekt.

Jetzt mal konstruktiv zum Thema: der IE8 hat doch so'n Entwicklungstool ähnlich Firebug mit on Board. Bringt das was, um rauszufinden, was schief läuft?

 

[flaschenkind]

Semantisch korrekt wird ne Tabelle verwendet, wenn es ca. so aussieht:

Also es gibt Spalten und Zeilen.
Und hier ist ist ne Tabelle sowas von unsemantisch, da kann man besser ne "Div-Suppe" haben. Außerdem spricht man eigentlich nur von einer "Div-Suppe", wenn für jeden Quatsch divs verwendet werden, auch wenn es eigentlich sinnvollere Elemente dafür gibt. Zum Beispiel

<div class="bold">foobar</div>

.bold{
    font-weight: bold;
    display: inline;
}

Da könnte man auch einfach <strong> nehmen.

 

[Freddixx]

Jetzt mal konstruktiv zum Thema: der IE8 hat doch so'n Entwicklungstool ähnlich Firebug mit on Board. Bringt das was, um rauszufinden, was schief läuft?

Wo? *hechel* *hechel* Ich hätte nicht zu träumen gewagt, dass es sowas gibt

 

[Sebmaster]

wo? *hechel* *hechel* ich hätte nicht zu träumen gewagt, dass es sowas gibt

f12

 

[Claudi]

Wieso nimmst du die Grafik für dein Suchfeld nicht einfach als Hintergrund für eben jenes Suchfeld?!

Den Text innendrin kannst du ja dann mit dem Padding noch ausrichten.

Damit wäre schonmal das Problem gelöst, dass der eingegeben Text relativ zur entsprechenden Grafik verschoben ist und du müsstest nur noch die beiden inputs korrekt ausrichten.

Ich weiß allerdings nicht, wies mit der Unterstützung der Browser für Hintergrundbilder von input-Feldern aussieht, aber ich hoffe einfach mal, dass es funktioniert und dir hilft

 

[Freddixx]

Ich weiß allerdings nicht, wies mit der Unterstützung der Browser für Hintergrundbilder von input-Feldern aussieht, aber ich hoffe einfach mal, dass es funktioniert und dir hilft

Du tätest gut daran, den ganzen Thread zu lesen

f12

Danke dir.

 

[Claudi]

Du tätest gut daran, den ganzen Thread zu lesen

Das habe ich zwar getan, aber nur die aktuelle Version der Seite, die schon den Workaround beinhaltet, gesehn.

Gehe mal davon aus, dass er es vorher so hatte, aber das konnt ich ja nicht wissen.

 

[Freddixx]

Das habe ich zwar getan, aber nur die aktuelle Version der Seite, die schon den Workaround beinhaltet, gesehn.

Gehe mal davon aus, dass er es vorher so hatte, aber das konnt ich ja nicht wissen.

Achso. Dann weißt du's jetzt

Vielleicht findet ja noch wer eine bessere Lösung.

 

[tobias1985]

Das habe ich zwar getan, aber nur die aktuelle Version der Seite, die schon den Workaround beinhaltet, gesehn.

Gehe mal davon aus, dass er es vorher so hatte, aber das konnt ich ja nicht wissen.

Im Quelltext stehts auskommentiert noch drin.

Vielleicht findet ja noch wer eine bessere Lösung.

Überhaupt eine Lösung, wäre schon mal gut. Die bisherigen Ansätze funktionieren im IE8 ja nicht.

 

[strolch00]

Also ich habe mich mal hingesetzt und es mit meinen Kenntnissen das Ergebnis könnt Ihr hier finden. Und mit meiner Aussage über Tabellen meinte ich das man sich so das "float:left" und "clear:right" sparen könnte, nichts weiter.

btw. getestet in IE [8.0.6001.18882], FF [3.5.8], Maxtron [2.5.11.3353 UNICODE], Iron [2.0.168.0 (10702)] und Opera [9.62]

 

[tobias1985]

Du bist ein Schatz! Ein kleines Geschenk ist gleich unterwegs an dich.

Ich versuchs mal heute Abend ins komplette Design einzubauen und werde hier berichten, obs geklappt hat.

 

[strolch00]

Kein Thema, schick mir einfach Deine Mailadresse, dann kann ich es Dir als zip zukommen lassen und Du kannst es direkt weiter verwenden. Musst aber glaube ich dann dem Form noch einen "float:left" geben, wenn in dem gelben Frame rechts noch was rein soll.

 

[tobias1985]

Hab mir den Code so gezogen und ins Design eingebaut. Sieht nun sowohl im Opera10.10 als auch im IE8 gut aus.

Vielen Dank nochmal.