✔ Darstellungsprobleme mit IE 5.5 und 7

Papi62 · 27. September 2007

Hällöle

Ich hatte endlich die Site in IE6 und FF stehen, alles funktionierte wunderbar (siehe letzter Thread), dann hab ich rausgefunden dass in der Hauptstelle der IE7 benutzt wird *kotz*.

Was muss ich nun machen damit die Site www.rotairag.ch/neu im IE5.5 und IE7 auch richtig angezeigt wird, bzw was muss ich in die ie5.5.css und ie7.css eintragen ? Ich steh total auf dem Schlauch.

index.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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 5.5]>
<link rel="stylesheet" href="ie5.5.css" type="text/css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.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="index.html" id="current">Hauptseite</a></li>
    <li><a href="ueberuns.html">über uns</a></li>
    <li><a href="inarbeit.html">Produkte</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="links.html">Links</a></li>
  </ul>
</div>
</div>

<div id="wrapper">
  <div id="leftCol">
    <div class="menue1">
      <ul>
        <li class="active"><a href="index.html" class="current">Hauptseite</a></li>
        <li><a href="ueberuns.html">über uns</a></li>
        <li><a href="inarbeit.html">Produkte</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="links.html">Links</a></li>
      </ul>
        <br>
      <ul>
        <li><a href="gleitung.html">Firmenleitung</a></li>
        <li><a href="auftrag.html">Auftrag / Ziel</a></li>
        <li><a href="orga.html">CH-Organisation</a></li>
      </ul>
    </div>
  </div>

  <div id="rightCol">
    <div class="img"><a href="sqs.html" target="_blank"><img src="images/cert.jpg" width="120" height="120" alt=""></a></div><br>
    <div class="img"><a href="http://www.mebea.ch" target="_blank"><img src="images/mebea_right.jpg" width="120" height="53" alt=""></a></div><br>
    <div class="img"><a href="http://www.augusta-raurica.ch/docs/vsd/kiga/main_kiga.htm" target="_blank"><img src="images/kiga_right.jpg" width="120" height="69" alt=""></a></div><br>
    <div class="w3c"><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.rotairag.ch%2Fneu%2F;ss=1;outline=1" target="_blank">
      <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a></div>
    <div class="w3c"><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.rotairag.ch/neu/rotairag.css" target="_blank">
      <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></div>
  </div>

  <div id="centerCol">
    <div id="rotair_img"><img src="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>
  </div>

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

<div id="footerwrap">
  <div id="footer">
    <div id="labfooter">
      <p>designed 2007 by <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;
 right: 0px !important;
 right: 8px;
 width: 101%;
 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;
 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;
 padding-bottom: 50px;
 background: url(images/wrap.gif);
 background-repeat: repeat-y;
}

/*----------Column left----------*/
#leftCol{
 float: left;
 display: inline;
 width: 125px; /* 125px + 5px = 130px */
 margin-left: 2px;
 padding-left: 5px;
 margin-right: 0 !important;
 margin-right: -3px;
}

.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;
}

.menue1 p
{
 text-align: right;
 padding-right: 5px;
 margin-bottom: 5px;
 font: normal 10px Verdana, Arial, Helvetica, sans-serif;
 text-decoration: underline;
 font-weight: bold;
 color: #000;
}

/*----------Column right----------*/
#rightCol{
 float: right;
 display: inline;
 width: 130px;
 padding-right: 3px;
 text-align: center;
 margin-right: 0 !important;
 margin-right: -3px;
}

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

.img a img{
 border:none;
}

.w3c a img{
 border:none;
}

/*----------Column center----------*/
#centerCol{
 margin-right: 134px !important;
 margin-right: 131px;
 margin-left: 134px !important;
 margin-left: 131px;
 padding-left: 5px;
 padding-right: 5px;
}

#centerCol h1, #centerCol p{
 margin:0;
 padding-left: 10px;
 padding-right: 10px
}

.ul_1{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 font-size: 12px;
}

.ul_2{
 padding-left: 15px;
 margin-top: 5px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 font-size: 12px;
}

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

#rotair_img a img{
 border:none;
}

.rotair_p{
 text-align: center;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #000;
 font-size: 12px;
}

.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;
 position: 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{
 position:absolute;
 right: 0px !important;
 right: 16px;
 width: 100%;
 min-width: 800px;
 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: 14px;
 text-align: center;
 padding-top: 5px;
 padding-bottom: 5px;
}

h2{
 font-size: 16px;
 padding-top: 10px;
 margin-top: 0;
}

p{
 margin-bottom: 0;
 font-size: 12px;
 text-align: justify;
 line-height: 16px;
}

pre{
 font-size: 13px;
 line-height: 16px;
}

ul{
 font-size: 12px;
 line-height: 16px;
}

ie6.css

Code:

html{
 overflow: hidden;
}

body{
 height: 100%;
 overflow: auto;
}

Ich hatte denselben code schon in ie5.5.css und ie7.css probiert, hat nix gebracht.

Im IE7 schiebt sich der Content hinter den fixierten Header und missachtet dabei den Abstand oben.
Im IE5.5 ist das ganze Gedöns links anstatt in der Mitte und Header/Footer sind nicht mehr fixiert.

Dank schon mal für eure Hilfe.

Maik · 27. September 2007

Hi,

Lösung für den IE7:

rotairag.css:

Code:

/* 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;
 z-index:2;
}

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

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

Lösung für den IE5.5:

ie6.css:

Code:

body{
 height: 100%;
 overflow: auto;
 text-align:center;
}

Was den Header und Footer betrifft, kann ich dir auch hier, wie schon im letzten Thread, nur http://www.cssplay.co.uk/layouts/basics2.html empfehlen.

subara · 27. September 2007

Sry hat jetz nichts mit dem Code zu tun, aber ich geb dir mal so einige tipps wie du die seite übersichtlicher gestalten köntest...

Am besten würde ich die Navigation oben ganz weg lassen, keine seite braucht 2 gleiche navigationen.

Die beschriftung was, was ist in der Navi -> Über uns <- würde ich mit <li> und <ul> machen.
bzw die unterpunke bei über uns gleich untendrann leicht nach rechts versetzen und den Punkt Über Uns fett und eventuell unterstrichen anzeigen lassen.

Zudem finde ich die gewählte Farbe zu grell... versuche es mal mit einem milderen blau.

P.S: Dies soll keine kritik darstellen oder jemanden zur schnecke machen.
Dies dient lediglich zur hilfe.

Papi62 · 27. September 2007

Vielen Dank mal wieder Maik (oder Michael ?

) Im IE7 funktionierts, das ist die Hauptsache. Den IE5 bekomm ich dank Deiner Hilfe auch noch zum laufen.
Was würd ich nur ohne Dich machen *knutsch*

.

@ Subara
Den blauen Balken brauch ich als optischen Trenner und damit der nicht so leer ausschaut ist da halt ein Menue drin, das erfüllt auch noch den Zweck die jeweilige Seite anzuzeigen.
Im Menue der linken Spalte kann ich keine Untermenues machen weil der Patz (Breite) nicht reicht und ich nicht das komplette Layout umbauen will.
Mir gefällt die Farbe, ist mal nicht so ein schwules hellblau

subara hat gesagt.:
Dies soll keine kritik darstellen oder jemanden zur schnecke machen.

Ich brauch das, jaaaa, gibs mir *g*.

subara · 1. Oktober 2007

nagut, wie du willst

hab dir nur erklären wollen dass es gewisse Grundsteine bei Homepages in Aussehen und farbe gibt.
Du must einfach mal schauen dass es angenehm für das auge ist....

http://www.rasputin.de:nospam: ist ein tolles beispiel für beschi**ene homepages. und wie du siehst benutzen die auch solche farben

kannst ja mal bei wigibedia lesen
http://de.wikipedia.org/wiki/Webdesign#Gestaltung

✔ Darstellungsprobleme mit IE 5.5 und 7

Papi62

Mitglied

Maik

subara

Mitglied

Papi62

Mitglied

subara

Mitglied

Neue Beiträge