problem tabelle unterschied ie - firefox

[Michael Kneissl]

hallo,

ich habe ein problem, das eine tabelle im firefox und im internet explorer unterschiedlich aussieht, wie bekomme ich das hin?

mein problem ist, das der untere teil der tabelle im internet explorer hinter dem footer-image verschwindet und nicht lesbar ist.

mein stylesheet:

body
  {
   position:absolute;
   font-size: 12px;
   font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;

}

html, body
  {
   top:0; left:0; right:0;
   min-height:100%;
   margin:0;
   padding:0;
   width:100%;
  }
  #header_container
  {
   position:fixed;
   top:0; left:0; right:0;
   text-align:center;
   margin:0;
   height:99px;
   z-index:3;
  }

#header
  {
   position:absolute;
   top:0; left:0; right:0; bottom:0;
   height:100%;
   background: url(http://www.donaureal.at/nav/nav_top.jpg) no-repeat;
   z-index:3;
   margin:0;
   padding:0.2em;
  }
  #menu
  {
   position:fixed;
   top:99px;
   left:0;
   width:165px;
   height:100%;

border: 0;
   padding:0;
  }
  /*#content
  {
   overflow:hidden;

margin:0;
   padding-top:4.85em;

padding-left:12em;
   padding-bottom:3em;

z-index:3;
   width:830px;
   height:431px;
   position:absolute;
   left:168px;
   top:105px;

/*

id="anzeige" align="center" style="width:830px;
   height:431px; position:absolute; left:168px; top:105px; z-index:3; overflow:hidden;">

}*/
  #footer_container
  {
   position:fixed;
   bottom:-1px; left:0; right:0;
   text-align:center;
   margin:0;
   height:40px;
   z-index:3;
  }
  #footer
  {
   position:absolute;
   top:0; left:0; right:0; bottom:0;
   background:#3b97fc;
   z-index:3;
  }

img#logo {
    position:absolute;
     top: 6px;
     left: 5px;
     z-index:3;
  }

img#banner {
   position:absolute;
     top: 10px;
     left: 230px;
      z-index:3;
  }

table#navTable {
   position:fixed;
   top:85px;
   left: 0px;
   width:165;
   z-index:2;
  }

/* Nun für den MSIE */
  * html, * html body
  {
   overflow:hidden;
   bottom:0;
   height:100%;
  }
  * html #header_container, * html #footer_container
  {
   position:absolute;
   width:100%;
   padding-right:0px;
  }
  * html #header,* html #footer
  {
   height:100%;
   position:static;
   z-index:1;
  }
  * html #content
  {
   position:absolute;
   top:0; bottom:0; left:0; right:0;
   height:100%;
   width:100%;
   overflow:hidden;
   margin:0;
  }

* html img#logo {
    position:absolute;
     top: 6px;
     left: 5px;
     z-index:4;
  }

* html table#navTable {
   position:absolute;
   top:0px;
   left: 0px;
   width:165;
   z-index:2;

}
  * html img#imgfooter {
    position:absolute;
   bottom: 5px;
    left: 0px;
    padding-right:20px;
   z-index:1;
    }

* html #menu
  {
   margin:0;
   position:absolute;
   top:99px;
   height:100%;
   z-index:1;
  }

wäre super wenn mir da jemand einen tipp geben könnte.

danke,
michael

[kungschu]

Hallo Michael.

ich habe ein problem, das eine tabelle im firefox und im internet explorer unterschiedlich aussieht, wie bekomme ich das hin?

Dass Browser Inhalte unerschiedlich darstellen, ist in gewissem Rahmen ja normal. Mit welchen Versionen hast du denn getestet?

mein problem ist, das der untere teil der tabelle im internet explorer hinter dem footer-image verschwindet und nicht lesbar ist.

Grundsätzlich: Es ist hilfreich, nur relevanten Code zu posten und diesen farbig zu markieren, um die Lesbarkeit zu erleichtern. Klare Strukturierungen, präzise Fehlerbeschreibungen und eine saubere Formatierung führen häufig auch zu mehr Beiträgen.

Der IE interpretiert CSS oft falsch oder "eigenwillig". Ich sehe zwei container für einen Footer. Beide mit z-index:3;? D.h., der Footer müsste grundsätzlich immer im Vordergrund angezeigt werden. Deinen CSS Code solltest du aber verbessern. Für einen fixen (fixed,static) Kopf- und Fussbereich ist die Definition von z-index eigentlich garnicht nötig.

  

> * html #header,* html #footer  
>   {  
>    height:100%;  
>    position:static;  
>    z-index:1;  
>   }  
>   * html #content  
>   {  
>    position:absolute;  
>    top:0; bottom:0; left:0; right:0;  
>    height:100%;  
>    width:100%;  
>    overflow:hidden;  
>    margin:0;  
>   }  
> 

Hier scheinst du für den Footer (IE-spezifisch) z-index:1; festzulegen. Ist es möglich, das #content oder die Tabelle hier einen höheren Wert haben?
Dein CSS Code sieht nach einer sehr "konfusen" Verschachtelung aus (, die auch Grund für Fehler sein könnte). Du könntest versuchen, deinen Ansatz zu verbessern. Dann wäre auch die Fehlersuche einfacher. Grundsätzlich solltest du Tabellen nie zu Layoutzwecken verwenden. Menüs lassen sich Beispielsweise wunderbar mit Listen realisieren. (http://css.maxdesign.com.au/listamatic/)

Um Anpassungen für den IE zu machen, bieten sich Conditional Comments an.

Hier findest du ein Beispiel für ein Layout mit fixem Header und Footer.

Info:(X)HTML und CSS sollten immer validiert sein.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/#validate-by-input

MfG, Kungschu.

[Michael Kneissl]

hallo,

ja mein code muss erst verbessert werden, bin neu im css.

lösung habe ich schon: für internet explorer muss ich den top wert auf eine -10px; position setzen und alles passt.

danke,
michael