✔ Diverse Probleme mit IE6 vs FF

Status
Nicht offen für weitere Antworten.
Papi62

Papi62

Mitglied
Guten Tag

Ich bin schon seit 2 Tagen am durchforsten diverser Foren und hab schon einiges ausprobiert.
Das Problem wird hier ersichtlich.
Ich habe die Container eingefärbt um die Probleme besser sehen zu können.

Firefox:
1. Der Abstand nach dem Text in der mittleren Spalte zu gross bzw. unnötig.
2. Die Bilder im rechten Container sind nicht zentriert.
3. Der linke Container ist trotz fixer Breitenangabe zu breit.
4. Die Rahmen um die Bilder des rechten Containers sollten nicht sein.

IE6:
1. Der mittlere Container wird unter den rechten geschoben.
2. Der linke Container ist trotz fixer Breitenangabe zu breit.
3. Die Rahmen um die Bilder des rechten Containers sollten nicht sein.
4. Die Navi- und Fuss-Leiste sollten nicht über die Scrollbar gehen.

index.html
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Rotair AG</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="de">
<meta name="author" content="René Appert">
<meta name="publisher" content="Rotair AG">
<meta name="copyright" content="Rotair AG">
<meta name="description" content="Webauftritt der Übungsfirma Rotair AG">
<meta name="keywords" content="Rotair AG,MeBeA,Übungsfirma,Mensch,Beruf,Arbeit">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="rotairag.css" type="text/css">
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css">
<![endif]-->

</head>

<body>

<div id="headerwrap">
  <div id="header"></div>

<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a href="#" id="current">Hauptseite</a></li>
    <li><a href="#">über uns</a></li>
    <li><a href="#">Produkte</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Links</a></li>
  </ul>
</div>
</div>

<div id="wrapper">
  <div id="leftCol">
    <div class="menue1">
    <ul>
      <li class="active"><a href="#" class="current">Hauptseite</a></li>
      <li><a href="#">über uns</a></li>
      <li><a href="#">Produkte</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Links</a></li>
    </ul>
        <br>
        <br>
    <ul>
      <li><a href="#">Firmenleitung</a></li>
      <li><a href="#">Auftrag / Ziel</a></li>
      <li><a href="#">CH-Organisation</a></li>
    </ul>
    </div>
  </div>

  <div id="rightCol">
    <div class="img"><a href="#"><img src="http://www.tutorials.de/forum/images/cert.jpg" width="120" height="120" alt=""></a></div><br>
    <div class="img"><a href="#"><img src="http://www.tutorials.de/forum/images/mebea_right.jpg" width="120" height="53" alt=""></a></div><br>
    <div class="img"><a href="#"><img src="http://www.tutorials.de/forum/images/kiga_right.jpg" width="120" height="69" alt=""></a></div><br>
  </div>

  <div id="centerCol">
    <div id="rotair_img"><img src="http://www.tutorials.de/forum/images/rotairag1.jpg" width="522" height="373" alt=""></div>
      <br>
        <p>Übungsfirmen sind Unternehmen, die nach
        modernsten Grundsätzen geführt sind, deren Geschäftstätigkeit
        jedoch fiktiv ist.
        </p>
      <br>
        <h1>Einige Argumente, die für
        einen "vorübergehenden Einsatz" in der Rotair AG sprechen
        </h1>
        <p>Mitarbeitende können ihre Fach- und
        Sozialkompetenzen sowie ihr Beziehungsnetz erweitern, ihre
        beruflichen Fähigkeiten und Möglichkeiten ausweiten,
        ihr Selbstwertgefühl steigern und profitieren von Entscheidungshilfen
        für die Stellenfindung.
        </p>
      <br>
  </div>

  <div class="clear"></div>
</div>

<div id="footerwrap">
  <div id="footer">
    <div id="labfooter">
      <p>Copyright © 2007 <a href="http://www.r-appert.ch">appert online</a></p>
    </div>
  </div>
</div>

</body>

</html>

rotairag.css
Code: 
body, html{
 margin: 0;
 padding: 0;
 height: 100%;

}
body{
 min-width: 800px; /* Prevent content from becoming unreachable in Gecko */
}

/* position:absolute for all browsers - the whole page scrolls */
div#headerwrap{
 position:absolute;
 margin-left: 0px !important;
 margin-left: -8px;
 width: 100%;
 top: 0;
 left: 0;
 height: 167px;
}

/* position:fixed for modern browsers - header and footer do not scroll */
body>div#headerwrap{
 position: fixed;
}

div#header{
 background: url(images/logo.jpg);
 background-position: center;
 background-repeat: no-repeat;
 height: 139px;
 width: 800px;
 margin: 0 auto !important;
}

/*----------Navigation----------*/
#navcontainer ul{
 position:absolute;
 width: 100%;
 min-width: 800px;
 text-align: center;
 padding-bottom: 5px;
 padding-top: 5px;
 padding-left: 0;
 margin-top: 0;
 /* cancels gap caused by top padding in Opera 7.54 */
 margin-left: 0;
 background: url(images/navitop.jpg);
 background-repeat: repeat-x;
 color: white;
 font-weight: bold;
 width: 100%;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 line-height: 18px;
 /* fixes Firefox 0.9.3 */
}

#navcontainer ul li{
 display: inline;
 margin-left: -4px;
 padding-left: 0;
 padding-right: 0;
 padding-bottom: 5px;
 /* matches link padding except for left and right */
 padding-top: 5px;
}

#navcontainer ul li a{
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-top: 5px;
 color: white;
 text-decoration: none;
 border-right: 1px solid #fff;
}

#navcontainer ul li a:hover{
 background: url(images/navitophover.jpg);
 background-repeat: repeat-x;
 color: white;
}

#navcontainer #active{
 border-left: 1px solid #fff;
}

#navcontainer #current{
 background: url(images/navitophover.jpg);
 background-repeat: repeat-x;
 color: #ccffff;
}

/*----------Column Wrapper----------*/
#wrapper{
 width: 800px;
 min-height:100%; /* Moderne Browser */
 height:auto !important; /* Moderne Browser */
 height:100%; /* IE */
 margin: 167px auto 50px auto;
 padding-top: 10px !important;
 padding-top: 177px;
 background: url(images/wrap.gif);
 background-repeat: repeat-y;
}

/*----------Column left----------*/
#leftCol{
 float: left;
 display: inline;
 width: 130px;
 margin-left: 2px;
 padding-left: 5px;
 background: red;
}

.menue1 ul
{
 list-style-type: none;
 margin: 0;
 padding: 0;
}

.menue1 ul li a
{
 background: url(images/list-off.gif) left center no-repeat;
 padding-left: 10px;
 font: normal 12px Verdana, Arial, Helvetica, sans-serif;
 text-decoration: none;
 color: #9999ff;
}

.menue1 ul li a:hover
{
 background: url(images/list-on.gif) left center no-repeat;
 color: #000;
}

.menue1 ul li a.current
{
 background: url(images/list-active.gif) left center no-repeat;
 color: #0000ff;
}

/*----------Column right----------*/
#rightCol{
 float: right;
 display: inline;
 width: 130px;
 margin-right: 2px;
 background: red;
 text-align: center;
}

.img{
 width: 120px;
 padding-top: 0px;
 border: 0;
}

/*----------Column center----------*/
#centerCol{
 margin-right: 134px;
 margin-left: 134px;
 padding-left: 5px;
 padding-right: 5px;
 background: yellow;
}

#rotair_img{
 text-align: center;
 border: 0;
}

.clear{
 clear: both;
 height: 0;
 font-size: 0;
 margin: 0;
 padding: 0;
}

/* no positioning for IE5/Win - the whole page scrolls */
div#footerwrap{
 width: 100%;
 min-width: 800px;
 p\osition: absolute;
 margin-bottom: 0px !important;
 margin-bottom: -1px;
 bottom: 0;
 left: 0;
 height: 50px;
}

body>div#footerwrap{
 position: fixed;
}

div#footer{
 height: 50px;
 width: 100%;
 margin: 0 auto;
}

/* Styling rules to make this page look nice. */
body,
html{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 background: #fff;
}

div#footer{
 color: white;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background: url(images/footer.jpg);
 background-position: center;
 background-repeat: repeat-x;

}

div#footer h2{
 text-align: center;
 padding-bottom: 12px;
 padding-top: 16px;
 padding-left: 0;
 margin-top: 0;
 margin-left: 0;
 line-height: 22px;
 font-weight: bold;
}

div #footer p{
 text-align: center;
 padding-bottom: 14px;
 padding-top: 18px;
 padding-left: 0;
 margin-top: 0;
 margin-left: 0;
 line-height: 18px;
 font-weight: normal;
}

div#footer a{
 color: white;
 font-weight: normal;
 text-decoration: none;
}
div#footer a:hover{
 color: #9999ff;
 font-weight: normal;
 text-decoration: none;
}

h1{
 font-size: 1em;
 text-align: center;
 padding-top: 5px;
}

h2{
 font-size: 1.2em;
 padding-top: 1em;
 margin-top: 0;
}

p{
 margin-bottom: 0;
 font-size: 0.8em;
 text-align: justify;
 line-height: 1.4em;
}

pre{
 font-size: 0.9em;
 line-height: 1.4em;
}

ul{
 font-size: 0.8em;
 line-height: 1.4em;
}

ie6.css
Code: 
html{
 overflow: hidden;
}

body{
 height: 100%;
 overflow: auto;
}
 
Zuletzt bearbeitet:
Hi!
Papi62 hat gesagt.:
Firefox:
1. Der Abstand nach dem Text in der mittleren Spalte zu gross bzw. unnötig.
2. Die Bilder im rechten Container sind nicht zentriert.
3. Der linke Container ist trotz fixer Breitenangabe zu breit.
4. Die Rahmen um die Bilder des rechten Containers sollten nicht sein.
Zum Vergrößern anklicken....
Code: 
#centerCol h1, #centerCol p {
 margin:0;
 }
Ansonsten einfach mal dazwischen die <br>-Tags entfernen.
Code: 
 .img{
 width: 120px;
 padding-top: 0px;
 border: 0;
 margin:0 auto;
}
Code: 
#leftCol{
 float: left;
 display: inline;
 width: 125px; /* 125px + 5px = 130px */
 margin-left: 2px;
 padding-left: 5px;
 background: red;
}
Code: 
.img a img { border:none; }

IE6:
1. Der mittlere Container wird unter den rechten geschoben.
2. Der linke Container ist trotz fixer Breitenangabe zu breit.
3. Die Rahmen um die Bilder des rechten Containers sollten nicht sein
Zum Vergrößern anklicken....
Code: 
#leftCol{
 float: left;
 display: inline;
 width: 125px;
 margin-left: 2px;
 padding-left: 5px;
 background: red;
 margin-right:0 !important;
 margin-right: -3px;
}

#rightCol{
 float: right;
 display: inline;
 width: 130px;
 margin-right: 2px;
 background: red;
 text-align: center;
 margin-left:0 !important;
 margin-left: -3px;
}

#centerCol{
 margin-right: 134px !important;
 margin-right: 131px;
 margin-left: 134px !important;
 margin-left: 131px;
 padding-left: 5px;
 padding-right: 5px;
 background: yellow;
}
  • siehe oben Nr.3
  • siehe oben Nr.4
 
... und wieder einmal hast Du mich gerettet, vielen Dank :D.
... bis auf 2 kleine Details ;-]:
  1. Hab nun in beiden Browsern in der mittleren Spalte, unterhalb des Textes, einen unnötigen Leerraum.
  2. Im IE6 ist die Menue- und Footbar immer noch über der Scrollbar.

Guckst Du hier

Sind zwar nur kleine Schönheitsfehler aber es soll ja alles perfekt sein :p.

Maik hat gesagt.:
Code: 
#leftCol{
 float: left;
 display: inline;
 width: 125px; /* 125px + 5px = 130px */
 margin-left: 2px;
 padding-left: 5px;
 background: red;
}
Zum Vergrößern anklicken....

Kapier ich zwar nicht ganz aber es hat funktioniert :).
 
Der "unnötige" Leerraum nach dem Text ergibt sich wohl aus der Positionierung des Footers am unteren Fensterrand.

Warum der IE die beiden Elemente über den vertikalen Scrollbalken hinaus verbreitert und sie zusätzlich darüber positioniert, kann ich derzeit auch nicht nachvollziehen.

Warum hab ich als Breite "125px" gewählt?

Gemäß dem Boxmodell wird u.a. die padding-Eigenschaft zur Breite und/oder Höhe eines Elements hinzugezählt. Wenn die Spalte 130px breit angezeigt werden soll, und einen linken Innenabstand von 5px besitzt, lautet die Breitendefinition width:125px.
 
Ah, gut, wieder etwas dazu gelernt.
Dann geht mein Dank mal wieder an Dich und wir lesen uns beim nächsten Problem :).

Gruss Papi62
 
Meine Aussage bzgl. des Leerraums muss ich etwas relativieren, denn die Seite kann trotz wenigem Inhalt "nachgescrollt" werden, was an der margin-top:177px- und padding-top:177px-Deklaration für das DIV #wrapper liegt, da diese, wie eben gelernt, zur 100%-Mindesthöhe hinzuaddiert wird.

Was den IE betrifft, könnte dir evtl. Stu Nicholls' Beispiel http://www.cssplay.co.uk/layouts/basics2.html weiterhelfen.
 
Achso :), naja erst mal Wochenende. Dann wünsch ich Dir ein ebensolches schönes :).

PS: hab ich hinbekommen mit "right: 16px;" :)
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück