Probleme mit ( position: fixed) beim Internet Explorer

Bernado

Ich arbeite für ein Jugendhaus und habe den Auftrag erhalten eine Internetseite zu kreieren. Da ich mich für html und css interessiere, habe ich mit Hilfe dieser Werkzeuge eine Internetpräsenz gebaut.
Alles war gut bis ich die Seite ausprobiert habe - im "Internet Explorer" sieht man nur Chaos. Alle anderen Browser wie Firefox, Opera, Safari, Google Chrome, ja sogar Ice Weasle (Browser für Linux) hatten kein Problem.

Ich weiß das der IE sich nicht an Regeln hält! Was kann ich dagegen tun?

Besonders mit position fixed scheint er auf Kriegsfuß zu stehen! Ich habe meine Webseite (index.html und css) als Anhang beigefügt.
Ich hoffe ihr könnt mir helfen.

normal

:-o:-):-D

Internet Explorer

Vielen Dank schon mal, Bernado

CroweHammer

nabend,

position: fixed; wird ab IE Version 7+ unterstützt. D.h. das ist wohl nicht dein Problem.

Greetz

Bernado

Ich habe die html und css Dokumente über den Validierungsservice von W3C überprüfen lassen und keine Fehlermeldung bekommen.
Wie kann ich mein Problem finden.

Gruß, Bernado

threadi

Zeig doch mal einen Link zur Seite damit man den Quellcode sehen kann. Ohne den wird es nur rummraten.

Bernado

Leider ist die Seite noch nicht online!
Gibt es eine andere Möglichkeit den Quellcode public zu machen?
Falls nicht muß man wahrscheinlich noch ein paar Tage warten, bis ich von der Leitung unseres Jugendhauses das OK. bekomme und die Seite online stellen kann.

threadi

Du kannst den Quellcode auch hier posten, falls man dann noch etwas ohne Bilder erkennt.

Bernado

Wie kann ich das hier einfügen oder anhängen?
Das html-Dokument ist noch relativ klein, aber das css-Dokument hat schon ein paar Zeilen.

threadi

Code kopieren, hier einfügen, und am Besten mit [ CODE ] und [/ CODE ] umgeben (ohne die Leerzeichen dazwischen).

Bernado

Zuerst html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>


  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>B&uuml;rgerinitiative Ludwigshafen im Ernst Kern Haus in Oppau</title>
  <link href="bil.css" rel="stylesheet" type="text/css" media="screen">  
  </head>

  <body>

      <div id="wrapper">

        <div id="register">
         <h1>Willkommen</h1>
        </div>

        <div class="outer_content">
          <h3>bei der B&uuml;rgerinitiative Ludwigshafen Oppau im Ernst-Kern-Haus</h3>
          <img id="hauslogo" src="../images/ernst_kern_haus_logo.png" alt="Logo des Jugenhauses" title="Jugendhauslogo">


          <div id="inner_content">
            <img src="../images/startseite2.jpg" alt="Kinder spielen auf dem Hof" title="spielende Kinder">
          <p class="image">Spiel und Spa&szlig;!</p>
        </div>

        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>        

      </div>

      <div id="main_menue">  
        <p class="head">Offene Arbeit</p>
        <ul>
          <li><a id="active" class="top" href="index.html">Willkommen</a></li>        
          <li><a href="kinderbereich.html">Offener Kinderbereich</a></li>
          <li><a href="jugendbereich.html">Offener Jugendbereich</a></li>
          <li><a href="maedchentag.html">M&auml;dchentag</a></li>
          <li><a href="jungentag.html">Jungentag</a></li>
          <li><a class="bottom" href="out.html">Projekt Out</a></li>                                        
        </ul>                    
      </div>

      <div id="sub_menue">
        <p class="head">Hilfsangebote</p>
        <ul>
          <li><a class="top" href="kernzeit.html">Kernzeitbetreuung</a></li>
          <li><a href="hausaufgaben.html">Hausaufgabenbetreuung</a></li>
          <li><a class="bottom" href="berufshilfe.html">Sch&uuml;ler- und Berufshilfe</a></li>
        </ul>
      </div>

      <div id="sub2_menue">
        <p class="head">Allgemeines</p>
        <ul>
          <li><a class="top" href="termine.html">Termine</a></li>          
          <li><a href="oeffnungszeiten.html">&Ouml;ffnungszeiten</a></li>
          <li><a class="bottom" href="team.html">Team</a></li>                              
        </ul>
      </div>

      <div id="footer">
        <hr>
      </div>

      <div class="outer_content">
        <img class="bil_logo" src="../images/bil_transparent.png" alt="Logo der Bürgerinitiative Ludwigshafen" title="Bil Logo">      
      </div>

      <br>
      <br>
      <br>
      <br>     

      </div>

  </body>

</html>

Alles anzeigen

und jetzt css

Code

* {
  font-size: 100%;
  padding: 0px;
  margin: 0px;
}


/* ========================= Layout ==================================================== */
/* ========================= Schablone ================================================= */


body {
  background-color: #249824;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #000066; 
}


div#wrapper {
  background-position: 900px 20px;
  width: 970px;
  margin: 20px auto 0px auto;
}


div#register {
  background: #f3d73a;
  width: 380px;
  height: 40px;
  margin: 0px 0px 0px 285px;
  padding: 0px 5px 0px 5px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;   
}


div.outer_content {
  background-color: #f3d73a;
  width: 820px;
  margin: 0px 0px 0px 150px;
}


div#inner_content {
  background: #1a88f1;
  width: 662px;
  margin: -165px 50px 0px 130px;
}


div#main_menue {
  background: #ff6c16;
  width: 250px; 
  position: fixed;
  top: 70px;
  z-index: 1;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  box-shadow: 6px 6px 2px #A3755B;
}


div#sub_menue {
  background: #ff6c16;  
  width: 250px;
  position: fixed;
  top: 365px;
  z-index: 1;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  box-shadow: 6px 6px 2px #A3755B;    
}


div#sub2_menue {
  background: #ff6c16;  
  width: 250px;
  position: fixed;
  top: 545px;
  z-index: 1;  
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  box-shadow: 6px 6px 2px #A3755B;    
}


/* =========================== Logo und Bilder =========================================== */


img#hauslogo {
  position: relative;
  top: -160px;
  left: 530px;
  padding: 20px 0px 0px 0px; 
}


img {
  margin: 10px
}


img.bil_logo {
  position: relative;
  top: -130px;
  left: 280px;
}


img.bild {
  margin: 8px;
}


hr {
    background-image: url(../images/zierstreifen.jpeg);
    height: 60px;
}


/* ======================= Text, Schriftarten, etc.... =============================== */


div#main_menue p,
div#sub_menue p,
div#sub2_menue p {
  font-weight: bold;
}


div#register h1 {
  font-size: 250%;
  font-weight: normal;
  text-align: center;
}


h3 {
  font-size: 200%;
  font-weight: normal;
  text-align: center;
  width: 380px;
  padding: 15px 5px 0px 5px;
  border-bottom: 5px solid #249824;
  border-left: 5px solid #249824;
  border-right: 5px solid #249824;
  margin: 0px 0px 0px 130px;
  box-shadow: 6px 6px 2px #A3755B;
}  /* gehört zum Register (Ueberschrift) */


p.head {
  color: #000066;
  font-size: 150%;
  text-align: center;
  text-decoration: underline;
  padding: 10px 0px 10px 0px;
}


p.image {
  font-size: 150%;
  text-align: center;
  padding: 0px 0px 10px 0px;
}


p.introtext { 
  font-family: Georgia;
  color: #000066;
  font-size: 110%;
  padding: 30px 290px 0px 0px;
  margin: 0px 0px 0px 145px;  
}


p {
  font-family: "Times New Roman";
  color: #000000;
  font-size: 110%;
  margin: 0px 8px 4px 8px;
}


ul {
  list-style: none;
  padding: 0px 0px 5px 10px;
}


li {
  font-size: 120%;
}


/*=================== Navigation ==================================================*/


a {
  background-color: #1a4988;
  color: #f3d73a;
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 10px;
  margin: 0px 10px 5px 0px;  
}


a.top {
  border-top-left-radius: 10px;
}


a.bottom {
  border-bottom-left-radius: 10px;
}


a:link,
a:visited {
  color: #f3d73a;
}


a:focus,
a:hover,
a:active {
  background-color: #249824;
  color: #000000;
  text-align: center;
  margin: 0px -20px 5px -10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 0px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  box-shadow: 6px 1px 2px #A3755B;
}


a#active {
  background-color: #249824;
  color: #ffffff;
  text-align: center;
  margin: 0px -20px 5px -10px;
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 0px;  
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  box-shadow: 6px 1px 2px #A3755B;  
}


/* ===================== Oeffnungszeiten ============================================== */


h2 {
  font-family: "Times New Roman";
  font-size: 150%;
  text-decoration: underline;
  display: block;
  width: 265px;
  margin: 0px 0px 0px 200px;
}


p.time {
  display: block;
  width: 250px;
  margin: 0px 0px 20px 200px;
}


/* ===================== Termine ======================================================= */


p.dates {
  width: 655px;
}


h5,
p.dates {
  font-family: calibri;
  color: #000000;
  margin: 0px 0px 0px 140px;
}


h5 {
  font-size: 150%;
  text-decoration: underline;
}


span {
  font-weight: bold;
  font-style: italic;
}


/* ======================= Team ========================================================= */


div#team {
  margin: 0px 0px 0px 125px; 
}


img.last {
  margin-left: 234px;
}

Alles anzeigen

das war´s !!!

MrMurphy

Hallo,

bei mir wird die Seite auch im Firefox vollkommen zerschossen dargestellt.

Das kann an den fehlenden Bildern liegen. Das Hauptproblem sind aber die dir fehlenden Grundlagen.

1. Bildern sollte im Quelltext immer eine Größe mit auf den Weg gegeben werden

2. Du benutzt CSS3 Elemente, obwohl es das noch gar nicht gibt und die Browser es deshalb häufig nur ungenügend und ältere es überhaupt nicht umsetzen können. Im Produktiveinsatz (also wenn die Seite veröffentlicht werden soll) hat CSS3 deshalb noch nichts verloren

3. Du "missbrauchst" HTML-Tags. Ein Zeilenumbruch sollte z. B. niemals benutzt werden, um Abstände herzustellen

4. Du benutzt HTML teilweise semantisch nicht korrekt, z. B. die Überschrift H3

Gruss

MrMurphy

Bernado

Hallo McMurphy,

leider haben die von dir genannten Info´s nichts geholfen. Nun gut, ich bin ja froh das ihr euch mit diesem Problem auseinandersetzt - vielleicht kommt ja noch die entscheidende Hilfe!

Ich habe immer gedacht das man Inhalt und Layout strikt trennt und deshalb größen von Boxen im css-Dokument definiert. So habe ich es jedenfalls gelernt! Und die Breite eines Blockelementes ist doch automatisch so breit wie es geht, während die länge vom Inhalt beeinflußt wird. Außer man gibt Breite und Höhe vor, oder? Und css3 wird in den meisten Browsern schon erkannt. Bei den Browsern die es nicht kennen wird der Befehl doch einfach ignoriert, oder?

Das ich Zeilenumbruch für den Abstand benutze dürfte doch auch keinen Einfluß auf die Seite haben, und bei h3 war es meine Absicht dem Inhalt eine gewisse Bedeutung für Internetsuchmaschinen zuzuweisen. Ich meine das die Gewichtung h1 - h6 eine Suchmaschineninformation darstellt, oder?

Dennoch vielen Dank für deine Anregungen! Falls ich falsch liege mit meinem Wissen bin ich natürlich über Belehrungen dankbar.