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

Firefox und IE Problem

B

blueangel

Neues Mitglied
Hi Leute, ich bins mal wieder;-)
Habe mir zusammen mit Eurer Hilfe eine Homepage (bzw. bisher erst mal eine Navigationsleiste, soll heissen ne Index und ne css seite) gebastelt.
Zur Kontrolle habe ich die Seite immer mal wieder im Firefox 3.5.4 angeschaut. Dort hat auch immer alles prima gepasst. Dann habe ich mir die Seite im IE7 angeschaut, da hat garnichts mehr gepasst. Gibt es da irgend etwas zu beachten??Oder wie habe ich mir das zu erklären und welche Lösungsmöglichkeiten gibt es?
 
Am besten du gibst mal deinen Code heraus :)
Allgemein ist es immer ganz nützlich, am Anfang der CSS alle Browser auf neutral zu stellen:
HTML: 
html, body {
  margin: 0px;
  padding: 0px;
}
Das Problem beim IE ist, dass er sich einfach von sämtlichen Standards fernhält. Konkret gesagt berechnet er teilweise padding und margin anders, als andere Browser.

Wie gesagt, Code würde helfen :)

MfG Icy
 
blueangel schrieb:
Gibt es da irgend etwas zu beachten??Oder wie habe ich mir das zu erklären und welche Lösungsmöglichkeiten gibt es?
Zum Vergrößern anklicken....

Unterschiede bei der Interpretation des HTML- und CSS-Codes zwischen Browsern gibt es, ja. Um dir helfen zu können müsste man jedoch wissen wie die problematische Seite derzeit aussieht - also Link her.

Allerdings einige wichtige Punkte die Du selbst schon kontrollieren solltest:
- ist der HTML-Code valie?
- ist der CSS-Code fehlerfrei?

Icy schrieb:
Allgemein ist es immer ganz nützlich, am Anfang der CSS alle Browser auf neutral zu stellen:
Zum Vergrößern anklicken....

Wohl eher so:

Code: 
* { margin: 0px;padding: 0px; }
 
Kein Problem:

Code ist hier:

HTML: 
body {
        margin: 0px;padding: 0px;
        font-size: small;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}


h1 { font-size:240%;
     font-family: arial, verdana, sans-serif;
     color:#696969;
     font-style:italic;
     text-align:center;
     margin-top: 0px;
     margin-left: 240px;
     margin-right:240px;
     background-color: E5FFFF;
}

h2 { font-size:140%;
     font-family: arial, verdana, sans-serif;
     color:#696969;
     font-style:italic;
     text-align:center;
     margin-top: 10px;
     margin-left: 240px;
     margin-right:240px;
     background-color: E5FFFF;
}






#navibereich {
    padding: 2em 0em;/*Innenabstand oben/unten  linksrechts*/  
       
       border-top-width:0px;
       border-top-style:solid;
       border-bottom-width:0px;
       border-bottom-style:solid;
       border-left-width:0px;
       border-left-style:solid;
       border-right-width:0px;
       border-right-style:solid;
    background-color: E5FFFF;
    text-align: left;
    margin-top: 25px;
    margin-bottom: 80px;
    margin-right: 5px;  /*Rand aussen des Navigationsrahmens(rechts)*/
    margin-left:5px;    /*Rand aussen des Navigationsrahmens(links)*/

}







    
     
       
    /* -------NUN DER WICHTIGE TEIL------------ */  
    
       
    
    
   




#navibereich li{
 
  padding: 0px 0px; /* Innenabstand: oben/unten 4px, li/re 0 */
   /* Keinen Außenabstand */ 
  display: inline; /* Listenelemente nebeneinander */
  list-style-type: none; /* Aufzählungszeichen entfernen */
}


#navibereich li {
  float: left;
  position: relative;
  width: 12em;
}  

#navibereich ul{
background-color: E4GGGG;
}


#navibereich li ul {
       display: none;
       position: absolute;
       padding:  0.5em 0px;  /*zweite Zahl gibt Abstad der Untermenüpunkte an*/  
       border-left-width:0px;
       border-left-style:solid;
       border-left-color:black;
       border-bottom-width:0px;
       border-bottom-style:solid;
       border-bottom-color:black;
       border-right-width:0px;
       border-right-style:solid;
       border-right-color:black;
       background-color: E5FFFF;
        
 } 


#navibereich li:hover ul {
display: block;
background-color: E5FFFF;

}   


a:link {font-weight:bold; color:  3300CC; text-decoration:none; }
a:visited: {font-weight:bold; color: grey; text-decoration:none; }
a:focus: {font-weight:bold; color: red; text-decoration:none; }
a:hover {font-weight:bold; color: 003300; text-decoration:none; }
a:active {font-weight:bold; color: 4C4C66; text-decoration:none; }

g:focus { background-color:red; }

g:hover { background-color:silver; }

g:active { background-yellow:red; }


Und die Index lautet:
HTML: 
<html>

<head>

<title>Herzlich Willkommen</title>

<link href="navigation.css" type="text/css" rel="stylesheet" />
</head>

<body>

<p><img src="logo.jpg" width="200" align="right" hspace="40" height="100" border="0" alt="Logo"></p>
<p><img src="kanal.jpg" width="200" align="left" hspace="40" height="100" border="0" alt="ansicht"></p>

<h1> Südwestmarketin</h1>
<h2> Ihr zuverlässiger Partner</h2>



<ul id="navibereich">

    <li id="navi01"><a href="index.html">Wir über uns</a></li>
 
    <li><a href="Marketing.html">Marketing</a>
     <ul>
        <li id="navi02"><a href="Preise.html">Preise</a></li>
        <li id="navi02"><a href="Produkte.html">Produkte</a></li>
        <li id="navi02"><a href="Versand.html">Versand</a></li>
        <li id="navi02"><a href="Mix.html">Mixix</a></li> 
     </ul>
    </li>

  <li id="navi02"><a href="kundenservice.html">Kundenservice</a>
     <ul>
        <li><a id="navi02"><a href="formular1.html">Mitteilung der Kundendaten</a></li>
        <li><a id="navi02"><a href="formularadresse.html">Adressänderung</a></li>
        <li><a id="navi02"><a href="formularauftrag.html">Auftrag zur Bestellung</a></li>
     </ul>
    </li>
      



  <li id="navi02"><a href="Entstehung.html">Herstellung</a></li>

  <li id="navi02"><a href="geschichte.html">Geschichte</a>
   <ul>
        <li id="navi02"><a href="geschaeftlich.html">Firmenphilosophie</a></li>
   </ul>
  </li>
  
  <li id="navi02"><a href="Filialen.html">Fililialen</a></li>
  <li><a id="navi02"><a href="links.html">Links</a></li>
  <li id="navi02"><a href="kontakt.html">Kontakt</a></li>

</ul>




</body>

</html>


1)
Der Verlgeich zwischen Firefox u IE ist fatal...Im Firefox ist alles perfekt, IE zeigt den puren Müll an...Den Ratschlag für die CSS Datei (margin u Padding) habe ich eingefügt, passt aber trotzdem nicht....

2)
Was ich ausserdem noch fragen wollte (bitte entschuldigt meine Unwissenheit...) aber angenommen, ein User hat einen 17Zoll Monitor, der andere hat 19Zoll, verschiedene Auflösungen...ist die Darstellung trotzdem in Ordnung oder müssen auch hierfür noch Einstellungen getroffen werden?


Viele Grüsse
 
Deine Seite ist im Quirksmode, das ist schlecht.

EDIT: und validieren tut die Seite garantiert auch nicht.
 
Ok, danke mal dafür! Welche Lösungsmöglichkeiten habe ich nun? Fehler raussuchen und verbessern?Falls ja, wie geht man bei sowas genau vor?
Oder was würdest du an meiner Stelle (und mit meinem Wissen, das leider nicht gerade gross ist) machen...?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben