✔ Kompatibilität IE und Firefox

[Maik]

Notier mal im Stylesheet nach dem ul.BoxHeadline-Selektor folgenden Star-HTML-Hack für den IE, damit er die "Headline"-Texte ordnungsgemäß anzeigt:

ul.BoxHeadline {
        margin: 0px 0px 0px 0px;
        padding: 4px 4px 4px 8px;
        font-weight: bold;
        list-style: none;
        background-image: url(images/box_headline.gif);
        color: #FFFFFF;
        border-left: 2px solid #000000;
        border-right: 2px solid #000000;
}
* html ul.BoxHeadline { height:1%; }

Das Sprengen der rechten Login-Box unterbindest du, indem die width=100%-Deklaration für die Tabelle auf "90%" herabgesenkt wird.

 

[sp_ChefKoch]

Das Sprengen der rechten Login-Box unterbindest du, indem die width=100%-Deklaration für die Tabelle auf "90%" herabgesenkt wird.

Aber die rechten Boxen sind doch mit width:176px deklariert?

Oder versteh ich das jetzt falsch?

 

[Maik]

Schalt doch einfach mal mit border="1" den Tabellenrahmen ein, um zu sehen, bis wohin der IE die Tabelle ausdent

 

[sp_ChefKoch]

Es war ja schon ne Border drinnen.

Was ich nicht kapiert habe is, dass er das Login-Feld im IE anscheinend größer gemacht hat als im Firefox und dadurch sind die kompletten rechten Boxen gewandert.

Naja ich hab jetz mal fürs login-feld die angesprochene width:90% deklaration reingemacht und siehe da es passt.
Ich hab allerdings keinen Plan wieso.

 

[sp_ChefKoch]

so, nachdem mir für den Internet Explorer so wunderbar geholfen wurde schieb ich doch gleich mal einen Screenshot für Opera hinterher

http://www.picspeicher.de/files/221aa476902ba86f29d5a6d0f507a08d.jpg

Hier ist, wie ihr sehen könnt, das Problem, dass das Help- und Close-"Symbol" in die nächste Zeile gerückt wird und dadurch die Headlines verzerrt werden.

Die Code-Dateien hab ich auch mal aktualisiert:

 

[Maik]

Hi,

versuch es mal hiermit:

li.BoxHelpClose {
  width: 18px;
  font-size: 10px;   
  list-style: none;
  float:left;
}
ul.BoxContent {
         margin: 0px 0px 0px 0px;
        padding: 4px 4px 4px 8px;
         background: #212121;
         list-style: none;
         color: #FFFFFF;
          border-left: 2px solid #000000;
        border-right: 2px solid #000000;
        border-bottom: 2px solid #000000;
        clear:left;
}

 

[sp_ChefKoch]

Nun schauts in Opera und Firefox so aus

http://www.picspeicher.de/files/1cd5ba7a8197f3d109ad1982dc66f8ad.jpg

der Content der Headline wird zwar richtig angezeigt, aber das Hintergrundbild is nurnoch zur Hälfte da.
Im IE wird die Headline sogar zu viel angezeigt, etwa 1.5mal so hoch wie gewollt.

 

[Carrear]

setz die bilder im code mal vor die jeweiligen schriftzüge und leg für die zwei kleinen pics float: right; fest. kannst es evtl auch noch mit display: inline; versuchen. Gruß

EDIT: Sorry habe eben nur die Posts von Seite 1 gesehen

 

[Maik]

Einen Versuch war es ja wert.

li.BoxHelpClose {
  width: 18px;
  font-size: 10px;
  list-style: none;
  display:inline;
}

Erfolgreich getestet in Firefox 2, IE 6 + 7, Opera 9.24, Safari 3.0.4 (Win), SeaMonkey 1.1.6

 

[sp_ChefKoch]

Ihr seit klasse

Vielen Vielen Dank für eure Hilfe.

Und an dieser Stelle wünsch ich euch frohe Ostern.



>> erledigt.