IE macht Probleme bei rounded corners

[Heart]

Hallo,

ich habe mit dem Beispiel-Code aus selfhtml/css Runde Ecken per DIVs realisiert. Klappt soweit wunderbar, nur der IE scheint ein Problem damit zu haben.

Das "Problem" liegt aber wohl nicht direkt am IE, sondern irgendwo in meinem Code, weil wenn ich meinen Code um die rounded corner divs entferne und die Seite dann betrachte, so klappt es auch im IE.

Nur welcher Teil meines Codes auf der index.php ist für das vermurkste Aussehem im IE verantwortlich...

Der Link zu der Seite wäre http://tippliga.m25s11.vlinux.de
(Direktlink zur css-Datei: http://tippliga.m25s11.vlinux.deinclude/css.css )

Im IE sehen die rechten "Boxen" so aus:

[Felix Riesterer]

Liebes Herzchen,

ich habe mit dem Beispiel-Code aus selfhtml/css Runde Ecken per DIVs realisiert. Klappt soweit wunderbar, nur der IE scheint ein Problem damit zu haben.

Dein Problem kann ich im IE5 nicht nachvollziehen! Im IE6 dagegen schon...

Vielleicht braucht der IE6 eine geänderte Höhen-Angabe für das lu-div, denn das scheint mir zu tief zu "rutschen".

Du weißt schon, dass Dein Quelltext eine rechte div-Suppe ist!? Es wäre für Suchmaschinen und andere Clients gewinnbringender, wenn Du Deine Inhalte strenger semantisch Auszeichnest!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Heart]

Wenn ich in der css-Datei das untere padding auf 0px setze inhalt

.inhalt {
margin: 0px;
padding: 5px 10px 0px 10px;
}

...dann passt es! Nun müssen halt ganz am Ende zwei br-Tags sein, damit die letzte Zeile nicht auf dem Rand sitzt :(!

Komisch komisch das ganze....

Du weißt schon, dass Dein Quelltext eine rechte div-Suppe ist!? Es wäre für Suchmaschinen und andere Clients gewinnbringender, wenn Du Deine Inhalte strenger semantisch Auszeichnest!

Könntest du "strenger semantisch auszeichnen" näher erläutern oder allgemein, was am Code verbessert werden könnte?

Danke

[Felix Riesterer]

Liebes Herzchen,

Könntest du "strenger semantisch auszeichnen" näher erläutern oder allgemein, was am Code verbessert werden könnte?

Wenn Du eine Liste von Links hast, dann ist das eine Liste; und eine Liste in HTML besteht aus einem <ul> oder <ol> mit <li>s darinnen. Eine Überschrift ist ein <hx> (x=1...6) und so weiter. Wenn ein Inhalt Deiner Seite eine bestimmte Bedeutung hat, dann sollte diese sich auch im verwendeten HTML-Tag wiederfinden.

Dein "Tipp-Menü" ist z.B. eine simple Aneinanderreihung von <img>-Tags, denen regelmäßig ein Link und ein <br> folgt. Was soll das sein? Warum ist das nicht eine <ul>, in deren <li>s die Links sitzen und deren Pfeilsymbole (also eine Art Bullet-Ersatz für die unsortierte Liste) nicht als <img>s, sondern als Hintergrundbilder der jeweiligen <li>s angezeigt werden? Das wäre von der Bedeutung her (also "semantisch") korrekt, denn du listest hier Links auf, die auch HTML-technisch als eine Liste geführt werden.

So Dinge wie <p>...</p><br><p>...</p> halte ich auch für etwas "gewagt", da semantisch nicht nachvollziehbar. Wenn Du eine Leerzeile haben möchtest, dann setze doch eine! Das geht mit <p>&nbsp;</p>. Oder was nennst Du eine "Leerzeile", wenn nicht eine Zeile-die-leer-ist?

Ich vermisse die Auszeichnung der per CSS optisch wahrnehmbaren "Tabellen-Überschriften", wie z.B. "Tipp-Menü", "Bundesliga-Infos", "Sabbelecke" etc. Ohne die Grafik gesehen zu haben wird nicht klar, was die folgenden tabellarischen Daten bedeuten sollen (zumal Du auf Tabellen-Überschriften wie <th> komplett verzichtest).

Bitte missverstehe mich nicht! Deine Seite ist weitgehend semantisch ausgezeichnet, aber eben noch nicht konsequent genug - meiner Meinung nach. Mag sein, dass ich es hier gerade übertreibe, aber im Sinne der Barrierefreiheit (und besserer Suchmaschinen-Rankings) wäre diese Kritik durchaus angebracht - finde ich. Aber darüber ließe sich diskutieren... :-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Heart]

VIELEN Dank für die wirklich mal konstruktive Kritik!

Ich werde versuchen, dass alles noch dementsprechend umzusetzen.

Gruss
Heart

P.S.: Zu dem Problem mit dem Padding fällt Dir spontan auch nichts besseres ein als das untere padding auf 0px zu setzen und dann eben unten zwei <p>&nbsp;</p> zu machen?

[Felix Riesterer]

Liebes Herzelein,

VIELEN Dank für die wirklich mal konstruktive Kritik!

oh... ähm, gerne doch!

P.S.: Zu dem Problem mit dem Padding fällt Dir spontan auch nichts besseres ein als das untere padding auf 0px zu setzen und dann eben unten zwei <p>&nbsp;</p> zu machen?

Also wenn Du dem entsprechenden Element eine Klasse oder ID zuweist, dann kannst Du das auch mit padding steuern. Dazu wären Leerzeilen nicht unbedingt die einzige Lösung.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Gunnar Bittersmann]

Hi Felix,

Wenn Du eine Leerzeile haben möchtest, dann setze doch eine! Das geht mit <p>&nbsp;</p>.

Autsch! Das widerspricht allem, was du sonst gesagt hast. Was hat ein Absatz mit einem Leerzeichen für eine Bedeutung (Semantik)?

Wenn zwischen den Absätzen ein größerer Leerraum sein soll, dann mit CSS dem ersten (über Klasse bzw. ID) margin-bottom oder padding-bottom geben oder dem zweiten margin-top / padding-top.

Soll der Leerraum mit einem HTML-Element ausgezeichnet werden, bietet sich hr an, das ja in XHTML 2 dann auch seperator heißen wird. Mit CSS dann halt den Leerraum erzeugen und die Linie wegmachen.

Gruß,
Gunnar

[Felix Riesterer]

Lieber Gunnar,

Autsch! Das widerspricht allem, was du sonst gesagt hast. Was hat ein Absatz mit einem Leerzeichen für eine Bedeutung (Semantik)?

Wenn zwischen den Absätzen ein größerer Leerraum sein soll, dann mit CSS dem ersten (über Klasse bzw. ID) margin-bottom oder padding-bottom geben oder dem zweiten margin-top / padding-top.

Du hast recht. Aber inwieweit widersprichst Du mir jetzt darin?

Liebe Grüße aus Ellwangen,

Felix Riesterer.