• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Andere Darstellung Firefox und IE

B

bucada

Neues Mitglied
Hallo,

ich habe nach längerem stöbern und suchen einige Informationen zur Navigation gefunden und die in meine Seite eingebaut.
Beim Firefox funktioniert alles einwandfrei, allerdings ist die Schrift beim IE verschoben und nicht zentriert.
Daraufhin habe ich Netz weiter gesucht und wiederum einige Informationen zu der Anpassung bei verschiedenen IE-Versionen. Leider funktioniert das immer noch nicht wie gewünscht.
Kann mir da jemand weiterhelfen? Ich sitze schon recht lange an der Sache und so langsam ist es frustrierend, dass die Seite beim IE immer noch falsch angezeigt wird. :(
Hier der Quelltext der HTML-Datei
HTML: 
<html> 
<head> 
  <title>alias architects</title> 

  <link rel="stylesheet" type="text/css" href="style.css" type="text/css" media="screen" />    
    [if lte IE 6]>
      <style type="text/css" media="screen">#Rahmen { behavior:url("csshover.htc"); }</style>
    <![endif]

<body>

<p class="alias"><font color=#CC0000><nobr>alias architects</nobr></font> </p>

  <div id="Rahmen"><ul id="Navigation">
    <li><a href="profile/office.html">PROFILE</a>
      <ul>
        <li><a href="profile/office.html">THE OFFICE</a></li>
        <li><a href="profile/partner.html">PARTNER</a></li>
        <li><a href="profile/philosophy.html">PHILOSOPHY</a></li>
        <li><a href="profile/teamwork.html">TEAMWORK</a></li>
      </ul>
    </li>
    
    <li><a href="projects/architecture.html">PROJECTS</a>
      <ul>
        <li><a href="projects/architecture.html">ARCHITECTURE</a></li>
        <li><a href="projects/urban.html">URBAN STRUCTURE</a></li>
        <li><a href="projects/intersections.html">INTERSECTIONS</a></li>
      </ul>
    </li>

    <li><a href="references/projectlist.html">REFERENCES</a>
      <ul>
        <li><a href="references/projectlist.html">PROJECTLIST</a></li>
        <li><a href="references/clients.html">CLIENTS</a></li>
        <li><a href="references/memberships.html">MEMBERSHIPS</a></li>
        <li><a href="references/networking.html">NETWORKING</a></li>
      </ul>
    </li>
    
    <li><a href="news/news.html">NEWS</a>
      <ul>
        <li><a href="news/news.html">NEWSTICKER</a></li>
        <li><a href="news/links.html">LINKS</a></li>
      </ul>
    </li>

    <li><a href="projects/architecture.html">CONTACT</a>
      <ul>
        <li><a href="contact/adress.html">ADRESS</a></li>
        <li><a href="contact/internet.html">INTERNET</a></li>
        <li><a href="contact/imprint.html">IPRINT</a></li>
      </ul>
    </li>
  </ul><div></div></div>
</body> 
</html>
und hier die dazugehörige CSS-Datei.
tut mir leid, wenn es mittlerweile etwas viel geworden ist. Ich habe mal alle meine Versuche drin gelassen. Ich hoffe, dass Ihr dank der Kommentare zurcht kommt.
Code: 
<!-- /* Beginn der Seitenformatierung */ -->

body {
  padding: 0px;
  height:350px;
  width:768px;
  background-image: url(Bilder/leer.jpg);
  background-repeat: no-repeat;
  background-color: #000000;
}

a {
  text-decoration: none;
}

a:link {
  color: #cc0000;
}

a:visited {
  color: #cc0000;
}

a:active {
  color: #cc0000;
}

a:hover {
  color: #FFCC00;
}

p.alias {
     position: absolute;
     top: 310px;
     left: 285px;
     font-size: 30px;
     word-spacing: 7px;
     letter-spacing: 16px;
     font-family: century gothic;
     color: #cc0000;
     text-decoration: none;
}

#inhalt {
  font-family: century gothic;
  position: absolute;
  top: 70px;
  font-size: 13px;
  color: #cc0000;
}

a.profile {
  position: absolute;
  top: 310px;
  left: 165px;
}
<!--
a.profile1 {
  position: absolute;
  top: 330px;
  left: 165px;
}

a.profile2 {
  position: absolute;
  top: 350px;
  left: 165px;
}

a.profile3 {
  position: absolute;
  top: 370px;
  left: 165px;
}
-->
a.projects {
  position: absolute;
  top: 310px;
  left: 300px;
}

a.references {
  position: absolute;
  top: 310px;
  left: 450px;
}

a.news {
  position: absolute;
  top: 310px;
  left: 630px;
}

a.contact {
  position: absolute;
  top: 310px;
  left: 755px;
}

<!-- /* Ende der Seitenformatierung */ -->

<!-- /* Aufklappbares Menü */ -->


  div#Rahmen {
    font-family: century gothic;
    position: absolute;
    top: 360px;
    left: 180px;
    font-size: 14px;
    color: #cc0000;

    width: 700px;
    padding: 20px;
    border: 0;
    background-color: black;
  }
  html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 700px;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  :first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  html ul#Navigation li:hover ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    left: -0.4em;
  }
  :first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:black; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 10em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; 
    border: 0;
    border-left-color: black; border-top-color: black;
    color: #cc0000; background-color: black;
  }
  html ul#Navigation a, html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: #ffcc00; background-color: black;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: #cc0000; background-color: black;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: black;
  }
Vielen Dank im Voraus.
 
Hallo nochmal,

ich habe heute entdeckt, dass nach dem Einfügen der Zeile:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
in meinem Dokument es Probleme mit der Positionierung der Tabelle gibt.
Im Firefox wird sie wie ich es mir denke richtig (fortlaufend) unterhalb des Textes angezeigt.
Im IE erscheintsie allerdings oben-links.
Ich verstehe nicht warum, denn in meiner CSS-Datei habe ich (meiner Meinung nach) eigentlich nichts stehen, was die Seite dazu veranlassen würde die Tabelle woanders zu positionieren.
Hier noch die Quellcodes der HTML Datei:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>  
    <title>aliasarchitects profile
    </title>  
    <link rel="stylesheet" href="test.css" type="text/css"/>    
  </head>
  <body>  
    <p class="inhalt"> 
      <font color=#FFFFFF> Text1
        <br>
        <br> <br>
          Text2
        <br><br><br>
        <table border="0" class="partner" vspace=4px>
          <colgroup>
            <col width="120">
            <col width="250">
          </colgroup>
          <tr> <td>Zeile</td><td>Spalte</td> </tr>          
          <tr> <td>Test</td><td>Test</td> </tr>
        </font>
        </table>
      </font>  
    </p>
  </body>
</html>
und der CSS-Datei:
Code: 
body {
  padding: 0px;
  height:409px;
  width:768px;
  background-image: url(../../Bilder/hintergrund.jpg);
  background-repeat: no-repeat;
  background-color: #000000;
}

#inhalt {
  width: auto;
  margin: 0px 150px 200px 0px;
  font-family: century gothic;
}

p.inhalt {
  margin: 0px;
  position: absolute;
  width: 600px;
  height: 320px;
  top: 140px;
  left: 290px;
  font-size: 10px;
  font-family: century gothic;
  line-height: 1.3em;
}

table.partner {
  line-height: 1.1em;
  font-size: 10px;
  font-family: century gothic;
}
Ich hoffe, dass Ihr wieder eine Lösung wisst.
Vielen Dank im Voraus.

Liebe Grüße
bucada
 
An deinem Code ist immer noch eine Menge zu tun.
HTML: 
<link rel="stylesheet" href="test.css" type="text/css"/>

Bei HTML 4 kannst du den letzten Slash weglassen.
HTML: 
<p class="inhalt">

Das p steht für paragraph und das heißt auf deutsch "Absatz". Du deklarierst damit jedoch keinen solchen. Ersetze das p-tag durch ein div-tag.
HTML: 
<font color=#FFFFFF> Text1
Das font-tag ist veraltet. Du brauchst das auch gar nicht, denn das kannst du ja per CSS lösen.

Im CSS:
Code: 
font-family: century gothic;
Was ist "century gothic"? Wenn es eine Schriftart ist, dann muss diese in Anführungszeichen gesetzt werden, sind es zwei, dann gehört ein Komma dazwischen. Dennoch solltest du Alternativschriftarten vorschlagen, denn die wenigsten User werden diese installiert haben.

Viele Grüße

Achja: Das schließende font-tag in der Tabelle muss auch noch raus. Das gehört da nicht hin.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben