Website IE tauglich machen

[t.liebetrau]

Hey.

Ich habe folgendes Problem. Ich habe mir ein Design für meine Website erstellt. Wenn ich mit dem Firefox die Seite aufrufe wird alles korrekt angezeigt, aber sobald ich mit dem InternetExplorer auf die Seite gehe, werden ein paar Sachen an falschen Stellen angezeigt.

Weis jemand wie ich das richten kann?
Ich weis das man dafür ne eigene .css eingebunden werden muss, aber was muss da rein?

Gruß Tim

 

[prm]

Eine gesonderte CSS-Datei für den IE brauchst du in der Regel nicht.
Ich vermute, dass deiner Seite ein standardkonformer Doctype fehlt.
Diesen braucht der IE, damit er das CSS-Boxmodell korrekt darstellen kann.

Wenn danach immer noch Unterschiede bei den Abständen auftauchen, kann ein Abstandsreset mit ggf. Neudefinition für die einzelnen Elemente helfen.

Ggf. mal einen Link zur Seite posten.

 

[t.liebetrau]

EDIT: Habe es nun fast hinbekommen. Es fehlte in einer Datei der Doctype. Nun habe ich nurnoch das Problem mit dem blauen Rand welchen ich nicht wegbekomme.

Internet Explorer:


Firefox:

Ich habe jetzt mal 2 Bilder hinzugefügt. Das erste ist vom internetExplorer. Da ist z.B. die Navigationsleiste oben nicht nebeneinander sondern untereinander. Dann ist bei den 3 Grafiken ganz oben ein Blauer Rahmen. Mittig ist die Seite auch nicht.

Bei dem 2. Bild ist es vom Firefox. Da wird alles korrekt angezeigt.

Ein Abstandsreset habe ich bereits versucht --> leider ohne Erfolg. Auch der Doctype ist vorhanden.

Hier mal noch meine .css Datei:

* {
margin: 0;
padding: 0;
} 

body {
background: #ebf0f3;
background-image:url(../images/bg.png);
background-repeat:repeat-x;
font-family: arial;
font-size: 12px;
margin:0;
padding:0;
z-index: 0;
}
#navigation {
color: #ff0000;
width: 1000px;
margin:auto;
}

#mainmenu {
position: relative;
z-index: 1000;
height: 35px;
}

#mainmenu ul,
#mainmenu ul li {
list-style: none;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif; 
font-size:15px;
color:#fff;
}

#topmenu {
background:url(/images/menubg.png) repeat-x top;
width:1000px;
height:36px;
margin: 0 auto;
margin-top:15px;
}

#mainmenu ul li ul {
display: none;
position: absolute;
top: 35px;
}


#mainmenu ul li {
float: left;
}

#mainmenu ul li ul li {
clear: left;  
display:block;
background:#FBCC45;

}

#mainmenu ul li ul li.last {
border-bottom: 4px solid #FBCC45;
}


#mainmenu ul li a {
background: url(../images/menu_space.png) right center no-repeat; 
display:block; 
height:35px; 
text-align: center;
padding-left: 15px;
padding-right: 15px;
text-decoration:none; 
line-height:35px;
white-space:nowrap; 
color:#fff;
}

#mainmenu ul li.active a,
#mainmenu ul li:hover a {
color:#4C4D4E;
background:#FBCC45 url(/images/site/menu_space.png) right center no-repeat;
height:auto;
}



#mainmenu ul li.active ul li a, 
#mainmenu ul li:hover ul li a {
color:#4C4D4E;
background:#FBCC45;
font-size: 13px;
line-height: 22px;
height: 20px;
margin: 0 0 0 7px;
padding-left: 6px;
padding-right: 5px;
display: block;
}


#mainmenu ul li.active ul li, 
#mainmenu ul li:hover ul li{
padding-left: 6px;
padding-right: 5px;
background: none;
}

#mainmenu ul li.active ul li a:hover, 
#mainmenu ul li:hover ul li a:hover {
color:#4C4D4E;
margin: 0 0 0 7px;
padding-left: 6px;
padding-right: 5px;
}

#mainmenu ul li ul li a {
color:#416584;
text-align: left;
padding-left: 6px;
padding-right: 20px;
min-width: 117px;
font-weight: normal;
height: 5px;
display: block;
}

#mainmenu ul li.active ul, 
#mainmenu ul li:hover ul {
display: block;
background:#FBCC45;
}

.menu_price {
float:right;
width: 80px;
margin-left: 5px;
text-align:right;
}
.menu_left {
float:left;
}

.menuitem {
width:250px;
background:#FBCC45;
}

.menuitem:hover {
border-bottom: 1px dotted #4C4D4E;
}
#tophead{
width:1000px;
height:114px;
margin: 0 auto;
background:url(/images/top_head.png) no-repeat;
}
#header {
background-image:url(../layout/header.png);
background-repeat:repeat-x;
margin: 0 auto;
height:110px;
width: 1000px;
color: #ff0000;
}
#logo {
float:left;
}
#mail{
float:right;
width:252px;
height:102px;
text-align:right;
}
#login {
float:right;
text-align:right;
}
.content {
color: #000;
font-size: 20px;
margin:auto;
height:700px;
width: 1000px;

}
hr {
size: 1px;
color: #333333;
}
.footer {
color: #2c2c2c;
margin:0 auto;
height:120px;
width: 1000px;
background-color:#ebf0f3;
}
.footer #links {
border-bottom:0px solid #CCCCCC;
color: #2c2c2c;
font-size: 12px;
}
.footer #info {
border-bottom:0px solid #CCCCCC;
color: #2c2c2c;
font-size: 12px;
}
.footer #service {
border-bottom:0px solid #CCCCCC;
color: #2c2c2c;
font-size: 12px;
}
#apfelworld_partner{
width : 190px;
height : 60px;
background-image : url(../images/apfelworld_schwarz.png); 
}
#apfelworld_partner:hover{
width : 190px;
height : 60px;
background-image : url(../images/apfelworld.png); 
}
#context{
font-size: 13px;
font-family: arial;
color: #000000;
position: absolute;
margin:0 auto;
width: 1000px;
top: 290px;
z-index: 2;
}

Ich hoffe ihr könnt mir helfen.

Gruß Tim

 

[Cheffchen]

Hallo,

also das mit dem Rahmen, sind bestimmt Bilder als link.
Wenn eine css reset hast düfte die auch

img {border:0}

haben oder so.

Das mit center der Seite, zeig ein Link da dort mehrere fehler gemacht haben kannst und es doch etwas leichter ist das live zu sehen.

Cheffchen

 

[prm]

Die mangelnde Zentrierung deutet trotzdem auf einen fehlenden oder falschen Doctype hin.
Dieser muss in der allerersten Quelltextzeile stehen.
Poste bitte einen Link, dann kann man alles im Zusammenhang besser beurteilen.

Versuch's auch mal mit

margin: 0 auto;

 

[t.liebetrau]

Danke nun geht alles :)