Darstellungsprobleme im IE

gendrosh · 13. Oktober 2010

Hallo zusammen,

ich habe die Seiten http://www.ebel-busshoff.de/cms/ und http://www.gendrosh.de/ programmiert, allerdings habe ich das Problem, dass die Seiten nur im Firefox, ich will jetzt nicht sagen "korrekt" aber..., so angezeigt werden, wie ich mir das vorstelle. Im IE und in Opera werden beide Layouts ziemlich zerlegt. Das Problem soll wohl recht einfach zu lösen sein. Ich habe auch schon über Google gesucht, und mich durch verschiedene Foren gequält, aber keine passende Lösung gefunden. Vielleicht habe ich auch nur falsch gesucht. Die CSS Dateien sehen wie folgt aus (Bitte nicht wundern, wenn der Code unsauber ist, lerne noch. ;-)):

ebel-busshoff.de:

Code:

@charset "UTF-8";
*
{
padding: 0;
margin: 0;
}
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @creator       YAML Builder V1.2 (http://builder.yaml.de)
 * @file          basemod.css
 * @-yaml-minver  3.2
 */

@media screen, projection
{
  /** 
   * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera 
   * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
   *
   * @workaround
   * @affected IE8, FF, Webkit, Opera
   * @css-for all
   * @valid CSS3
   */

  body {  }

  /*-------------------------------------------------------------------------*/

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body {}

  /* Layout Alignment | Layout-Ausrichtung */
  .page_margins {width: 1024px; margin: 0 auto;}

  /* Layout Properties | Layout-Eigenschaften */
  #header {}
  #topnav {
 width: 1024px;
 height: 25px;
 background: url(../../images/farbverlauf_topnav.jpg) no-repeat;
 position: relative;
 top: -3px;
}

#topnav li
{
    list-style: none;
    position: absolute;
    top: 0;
    background: none;
    padding: 0;
    margin: 0;
    border: none;
}

#topnav li, #topnav a
{
    height: 25px;
    display: block;
}

#sitemap {left: 808px; width: 62px;}
#kontakt {left: 872px; width: 64px;}
#impressum {left: 937px; width: 72px;}

  #nav {}
  div.hlist {}
  #main {background-image: url("../../images/farbverlauf_links.jpg"); background-repeat:no-repeat; margin-top: -3px;}

  /* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung  */
  .menu
  {
   
  }
  
  /*-------------------------------------------------------------------------*/

  /**
   * (en) Formatting content container
   * (de) Formatierung der Inhalts-Container
   *
   */

  #col1
  {
  width:180px; height:555px; float:left;
  }
  #col2 {display:none}
  #col3 {width:954px; height:555px; padding: 20px 35px;}
  #col1_content {}
  #Rechtsschutzversicherungen { float: left; padding: 30px 5px 5px 5px; width: 180px; }
  #Rechtsschutzversicherungen a { font-size:12px; font-weight: bold; font-family: verdana; text-decoration: none; color: #333; }
  #Anschrift { float: left; }

  #Karte { float: right; width: 400px; height: 400px; }

  #col3_content {margin-left: 180px;}

    #col3_content ul li, #col3_content ul li a
    {height:auto;}

  /*-------------------------------------------------------------------------*/
  .link
  {
  font-family: verdana;
  font-size: 12px;
  font-weight: normal;
  color:#B93B45;
  }

  #impressum
  {
  list-style: circle;
  text-decoration: underline;
  text-align: left;
  padding: 0px 0px;
  font-family: verdana;
  font-size: 12px;
  font-weight: normal;
  color:#333;
  background-color: #FFF;
  border: none;
  } 
  
  .menu a
  {
  text-decoration: none;
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  color:#FFF;
  }
  
  .menu li
  {
  list-style: none;
  text-align: right;
  padding: 8px 15px;
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  color:#FFF;
  background-color: #000D6F;
  border: 1px solid #CCC;
  }
  
  .currentpage
  {
  background-color: #BA3B45;
  }
  
  p
  {
  font-family: verdana;
  font-size: 12px;
  color: #333;
  }
  
  h1
  {
  font-family: verdana;
  font-size: 18px;
  font-weight: bold;
  color: #000D6F;
  }
  
  h2
  {
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  color: #000D6F;
  }
  
  h3
  {
  font-family: verdana;
  font-size: 12px;
  font-weight: bold;
  }

}

gendrosh.de:

Code:

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @creator       YAML Builder V1.2 (http://builder.yaml.de)
 * @file          basemod.css
 * @-yaml-minver  3.2
 */

@media screen, projection
{
  /**
   * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera
   * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera
   *
   * @workaround
   * @affected IE8, FF, Webkit, Opera
   * @css-for all
   * @valid CSS3
   */

  body {  }

  /*-------------------------------------------------------------------------*/

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body { background: #f1f1f1 url("../../images/background.jpg") repeat-x top left; padding: 31px auto; }

  /* Layout Alignment | Layout-Ausrichtung */
  .page_margins { width: 980px; margin: 0 auto; }

  /* Layout Properties | Layout-Eigenschaften */
  .page_margins { }
  .page { min-height: 1155px; }
  #header { width: 980px; height: 104px; background: url("../../images/logo_schriftzug.jpg"); }
  #topnav { width: 980px; line-height: 31px; height: 31px; margin: 0 auto; text-align: right; color: #fff; font-style: Tahoma, Verdana, Helvetica, Arial, sans-serif; font-size: 10px; }
  #topnav a { color: #fff; text-decoration: none; }
  #topnav a:hover { color: #fff; text-decoration: none; }

  #nav { background: url("../../images/nav_background.jpg"); background-repeat: no-repeat ; overflow:hidden; height: 74px;}
  #nav li {float: left; list-style: none;}
  #nav li a { color: #fff; font-family: Tahoma; font-size: 14px; font-weight: bold; text-decoration: none;}
  .currentpage { color: #fff; font-family: Tahoma; font-size: 14px; font-weight: bold; text-decoration: none;}
  #nav ul { }

  #nav_sprites {
    width: 980px; height: 75px;
    background: url("../../images/nav_sprite.jpg") no-repeat;
    margin: 0; padding: 0;
    position: relative;}
  #nav_sprites li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #nav_sprites li, #nav_sprites a {
    height: 75px; display: block;}

  #start {left: 0; width: 207px;}
  #wir {left: 208px; width: 202px;}
  #leistungen {left: 411px; width: 192px;}
  #kontakt {left: 604px; width: 167px;}
  #anfahrt {left: 772px; width: 208px;}

  #start a:hover {
    background: transparent url("../../images/nav_sprite.jpg")
    0 -75px no-repeat;}
  #wir a:hover {
    background: transparent url("../../images/nav_sprite.jpg")
    -208px -150px no-repeat;}
  #leistungen a:hover {
    background: transparent url("../../images/nav_sprite.jpg")
    -411px -225px no-repeat;}
  #kontakt a:hover {
    background: transparent url("../../images/nav_sprite.jpg")
    -604px -300px no-repeat;}
  #anfahrt a:hover {
    background: transparent url("../../images/nav_sprite.jpg")
    -772px -375px no-repeat;}

  #start_active {left: 0; width: 207px; background: url("../../images/start_active.jpg") no-repeat; }
  #wir_active {left: 208px; width: 202px; background: url("../../images/wir_active.jpg") no-repeat; }
  #aufkleber {left:900px; position:relative; top:-45px; z-index:1000;}
  #leistungen_active {left: 411px; width: 192px; background: url("../../images/leistungen_active.jpg") no-repeat; }
  #kontakt_active {left: 604px; width: 167px; background: url("../../images/kontakt_active.jpg") no-repeat; }
  #anfahrt_active {left: 772px; width: 208px; background: url("../../images/anfahrt_active.jpg") no-repeat; }


  #main { background: transparent; }
  #footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }

  /*-------------------------------------------------------------------------*/

  /**
   * (en) Formatting content container
   * (de) Formatierung der Inhalts-Container
   *
   */

  #col1 { background: url("../../images/box_links_oben.jpg"); background-repeat: no-repeat; float: left; width: 210px; height: 331px; margin: -93px 10px 0px 0px;}
  #col2 {width: 758px; height:331; float: left; margin: -93px 0px 0px 0px; padding: 0;}
  #col3 { float: left; width: 211px; min-height: 588px; margin: 7px 9px 0px 0px; background-color: #dbdbdb; }
  #col4 { float: right; background: #dbdbdb url("../../images/box_rechts_unten.jpg"); background-repeat: no-repeat; width: 760px; min-height: 588px; margin: 7px 0px 0px 0px;}

  #col1_content {margin: 0px 18px;}
  #col2_content {}
  #col3_content {}
  #col4_content {}

  /*-------------------------------------------------------------------------*/

  .div { margin: 0; padding:0;}
  #col1_content h1 {color: #fff; font-family: Verdana; font-size: 12px; font-weight: bold; margin: 13px 0px;}
  #col1_content p {color: #fff; font-family: verdana; font-size: 12px;}
  #col4_content h1 { color: #fff; font-family: verdana; font-size: 12px; font-weight: bold; margin: 14px 0px 0px 20px; }
  #col4_content p { font-family: verdana; font-size: 12px; margin: 33px 20px 20px 20px; }
  #col4_content ul { font-family: verdana; font-size: 12px; margin: 33px 20px -30px 20px;  }

}

SpiceLab · 13. Oktober 2010

Ist dir der Sticky-Thread Wichtig: Bei CSS-Problemen mit dem IE bitte die Version angeben in den Themenübersicht des CSS-Forums nicht ins Auge gestochen?

Bei mehreren IE-Versionen (5.x, 6, 7, 8), die sich z.T. grundlegend voneinander unterscheiden, was die korrekte Interpretation der CSS-Spezifikationen betrifft, sollte

die betroffene

Version(en) genannt werden. Oder dürfen wir dies durch einen eigenständigen Probelauf in Erfahrung bringen?

gendrosh · 13. Oktober 2010

Nein, so dreist sollte das hier nicht rüberkommen. Ich habe beide Seiten im IE6 getestet. In ermangelung anderer IE Versionen habe ich die Seiten bei http://www.browsershots.org durchlaufen lassen. Das Ergebnis http://browsershots.org/http://www.gendrosh.de/# zeigt, dass die Seite http://www.gendrosh.de in allen IE Versionen falsch dargestellt wird. In so fern habe ich mir dei Auflistung der Versionen hier gespart. Sorry, wenn das falsch rübergekommen ist.

hela · 13. Oktober 2010

gendrosh hat gesagt.:
...Bitte nicht wundern, wenn der Code unsauber ist, lerne noch. ;-)):...

Dort scheint auch die Ursache für die fehlerhafte Darstellung im IE zu liegen: Ein IMG-Element wurde überhaupt nicht geschlossen. Abgesehen davon werden in XHTML selbstschließende Tags (wie z.B. IMG) mit einem Schrägstrich (slash) am Ende gekennzeichnet (http://www.orbit9.de/wissen/html.php).

Im Anhang ein Kurzer Auszug aus deinem Quelltext.

gendrosh · 13. Oktober 2010

Ok, ich kenne das sonst nur vom break also <br />.

Würde das dann in dem Fall so aussehen: <img src="images/aufkleber.png" />?

hela · 13. Oktober 2010

Genau so isses: Bei BR-, IMG-, HR-, META-Elementen usw. usf.

winamp · 13. Oktober 2010

@ http://www.gendrosh.de/

Die Anzahl deiner öffnenden <div>- und schliessenden </div>-Tags stimmt im HTML-Quellcode auch nicht überein - sie differenziert um zwei Stück ;-)

gendrosh · 14. Oktober 2010

Ok, ich hab jetzt beide Fehler in http://www.gendrosh.de behoben, die Seite sieht im IE auch schon etwas besser aus, aber die beiden unteren <div> sind immer noch verschoben und von mir angelegte Paddings werden komplett ignoriert.
Und das eingebundene PNG <img src="images/aufkleber.png" /> welches über einen transparenten Hintergrund verfügt wird leider nicht richtig dargestellt.

gendrosh · 14. Oktober 2010

Hab das http://visualhype.de/transparente-png-grafiken-im-internet-explorer-6/ mal versucht, funktioniert aber bei mir nicht. Vielleicht bin ich zu blöd zum einbauen. Das ist doch html, müsste also direkt im Template mit eingefügt werden oder? Allerdings zeigt mir WeBuilder 2010 an, dass es sich bei [if IE 6] und filter: nicht um korrekte Befehle handelt.

gendrosh · 14. Oktober 2010

Das http://www.drweb.de/magazin/transparente-pngs-im-internet-explorer-6/ hat jetzt geklappt. Also mein PNG wird schonmal richtig angezeigt... Bleibt "nur noch" das Problem, dass die divs alle verschoben sind. Jemand ne Lösung?

Darstellungsprobleme im IE

gendrosh

Grünschnabel

SpiceLab

ZENmechanic

gendrosh

Grünschnabel

hela

Anhänge

gendrosh

Grünschnabel

hela

winamp

gendrosh

Grünschnabel

gendrosh

Grünschnabel

gendrosh

Grünschnabel

Neue Beiträge