immer wieder: CSS boxmodell und IE vs FF u. OP

[Patchie]

Hallo
Ich habe mal wieder Probleme mit einer Navigation. Da verschiebt sich alles "nach rechts" im IE. OP, FF und Safari, sowie Avant klappt allles.
Wie kann ich jetzt dafür sorgen, dass es auch im IE funktioniert?
Leider muss jedes Navielement "einzeln" ausgerichtet werden, da es sich um ein Photoshop Layout handelt, also wenig Flexibiliät bietet.

Was gibt es da für Lösugnsansätze?
Hab in der Wikipedia nachgelesen und da steht der IE rechnet Padding + Width = GESAMMTBREITE und nicht wie die Anderen Browser die width als die Gesammtbreite ansehen.

[trixster]

Hallo, ohne konkreten Code wird es hier wohl schwierig.
Standardkonforme Browser rechnen die width + margin + padding +border. (es sei denn mit css3 wurde es anders angegeben).
Aber mit Code könnte man dir vielleicht weiterhelfen.

[Patchie]

Hier ein paar screenshots der Browser.
Hab die Seite etwas unkenntlich gemacht. Ist ein Studentenprojekt für einen relaunch. Mags einfach net wenn das vor der veröffentlichung schon im Netz ist...

http://www.mal-anders-webdesign.de/frage/web_opera.jpg
http://www.mal-anders-webdesign.de/frage/web_safari.jpg
http://www.mal-anders-webdesign.de/frage/web_avant.jpg
http://www.mal-anders-webdesign.de/frage/web_ie.jpg

Hab auch nach Browserhacks gegoogled aber da steht immer nur was für is7 und 8. Der ie9 kommt da nicht vor
Auch die Wikipedia hilft mir nicht ganz weiter, da mit absolut unklar ist, wie ich eine zweite CSS erstellen soll die prüft was für ein Browser da ist.
Beim ie hieß das ja mal * hack und wurde in die css reingeschrieben.

Code: Alles auswählen

<!-- START navi -->
        <div id="navi">
           <ul>
               <li><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=2'); ?>">Preise/Anfrage</a></li>
                <li><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=19'); ?>">Bestellung</a></li>
                <li><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=4'); ?>">Container</a></li>
                <li id="entrumpelung"><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=5'); ?>">Entr&uuml;mpelung</a></li>
                <li id="papiertonne"><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=6'); ?>">Papiertonne</a></li>
                <li id="recyclinghof"><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=7'); ?>">Recyclinghof</a></li>
                <li id="halteverbot"><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=8'); ?>">Halteverbot</a></li>
                <li id="schuttrutsche"><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=9'); ?>">Schuttrutsche</a></li>
                <li><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?id=10'); ?>">Infos</a></li>
                <li><a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF'].'?eingebettet=kontakt'); ?>">Kontakt</a></li>
            </ul>
        </div>
        <!-- END navi -->


Hier das CSS:

Code: Alles auswählen

/*  ############################ Start navi Bereich  ############################ */

#navi {
   float:left;
   width: 970px;
   height:67px;
   margin:0;
   padding:0;
   background-image:url(../images/background_v3.jpg);
   background-repeat:no-repeat;
   background-color:#cccccc;
}
#navi ul {  padding:0px;
         /*padding-top:0px;*/
         margin-top:25px;
         padding-left:30px;
         
         }

#navi li {
    list-style: none;
    display: inline;
    /*margin: 0.8em;
   padding: 10px;*/
   /*background-color:#2A1FFF;*/
  }

#navi a {
    /*padding: 0.2em 5em;*/
   
    text-decoration: none;
   font-weight: bold;
    border-left-color: white;
   border-top-color: white;
    color: black;
   padding:10px;
   /*background-color: #ccc;*/
  }
  #navi a:hover {
     color:#009966;
  }


Spezielle Formatierung für die Navi, weil das ja alles photroshop ist und einzelen ausgerichtet werden muss.

Code: Alles auswählen

#entrumpelung {
margin-left: -5px;
}
#papiertonne {
margin-left: -6px;
}
#recyclinghof {
margin-left:-9px;
}
#halteverbot {
margin-left: -4px;
}
#schuttrutsche {
margin-left:-8px;
}
/* browserhack der nicht klappt */
/** + #schuttrutsche {
margin-left:-15px;
}*/



[trixster]

Hm, ich kann dir da nicht weiterhelfen. Ingo hat da tiefere Kenntnisse, vielleicht erkennt er ja dein Problem.

[Patchie]

ok...

Gibt es da nicht eine "Standardvorgehensweise"? Also eine Methode die man bei allen IE anwenden kann?

[trixster]

Ich habe ein Tutorial geschrieben (siehe meine Signatur). vielleicht findest du da eine Lösung, die dir zusagt. Bei deinem Projekt hab ich aber grade keine herangehensweise.

[Patchie]

kraz! 84 Seiten!
Alles sellbst geschrieben??
Wie lange hat das denn gedauert?

[Patchie]

Ach ja noch was:
Ich will meine Hauptnavi ja als <li>liste aufbauen, also so wie es im html speziifziert ist. Kann das aber leider nicht nach links floaten und wenn ich es als BlockElement darstelle, bekomme ich den kleinen schwarzen discuss auf der linken Seite...

Am Besten und einfachsten wäre das ganze mit div-Boxen zu machen, dann werde ich auch irgentwann mal fertig...

Aber ich will es ja 200% html valide und w3c conform hinbekommen...

[Patchie]

Ich hab mal, wegen der Fehlersuche, das Projekt kopiert und alles unseentliche gelöscht. wirklich ALLES.
Und trotzdem gibt es Fehler!!
Auch wenn man es mit div-Boxen statt mit <li>-Listen versucht. (siehe code unten).
Es ist vür mich 200% unverständlich, warum die Schrift plötzlich "länger" wird?! Kann man da noch weitere Angaben machen? Um noch mehr zu spezifizieren wie groß das sein soll?

Wer mir sagen kann, wie man das behebt, dem überweise ich 10€ via pay pal. bin echt am ende. Hab den ganzen Tag versucht eine lösung zu finden.
Nur xhtml VALIDE Lösungen bitte.

Screenshot (mit div boxen):
http://www.mal-anders-webdesign.de/frage/fehler_2.jpg

Minimalcode:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/bildschirm.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
body {
   margin: 0;
   padding: 0;
}
#navi {
   float:left;
   width: 970px;
   height:67px;
   margin:0;
   padding:0;
   /*background-image:url(../images/background_v3.jpg);*/
   background-repeat:no-repeat;
   background-color:#cccccc;
}
.naviEllement {
   float:left;
   font-family:Verdana, Geneva, sans-serif;
   font-size:12px;
}
</style>
</head>

<body>
        <!-- START navi -->
        <div id="navi">
           
          <div class="naviEllement"><a href="#">Preise/Anfrage</a></div>
            <div class="naviEllement"><a href="#">Bestellung</a></div>
            <div class="naviEllement"><a href="#">Container</a></div>
            <div class="naviEllement"><a href="#">Entruempelung</a></div>
            <div class="naviEllement"><a href="#">Papiertonne</a></div>
            <div class="naviEllement"><a href="#">Recyclinghof</a></div>
            <div class="naviEllement"><a href="#">Halteverbot</a></div>
            <div class="naviEllement"><a href="#">Schuttrutsche</a></div>
            <div class="naviEllement"><a href="#">Infos</a></div>
            <div class="naviEllement"><a href="#">Kontakt</a></div>
           
      </div>
        <!-- END navi -->
       
         
</body>
</html>