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

Anfänger -> CSS wird bei Firefox 100% angezeigt aber beim IE nur ein teil

Status
Für weitere Antworten geschlossen.
M

mscheller

Neues Mitglied
Hallo habe folgendes Problem ich habe eine Webseite mit div tag und css erstellt, ich hoffe ich drücke ich richtig aus.
Also alles wird im Firefox richtig angezeigt aber beim IE leider nicht.

Testschauts auch doch bitte mal an im IE 7 und Firefox

mein Code:

default.html
Code: 
<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTC Systemhaus</title>
<link rel="stylesheet" title="CSS" type="text/css" href="style.css" media="screen" />
</head>

<body>

<div id="wrapper">    
    <div id="head">
    </div>
    <div id="navhead" class="style1">
    
                <a href="default.htm">Home</a> | <a href="leistung/leistung.htm">Leistung</a> | <a href="service/service.htm">Service</a>

            
    </div>
    <div id="leftcol">
    </div>
    <div id="rightcol">
    </div>
    <div id="footer">
    </div>
</div>

</body>

</html>
style.css
Code: 
body, div, h1, h2, h3, h4, p, a {
    margin:0;
    padding:0;
    border:none;
}

body {
    background-color: #f0f2f1;
    font-family: 'Lucida Sans', 'Trebuchet MS', Helvetica, Arial, Sans-Serif;
    font-size: 85%;
    color: #666;
}

/* Typography */

h1 {
   font-size:1.8em;
   font-weight:bold;
   margin:0.8em 0;
   color:#000000;
   font-variant:small-caps;
}
    
h2 {
   font-size:1.5em;
   font-weight:bold;
   margin:0.8em 0;
   color:#000000;
   font-variant: small-caps;
}

h3 {
   font-size:1.2em;
   font-weight:bold;
   margin:0.8em 0;
   color: #000000;
   font-variant:small-caps;
}

p {
   line-height:1.6em;
   margin:0.8em 0 1.5em 0;
}

a {
    color:#00000;
}

a:hover {
    color:#FFF;
    background-color:#FFCC22;
    text-decoration:none;
}

    
/* Layout */

#wrapper {
    background-color:#ffffff;
    position: relative;
    width: 850px;
    margin: 20px auto;
}

#head {
    position: relative; 
    width: 850px; 
    height: 169px; 
    z-index: 1; 
    background-image: url('images/headertop.jpg'); 
    left: 0px; 
    top: 0px;" 
    z-index: 0;
    }

#navhead {
    text-align: right;
    position: relative; 
    background-image: url('images/headerbottom.jpg');
    width: 850px; 
    height: 25px; 
    z-index: 6; 
    left: 0px; 
    top: 0px; 
    z-index: 1;
    
}

#leftcol {
    background-color: #33CC33;
    position: relative;
    width: 170px;
    height: 100px;
    z-index: 2;
    float: left;
}



    

#rightcol {
    background-color: #008080;
    position: relative;
    width: 680px;
    height: 100px;
    z-index: 3;
    float: right;
}

#footer {
    position: relative; 
    width: 850px; 
    height: 40px; 
    z-index: 4; 
    float: left; 
    background-image: url('images/footer3.jpg');
}


/* Formatvorlagen für die Navigation */
#navhead ul {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
#navihead li {
    float: left;
}
#navihead a {
    color: #fff;
    text-decoration: none;
    margin: 0 1px;
    padding: 5px;
    display: block;
    border: 1px solid #ffffff;
}
#navhead a:hover {
    border: 1px solid #b4b4b4;
    background-color: #b4b4b4;
}
firefox.jpg

frage%29IE.jpg
 
Werbung:
position:relative? Wozu? Mehrfacher z-index in einer Klasse? warum?

Alles rausschmeißen und dann nochmal prüfen
 
Was meinst Du mit doppelter Z-index... soll ich überalle relative entfernen?

Habe jetzt alles soweit entfernt ist aber immer noch das selbe.. hier noch mal der Code mit den änderungen





body, div, h1, h2, h3, h4, p, a {
margin:0;
padding:0;
border:none;
}

body {
background-color: #f1f1ef;
font-family: 'Lucida Sans', 'Trebuchet MS', Helvetica, Arial, Sans-Serif;
font-size: 85%;
color: #666;
}

/* Typography */

h1 {
font-size:1.8em;
font-weight:bold;
margin:0.8em 0;
color:#000000;
font-variant:small-caps;
}

h2 {
font-size:1.5em;
font-weight:bold;
margin:0.8em 0;
color:#000000;
font-variant: small-caps;
}

h3 {
font-size:1.2em;
font-weight:bold;
margin:0.8em 0;
color: #000000;
font-variant:small-caps;
}

p {
line-height:1.6em;
margin:0.8em 0 1.5em 0;
}

a {
color:#00000;
}

a:hover {
color:#FFF;
background-color:#FFCC22;
text-decoration:none;
}


/* Layout */

#wrapper {
background-color:#ffffff;
position: relative;
width: 850px;
margin: 20px auto;

}

#head {
width: 850px;
height: 169px;
background-image: url('images/header4.jpg');
left: 0px;
top: 0px;";
}

#navhead {
text-align: right;
background-image: url('images/headerbottom.jpg');
width: 850px;
height: 25px;
left: 0px;
top: 0px;
}

#leftcol {
background-color: #FFFFFF;
width: 100px;
height: 100px;
float: left;
}


#rightcol {
width: 550px;
height: 100px;
float: right;
}



#main {
background-color: #FFFFFF;
width: 850px;
height: 100px;
float: left;
}

#footer {
width: 850px;
height: 40px;
float: left;
background-image: url('images/footer.jpg');
}


#bottom {
width: 850px;
height: 20px;
float: left;
background-color: #f1f1ef;
font-size: xx-small;
text-align: right;





}


/* Formatvorlagen für die Navigation */
#navhead ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#navihead li {
float: left;
}
#navihead a {
color: #fff;
text-decoration: none;
margin: 0 1px;
padding: 5px;
display: block;
border: 1px solid #ffffff;
}
#navhead a:hover {
border: 1px solid #b4b4b4;
background-color: #b4b4b4;
}
 
Zuletzt bearbeitet:
Werbung:
Bezeichnungen beachten

Du hast eine id namens #navhead und weiter unten willst du die listen punkte ansprechen, wo sie dann plötzlich #navihead li und bei den links auch #navihead a heißt.
Und wenn du die liste floaten lassen willst, wegen der horizontalen darstellung, würd ich das float für die ul und auch für die li vergeben. Außerdem fällt mir auf dass dein float nich gecleart wird. Kann man ohne html markup erreichen in dem du den container #navhead die eigenschaft: overflow:hidden; verleihst.

Der IE is halt recht mürrisch mit dem Thema float. Gibt unzählige Bugs die das Thema betreffen. Welcher da genau ausgelöst is, kann i dir jetzt auch nich so genau sagen. Aber probier mal was i da geschrieben habe, vielleicht klappts ja.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben