✔ HP-Design verzogen im IE...

[Headymaster]

Hallo!

Ich bin momentan dabei, meinen Webauftritt zu realisieren, jedoch habe ich beim Design ein Problem.

Hier mal der Link zum anschauen:

http://www.nilson-cms.de

Das Problem ist, dass im Firefox zwar alels richtig angezeigt wird, jedoch im IE wird unter der Navigation alles etwas nach unten gezogen und so ein unschöner Streifen entsteht.

Ich kann mir momentan nich vorstellen woran das liegen kann, denn valign steht auf top und auch das hier habe ich im CSS-Stylesheet stehen:

/*---------------------------------------------
Set vertical align to top, this helps if the
text flys in the middle of a table (td).
---------------------------------------------*/
td {
  vertical-align: top;
}

Dies soll einfach nur helfen, dass alels nach oben hin ausgerichtet wird, leider pasiiert die im IE ja anscheinend nicht

Würde mich super über Hilfe freuen

MFG Niels

 

[Maik]

Der Grund sind die Zeilenumbrüche / Einrückungen im HTML-Code zwischen <td> ... </td> und den Grafiken bzw. Grafik-Links, die der IE mit Verschiebungen im Layout quittiert.

Setze daher folgende CSS-Regel ein, um den Bug zu beheben:

img, a img {
display:block;
}

 

[Headymaster]

Jup danke klappt nun wunderbar

Sag mal, jez werden aber die Flaggen im Header, die ich zum Languagewechseln eingebaut habe falsch angezeigt.

Hier mal der Code von den Flaggen:

/* CSS */
td.header_lang {
 text-align:left;
 vertical-align:bottom;
}

img.header_lang {
 margin-left:5px;
 margin-bottom:5px;
}

/* HTML */

<td class="header_lang" colspan="6" background="inc/templates/[path]/images/NilsonCodingV2_03.gif" width="670" height="205">
		  <a href="index.php?lang=de"><img class="header_lang" src="inc/images/flaggen/de.gif"></img></a>
		  <a href="index.php?lang=en"><img class="header_lang" src="inc/images/flaggen/gb.gif"></img></a>
		</td>

Das muss ja jez was mit dem img als blockelement zu tun haben, aber was

MFG Niels

 

[Maik]

Stimmt, es liegt an der Block-Level-Charakteristika.

Deshalb benötigen diese Grafiken jetzt noch zusätzlich die float-Eigenschaft

img.header_lang {
 margin-left:5px;
 margin-bottom:5px;
 float:left;
}

 

[Headymaster]

Ja Danke das klappt nun auch

Aber jez klappt im IE wieder was nicht, denn die margin-bottom:5px; Eigenschaft wird hier nicht mehr angenommen, zwar wird im Firefox noch alels richtig dargestellt aber im IE nicht mehr

MFG Niels

 

[Maik]

Probier es stattdessen mal mit padding-bottom:5px für die umgebende Tabellenzelle.

 

[Headymaster]

Ok nun klappt alles wunderbar
Danke nochma^^

MFG Niels

 

[Maik]

Hier noch ein kleiner "kosmetischer" Korrekturvorschlag für den IE, der bei floatenden Elementen die margin-Werte verdoppelt:

img.header_lang {
 margin-left:5px !important; /* Moderne Browser */
 margin-left:2.5px; /* IE */
 float:left;
}

 

[Headymaster]

Ah danke dir werde das noch korrigieren

MFG Niels