✔ Seite wird im IE falsch angezeigt :(

Status
Nicht offen für weitere Antworten.
Lesen und das Gelesene verstehen wirst du ja wohl noch können?

Maik hat gesagt.:
indem du in allen Regelblöcken, in denen gemeinsam die float- und margin-Eigenschaft (mit horizontalen Abständen) vorkommen, zusätzlich display:inline notierst.
Zum Vergrößern anklicken....
Ein Beispiel hab ich dir eben gezeigt, den Rest darfst du dann selbständig abarbeiten.

Und vernachlässige in deinen Beiträgen nicht die Groß- und Kleinschreibung, denn in unserem Forum wird darauf großer Wert gelegt, und durchgängig kleingeschriebene Beiträge sind unerwünscht.
 
Also nochmal zum Mitschreiben: der IE verdoppelt bei allen zu umfliessenden Elementen, die also mit der float-Eigenschaft ausgezeichnet sind, deren gesetzten horizontalen margin-Werte - also margin-left oder margin-right.

Den Link, der diesen Bug vorführt, erläutert und die Lösung im CSS-Code präsentiert, hatte ich dir aber schon heute Morgen in meinem ersten Beitrag genannt.

Nun gehst du das Stylesheet durch, und hälst nach allen Regelblöcken Ausschau, auf die meine zuletzt zitierte Anleitung zutrifft.
 
Soweit, wie Ich das eben verstanden hatte, habe ich die Zeile von Dir in alle Blöcke eingefügt, in denen der Eintrag 'margin' bzw. 'float' zu finden war: Nachdem Ich zuerst alles bei den 'float-Blöcken' eingetragen hatte, sahs im IE immernoch schlecht aus, im FF wie gewohnt normal. Als nächstes trug Ich Deine Zeile ebenfalls in alle margin Blöcke ein und es sah in beiden Browser übel aus...

Tut mit Leid, aber ich hab echt nicht mega viel Ahnung
Ich hoffe, Ihr habt noch Geduld.
Lg
 
Wie ich gerade gesehen hab, gab es nur noch einen einzigen Regelblock, und den hatte ich ja vorhin schon als Beispiel genannt.

Der Grund, dass der IE die Seite falsch anzeigt, findet sich somit an einer anderen Stelle im Stylesheet.

Setz hier mal diese Regelerweiterung ein, damit der IE die linke Spalte nicht über die gesamte Container-Breite ausdehnt, was der Grund dafür ist, dass die benachbarte Spalte nach unten verschoben wird:

Code: 
div#left {
  display: inline;
  margin-left: 20px;
  float: left;
  background: url(gfx/lefts.jpg);
  padding-bottom: 1px;
  width:179px;
}
 
Vielen Dank!
Leider ist das ganze noch ein wenig verschoben, wäre sehr toll, wenn man das noch hinbekäme, ich sitze auch die ganze Zeit schon dran..

PS: Ich liebe dieses Forum - einfach spitze!

Lg
 
Dann nimm mal dieses Stylesheet, das ich vorhin lokal zum Testen verwendet habe, und mit dem es keine Verschiebungen gibt:

Code: 
* {
  margin: 0px;
  padding: 0px;
}
html {
  height: 100%;
}
body {
  text-align: center;
  height: 100%;
  background: #252525;
  font-family: verdana;
}
img {
  border: 0px;
}
ul {
  list-style: none;
}
#center td.row_key {
  padding: 3px;
  width: 15%;
}
#center td.row_value {
  width: 35%;
}
ul.BarFree {
  position: static;   height: 12px;
  margin: 0px 0px 0px 0px;    padding: 0px 0px 0px 0px;
  float: left;
  background: #b0b0b0;
}
ul.BarClear {
  position: static;   width: 0px;   height: 0px;
  margin: 0px 0px 0px 0px;    padding: 0px 0px 0px 0px;
  clear: left;
}
div#container {
  height: auto !important;
  height: 100%;
  min-height: 100%;
  margin: 0px auto -45px auto;
  background: url(gfx/container_bg.jpg) repeat-y;
  width: 828px;
}
div#header {
  margin: 0px 11px 0px 11px;
  background: url(gfx/header.jpg);
  width: 806px;
  height: 170px;
}
#header div#add {
  text-align: right;
  padding: 46px 21px 0px 0px;
}
#header div#head_langs {
  height: 27px;
  padding: 17px 22px 0px 0px;
  float: right;
}
#header #head_langs li a{
  display: block;
  height: 29px;
  width: 29px;
}
#header #head_langs li{
  margin-left: 6px;
  float: left;
  display:inline;
}
#header #head_langs li#lang_nl a{
  background: url(gfx/nlflag.jpg);
}
#header #head_langs li#lang_en a{
  background: url(gfx/enflag.jpg);
}
#header #head_langs li#lang_ger a{
  background: url(gfx/deflag.jpg);
}
div#left {
  display: inline;
  margin-left: 20px;
  float: left;
  background: url(gfx/lefts.jpg);
  padding-bottom: 1px;
  width:179px;
}
#left h5#hmenu {
  display: block;
  height: 40px;
  width: 179px;
  background: url(gfx/navleft_headline1.jpg);
}
#left h5#hlanparty {
  display: block;
  height: 38px;
  width: 179px;
  background: url(gfx/navleft_headline2.jpg);
}
#left ul .box_entry_active a{
  margin-left: 2px;
  padding: 10px 0px 0px 38px;
  background: url(gfx/nav_topbutton.jpg);
  display: block;
  height: 24px;
  width: 139px;
  font: bold 13px arial;
  text-decoration: none;
  color: #02CBFF;
  text-transform: uppercase;
  text-align: left;
}
#left ul .box_entry a{
  margin-left: 2px;
  padding: 10px 0px 0px 38px;
  background: url(gfx/nav_topbutton.jpg);
  display: block;
  height: 24px;
  width: 139px;
  font: bold 13px arial;
  text-decoration: none;
  color: #02CBFF;
  text-transform: uppercase;
  text-align: left;
}
#left ul .engaged a.admin {
  text-align: left;
  margin-left: 2px;
  padding: 4px 0px 0px 12px;
  display: block;
  background: url(gfx/nav_button.jpg) no-repeat;
  height: 15px;
  width: 165px;
  color: #ffffff;
  text-decoration: none;
  font: bold 10px verdana;
}
#left ul li span {
  display: block;
}
#left ul .engaged a {
  text-align: left;
  margin-left: 2px;
  padding: 4px 0px 0px 12px;
  display: block;
  background: url(gfx/nav_button.jpg) no-repeat;
  height: 15px;
  width: 165px;
  color: #ffffff;
  text-decoration: none;
  font: bold 10px verdana;
}
div#center {
  text-align: left;
  font: 10px verdana;
  width: 430px;
  background: url(gfx/content_bg.jpg);
  float: left;
}
#center div#contentc {
  padding: 5px 3px 0px 4px;
}
#center a {
  font: bold 10px verdana;
  text-decoration: none;
  color: #298DFF;
}
#center .LineLeft {
  font: bold 11px verdana;
}
#center td {
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}
#center input[type=text] {
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  width: 95%;
  margin: 3px;
  clear: both;
}
td.row_value_important {
  width: 35%;
}
#center .form {
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  width: 70%;
  margin: 3px;
  clear: both;
}
#center .form_optional {
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  width: 80%;
  margin: 3px;
}
#center select {
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  width: 95%;
  margin: 3px;
  clear: both;
}
#center option {
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  width: 100%;
  margin: 3px;
  clear: both;
}
#center h2 {
  margin: auto;
  text-align: left;
  padding: 0px 0px 5px 5px;
  width: 405px;
  font: bold 10px verdana;
  color: #777777;
  border-bottom: 1px dotted #555555;
  text-transform: uppercase;
}
* html body #center div#ce_head {
  padding: 1px 0px 0px 0px;
  background: url(gfx/content_head.jpg) no-repeat top;
}
#center div#ce_head {
  padding: 10px 0px 0px 0px;
  background: url(gfx/content_head.jpg) no-repeat top;
}
div#right {
  text-align: left;
  width: 179px;
  float: left;
  color: #ffffff;
  font: 11px verdana;
}
#right input {
  margin-left: 2px;
  background: #444444;
  color: #ffffff;
  margin-bottom: 2px;
  border-top: 1px solid #333333;
  border-left: 1px solid #333333;
  border-right: 1px solid #555555;
  border-bottom: 1px solid #555555;
}
#right h4 {
  display: block;
  height: 35px;
  width: 179px;
}
#right a {
  font: bold 10px verdana;
  text-decoration: none;
  color: #298DFF;
}
#right h4#login {
  background: url(gfx/navright_headline1.jpg);
}
#right h4#regis {
  background: url(gfx/navright_headline2.jpg);
}
ul.BarOccupied {
  position: static;   height: 12px;
  margin: 0px 0px 0px 0px;        padding: 0px 0px 0px 0px;
  float: left;
  background: #2bb800;
}
ul.BarMarked {
  position: static;   height: 12px;
  margin: 0px 0px 0px 0px;    border: 2px 0px 2px 0px solid #9c9d9c;    padding: 0px 0px 0px 0px;
  float: left;
  background: #fff500;
}
ul.BarFree {
  position: static;   height: 12px;
  margin: 0px 0px 0px 0px;    padding: 0px 0px 0px 0px;
  float: left;
  background: #b0b0b0;
}
ul.BarClear {
  position: static;   width: 0px;   height: 0px;
  margin: 0px 0px 0px 0px;    padding: 0px 0px 0px 0px;
  clear: left;
}

#right h4#spo {
  background: url(gfx/navright_headline3.jpg);
}
div#push {
  clear: both;
  height: 45px;
}
div#footer {
  background: url(gfx/footer.jpg);
  padding: 23px 0px 0px 0px;
  height: 22px;
  width: 828px;
  clear: both;
  font: 10px verdana;
  color: #ffffff;
  margin: auto;
}
#footer a {
  text-decoration: none;
  font: bold 10px verdana;
  color: #ffffff;
}
 
Danke für die Mühe, leider keine Veränderung zu sehen aufder Page und mir ist noch aufgefallen, dass die Schrift zu groß ist.

Lg und danke für die Hilfe
 
Bei dir taucht im HTML-Code vor der Doctype-Deklaration ein Zeichen auf, das den IE in den "Quirksmode" schaltet, und was dieser Darstellungsmodus im IE zur Folge hat, siehst du ja am lebenden Objekt.
 
Meinst du dieses Viereck in

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

?

Und in welchem Block muss ich die Schriftgröße runtersetzen?

Lg
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück