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

Boxmodell und IE7

Status
Für weitere Antworten geschlossen.
L

LisaB

Neues Mitglied
Hallo!

Da ich nun schon ein dutzend Artikel bzgl. Boxmodell und CSS-Hack für IE usw. gelesen habe und nichts funktioniert hat, bin ich nun froh, ein Anfänger-Forum gefunden zu haben, indem ich hoffentlich eine Lösung für mein Problem erhalte.

Ich habe eine einfache Navigation gemacht, bei der die Buttons, bzw. der Inhalt davon gut gepolstert ist.
Zumindest im Firefox.
Der IE 7 stellt bei mir die Elemente extrem schmal dar, ohne border und padding.

Was habe ich falsch gemacht?


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html> 
   <head> 
      <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
      <title>Unbenannte Seite</title> 
      <style type="text/css"> 
      #navcontainer ul {list-style-type: none; 
                    display: inline; 
                    font-family: Tahoma; 
                    font-size: .8em; 
                    float: right; 
                    width: auto; 
                    margin:0; padding: 0; 
                     height: 2em 
                    } 
      #navcontainer a{ 
                  color: #666; 
                  background-color: #fbe6e5; 
                  padding: .5em .8em; 
                  text-decoration: none; 
                  text-align: center; 
                  border: .1em solid #fbe6e5 
                   } 
      #navcontainer a:hover {background-color: #e6e3e3; 
                        border: .1em outset #9c9a99 
                         } 
      #navcontainer a:active {border: .1em inset #9c9a99} 
                   
      #navcontainer li {margin: 0 .2em 0 0; 
                     display: inline; 
                     } 
       
       li#active a, li#active a:hover { 
                  color: white; 
                  background-color: #83484a; 
                  padding: .5em .8em; 
                  text-decoration: none; 
                  text-align: center; 
                  cursor: default; 
                  border: .1em inset #9c9a99 
                   } 
 
</style> 
   </head> 
 
   <body> 
      <div id="navcontainer"> 
         <ul> 
            <li id="active"><a title="Home" href="#">Home</a></li> 
            <li><a title="Fotos" href="#">Fotos</a></li> 
            <li><a title="Aqua" href="#">Aqua</a></li> 
            <li><a title="Gästebuch" href="#">Gästebuch</a></li>       
         </ul>    
          
      </div> 
   </body> 
 
</html>

Entschuldigt die äußere Form; durch das viele herumprobieren sieht es recht zerfleddert aus.

Liebe Grüße
Lisa
 
LisaB schrieb:
Was habe ich falsch gemacht?
Zum Vergrößern anklicken....
Nicht viel.
a ist ein inline-Elment, die sind immer nur so hoch wie die Zeile (im IE jedenfalls).
Deswegen ist oben und unten kein Platz für padding.
Wenn du der Zeile eine Höhe gibst (line-height) funktioniert es auch im IE7:
Code: 
      #navcontainer a{ 
                  color: #666;
                  line-height:5em; 
                  background-color: #fbe6e5; 
                  padding: .5em .8em; 
                  text-decoration: none; 
                  text-align: center; 
                  border: .1em solid #fbe6e5;
                   }
5em hab ich mir ausgedacht. Das mußt du anpassen.
 
Zuletzt bearbeitet:
Hallo Neoroleptika,

vielen Dank für deine schnelle Hilfe!

Es hat tatsächlich geklappt. Darauf hätte ich natürlich auch kommen können, hab das line-height auch bereits bei anderen IDs gesetzt, aber bei #nav a hab ichs komischerweise noch nicht ausprobiert. :???:

Die Buttons haben zwar jetzt im Firefox einen größeren Abstand nach oben und sind nicht mehr ganz links oben, aber das ist das kleinste Problem.

Danke nochmal.

Lg
 
Danke Neuroleptika.

Habe jetzt NUR bei #nav ul /line-heigt:3em eingefügt und bin mit dem Ergebnis zufrieden.
Über den Buttons ist im IE nach wie vor ein Abstand nach oben von ca. 2-3em, aber wenn ich das ganze in meine Seite einfüge, wirds hoffentlich passen und der Abstand ist zu vernachlässigen.

Wenns nicht passt, weiß ich ja jetzt, wo ich nette Hilfe finde.

liebe Grüße
 
Hi,

LisaB schrieb:
Danke Neuroleptika.

Habe jetzt NUR bei #nav ul /line-heigt:3em eingefügt und bin mit dem Ergebnis zufrieden.
Über den Buttons ist im IE nach wie vor ein Abstand nach oben von ca. 2-3em, aber wenn ich das ganze in meine Seite einfüge, wirds hoffentlich passen und der Abstand ist zu vernachlässigen.

Wenns nicht passt, weiß ich ja jetzt, wo ich nette Hilfe finde.

liebe Grüße
Zum Vergrößern anklicken....

das mit dem Abstand kenne ich, Ursache ist das wie so oft #navcontainer li
kein Layout für den IE hat.

Lösung:
Code: 
#navcontainer li { height:1% }
Das bindest du per Conditionell Comment für die IE-Versionen im <head> deines Dokuments ein.

Mir sind aber noch ein paar Sachen bei deiner horizontalen Navi aufgefallen:

du machst das per display:inline; Ein Beispiel:
Code: 
*  { 
  margin:0;
   padding:0;
   }
#navicontainer li  {
    display:inline;
     }
#navicontainer a  {
    padding:.0.5em;
    margin:0 1em;
     }
display:inline für li reicht aus um sie in eine Reihe zu bekommen.
Mit margin für a wird der abstand zwischen den Listenpunkten vergrößert, mit padding die anklickbare Fläche vergrößert.

Bei dir hat #navicontainer ul display:inline und float:right.
Zuerst machst du ein Inlineelement und dann durch float ein Blockelement.
Das finde ich etwas widersprüchlich.

Wenn du die Liste rechts haben willst gib doch #navicontainer text-align:right;

ich täte bei #navicontainer ul das float, height und display:inline rausschmeissen, das brauchst du nicht.
Die Höhe regelst du per margin/padding.
Außerdem würde ich ul ne feste Breite verpassen damit es Layout für den IE hat (width:auto; gibt kein Layout!!), es sei denn die navileiste soll nur so breit wie ihr Inhalt werden dann kannste auch width rausschmeissen.
dann bräuchte die ul allerdings Layout für den IE (gleiche Technik wie oben beschrieben).

Sollte damit die Darstellung nicht wie gewünscht sein, mußt du die navileiste evtl. mit float für li statt mit display:inline; verwirklichen, da hast du dann mehr Kontrolle über die Darstellung.

Wenn du deswegen Hilfe brauchst poste es einfach.:)

koslowski
 
Wenn ich nichts übersehen habe, kommt der obere Abstand vom voreingestellten padding von body. Der ist von Browser zu Browser unterschiedlich.

Das erledigt sich dann beim Einbau in die Webseite.
 
Hi,

neuroleptika schrieb:
Wenn ich nichts übersehen habe, kommt der obere Abstand vom voreingestellten padding von body. Der ist von Browser zu Browser unterschiedlich.

Das erledigt sich dann beim Einbau in die Webseite.
Zum Vergrößern anklicken....

gut möglich. Hab das mit dem *-Selektor reingesetzt um ne einheitliche Grundlage zu haben. Die CSS war ja sicher nur ausschnittsweise gepostet.

Mein längerer Post war vor allem deshalb, weil sie Listennavis scheinbar noch nicht gut umzusetzen versteht.

Gruß
koslowski
 
Hallo Koslowski,

vielen lieben Dank für deine vielen Ratschläge und Tips.
Du hast recht, ich habe noch keine Erfahrung mit Listennavis und habe wirklich viel rumprobiert.

Deine Tips habe ich alle umgesetzt und freue mich sehr über das Ergebnis. Bei mir war scheinbar wirklich einiges doppelt gemoppelt durch das viele Probieren, aber man will ja auf Nummer sicher gehen ;-)

Die Navigation ist jetzt so, wie ich sie mir vorstelle.

Ich hoffe, der Code sieht nun auch ordentlich aus. Hier ist mal der Auszug aus der CSS.


Code: 
html, body    {
            font-size: 62,5%; 
            color: #3c3c3c; 
            background: #666666 url(...jpg) repeat-x center top; 
            background-color: #e6e3e3; 
            margin:0; 
            padding:0; 
            min-height: 100%; 
            height: auto !important; }
(...) 
#navcontainer {text-align: right;}

#navcontainer ul {
            list-style-type: none;
            font-family: Tahoma;
            font-size: .8em;
            width: auto;
            margin-top: 115px; 
            /margin-top:110Px; }

#navcontainer li {
            height:1%;
            margin: 0 .2em 0 0;
            display: inline;}
                                
#navcontainer a {
            color: #666;
            background-color: #fbe6e5;
            padding: .5em .8em;
            text-decoration: none;
            text-align: center;
            border: .1em solid #fbe6e5}
        
#navcontainer a:hover {
            background-color: #e6e3e3;
            border-bottom: 1px solid #5b5b5b;
            border-right: .1em solid #5b5b5b;
            border-left: .1em solid #fafafa;
            border-top: .1em solid #fafafa;}
        
#navcontainer a:active {
            border-bottom: 1px solid #fafafa;
            border-right: .1em solid #fafafa;
            border-left: .1em solid #5b5b5b;
            border-top: .1em solid #5b5b5b;}
                                
li#active a, li#active a:hover {
            color: white;
            background-color: #83484a;
            padding: .5em .8em;
            text-decoration: none;
            text-align: center;
            cursor: default;
            border: .1em inset #9c9a99}
 
Moin,

eine Kleinigkeit noch:
Code: 
#navcontainer li { height:1%; }

würde ich nicht in die normale CSS schreiben sondern per Conditionell Comment im <head> deines Dokuments einbinden, damit es nur der IE zu sehen bekommt.

Beispiel:
Code: 
<!--[if IE 6]>
  <style type="text/css">
    @import url(texte/ie6.css);
  </style>
<![endif]-->  

<!--[if IE 7]>
  <style type="text/css">
    @import url(texte/ie7.css);
  </style>
<![endif]-->

So regel ich das immer, eine extra css-Datei für den IE7 und eine für den IE6, weil manche Hacks nur für den IE6 und manche nur für den IE7 sind.

Das schreibe ich unmittelbar vor </head> in jedes Dokument.;-)

Gruß
koslowski
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben