Positionierung im Internetexplorer anders

[Pyrofreak]

Hallo!

Auf meiner Startseite (index) ist die Positionierung linksund rechts der letzten
beiden div Container anders als im Firefox Browser, das kann ich leider nicht so belassen,weil es sehr auffällt! Leider weis ich nicht was der Grund ist, vermute
aber das es der "border: 4px" oben in der Titelleiste ist...

http://www.chat-surium.com/

Wie gesagt im Firefox sieht die Seite normal aus, aber im Internet Explorer
nicht!

gr Pyro

[Pyrofreak]

Hallo!

Habe den CSS Code vergessen...

* {
 margin: 0;
 padding: 0;           /* Alle Abstände werden auf Null gesetzt */
}
body {
 background-image: url(../Bilder/Hintergrund1.jpg);
 background-repeat: repeat-x;
 background-color: #8F3D00;
 background-attachment: scroll;
 color: black;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 78%;
 text-align: center;   /* Internet-Explorer 5.x Hack */
}
.Logo {            
 float: left;          /* Image-Logo */
 margin: 0;
 padding: 0 0 10px 0;
 text-decoration: none;
 border: none;
}
.beide {
 clear: both;
}
.Deutsch {
 position: absolute;
 top: 99px;
 left: 37px;
 border: 1px solid #8F3D00;
 margin: 0;
 padding: 0;
}
h1 {                   
 margin: 0;
 padding: 0;          /* Überschriften h1 */
 font-size: 109%;
 text-align: left;
}
h2 {
 margin: 0;
 padding: 0 0 0 3px;         /* Überschriften h2 */
 font-size: 108%;
 text-align: center;
 display: inline;
}
h3 {
 margin: 0 0 2em 0;
 padding: 0;        /* Überschriften h3 */
 font-size: 95%;
}
p {
 margin: 0;
 padding: 0 0 2.5em 0;       /* Absätze */
 text-align: left;
 line-height: 1.7em;
}
a:link {
 color: #0000FF;
 text-decoration: none;
}
a:visited {
 color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #0000FF;
 text-decoration: underline;
}
#Box {
 background-color: #FFBF47;
 margin: 15px 20px 15px 20px;
 padding: 10px;
}
#Kopfleiste-Unten {
 border-top: 1px solid #8F3D00;
 border-right: 1px solid #8F3D00;
 border-left: 1px solid #8F3D00;
 border-bottom: 4px solid #8F3D00;
 background-color: #FFDFA3;
 height: 33px;
}
#Kopfleiste-Unten ul {
 list-style-type: none;
 margin: 0;
 padding: 0.7em 35px 0.4em 0;
 text-align: right;
}
#Kopfleiste-Unten li {
 display: inline;
 color: #7C5C1E;
}
#Kopfleiste-Unten a:link, #Kopfleiste-Unten a:visited {
 text-decoration: none;
}
#Titelzeile {
 margin: 0;
 padding: 0.7em 0 0.4em 32px;
 width: 465px;
 float: left;
}
.Chat-Smiley1 {
 position: absolute;
 top: 98px;
 right: 37px;
 margin: 0;
 padding: 0;
}
#Hauptteil {
 position: relative;
 top: 0;
 left: 0;
 margin-top: 4px;
 width: 100%;
 height: 1%;
}
#Inhalt {
 margin: 0 190px 0 211px;
 padding: 20px;
 border: 1px solid #8F3D00;
 background-color: #FFDFA3;
 color: black;
}
#Sprache {
 position: absolute;
 top: 0;
 right: 0;
 width: 179px;
 background-color: #FFDFA3;
 color: black;
 border: 1px solid #8F3D00;
 margin: 0;
 padding: 0;
}
.Chaticon {
 text-decoration: none;
 border: none;
}
.Flaggen {
 text-decoration: none;
 border: 1px solid #8F3D00;
}
.Chaticon1 {
 text-align: center;
 margin: 0 0 2.5em 0;
}
#Seitenleiste {
 position: absolute;
 right: 0;
 top: 97px;
 width: 179px;
 background-color: #FFDFA3;
 color: black;
 border: 1px solid #8F3D00;
 margin: 0;
 padding: 0;
}
#suchform .text {
 width: 137px;
 border: 1px solid #8F3D00;
}
#suchform .suchknopf {
 text-align: right;
 margin-top: 4px;
}
#suchform .btn {
 border: 1px solid #8F3D00;
 background-color: #FFDFA3;
 color: black;
}
#Seitenleiste h3, #Sprache h3 {
 text-align: left;
 background-color: #FFDFA3;
 margin: 0 0 1.4em 0;
 padding: 0;
}
#Seitenleiste .Innen, #Sprache .Innen {
 margin: 0;
 padding: 20px;
}
#Navigation {
 position: absolute;
 top: 0;
 left: 0;
 width: 200px;
 border-top: 1px solid #8F3D00;
 border-right: 1px solid #8F3D00;
 border-left: 1px solid #8F3D00; 
 text-align: left;
 margin: 0;
 padding: 0;
}
#Navigation ul, #Oesterreich ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#Navigation li, #Oesterreich li {
 border-bottom: 1px solid #8F3D00;
}
#Navigation li a:link, #Navigation li a:visited,
#Oesterreich li a:link, #Oesterreich li a:visited {
 font-size: 100%;
 font-weight: bold;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 background-color: #FFDFA3;
 text-decoration: none;
}
#Navigation li a:hover, #Oesterreich li a:hover {
 background-color: #FFBF47;
 padding: 0.4em 0 0.4em 0.5em;
}
.Navigationsüberschriften {
 margin: 0;
 padding: 0.4em 0 0.7em 0.4em;
 height: 16px;
 background-color: #FFDFA3;
 border-bottom: 1px solid #8F3D00;
}
#Oesterreich {
 position: absolute;
 top: 351px;
 left: 0;
 width: 200px;
 border-top: 1px solid #8F3D00;
 border-right: 1px solid #8F3D00;
 border-left: 1px solid #8F3D00; 
 text-align: left;
 margin: 0;
 padding: 0;
}
#Fußleiste {
 width: 100%;
 border-bottom: 1px solid #8F3D00;
 margin-top: 10px;
 clear: both;
}
#Fußleiste p {
 margin: 0;
 padding: 0;
 text-align: center;
}
#Fußleiste a:link, #Fußleiste a:visited {
 text-decoration: none;
}
#Inhalt2 {
 margin: 0;
 padding: 20px;
 border: 1px solid #8F3D00;
 background-color: #FFDFA3;
 color: black;
}
.Flirttipps {
 list-style-type: disc;
 line-height: 1.7em;
 margin-left: 3em;
 text-align: left;
 padding: 0 0 2.5em 0;
}
dl.Links {
 width: 64em;
 margin: 0 auto;
 padding: 0 0 2.5em 0;
}
.Links dt {                
 width: 22em;                                 
 float: left;                                                                                                   
 margin: 0;                                               
 padding: 0.4em;
 border-bottom: 1px solid #8F3D00;
 text-align: left;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */    
                                        
.Links dd {
 float: right;
 width: 36em;
 margin: 0;
 padding: 0.4em;
 border-bottom: 1px solid #8F3D00;
 text-align: left;
}
table.Chat-Slang {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2.5em;
 margin-top: 0.5em;
 table-layout: fixed;
 width: 795px;
 line-height: 1.7em;
 border-collapse: collapse;
 border: 1px solid #8F3D00;
 text-align: left;          /* Internet-Explorer 5.x Hack */
}
th.Kopf, tr.Zeile {
 padding: 0.4em 0 0.4em 0; 
 text-align: center;
}
col.Zeichen {
 width: 60px;
 background-color: #D4DAFF;
 text-align: center;
}
col.Bedeutung {
 width: 205px;
 background-color: #A9B5FF;
 text-align: center;
}
.Zentriert {
 text-align: center;
 margin: 0 auto;
}
div #Sitemap {
 margin: 0 auto;
 width: 700px;
 border: 1px solid #8F3D00;
}
div #Sitemap ul li {
 padding: 4em 0 2em 4em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul li {
 padding: 2em 0 2em 6em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul ul {
 padding: 2.8em 0 0 9.4em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul ul li {
 padding: 0;
 text-align: left;
 margin: 0;
 list-style-type: none;
 border-top: 1px solid #8F3D00;
 border-left: 1px solid #8F3D00;
 border-right: 1px solid #8F3D00;
 width: 200px;
}
#Sitemap ul ul ul a:link, #Sitemap ul ul ul a:visited {
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 width: 200px;
 text-decoration: none;
}
#Sitemap ul ul ul a:hover {
 background-color: #FFBF47;
 width: 200px;
 padding: 0.4em 0 0.4em 0;
 text-decoration: none;
}
.bottom {
 border-bottom: 1px solid #8F3D00;
}
.Bücher {
 float: left;
 border: 1px solid #8F3D00;         /* Bücher */
 margin-right: 10px;
 margin-left: 20px;
 margin-bottom: 4em;
}
.Formular {
 margin-left: auto;
 margin-right: auto;                 /* Email Kontaktformular */
 border: 1px solid #8F3D00;         
 border-collapse: collapse;        
 width: 70%;
 text-align: center;                        
}
.main {
 background-color: #A9B5FF;          /* Email Kontaktformular */
 border : 1px solid #8F3D00; 
 border-collapse: collapse;         
 width: 100%;
 height: 25px;         
}
fieldset {
 border: none;
}
.mainleft {
 background-color: #A9B5FF;
 border : 1px solid #8F3D00;
 border-collapse: collapse;
 width: 30%;
}
.captcha {
 background-color: #A9B5FF;
 text-align: center;
 width: 150px;
 height: 50px;
}
.head {
 background-color: #3B4BB3;          /* Email Kontaktformular */
 width: 100%;
 height: 25px;
 text-align: center;                       
}
.foot {
 background-color: #3B4BB3;         /* Email Kontaktformular */
 text-align: center;
 width: 100%;
 height: 25px;                
}
.textarea, .input, .select {
 color: #000000;                     /* Email Kontaktformular */            
}
.button {
 width: 130px;                       /* Email Kontaktformular */
}
.small {
 font-size: 9px;                      /* Email Kontaktformular */
}
table.Bookmark-Liste {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2.5em;                /* Bookmark Liste Tabelle */                           
 line-height: 1.7em;
 border-collapse: collapse;
 text-align: left;                    /* Internet-Explorer 5.x Hack */
}
th.Tabellenkopf {
 padding: 0.4em 0 0.4em 0;  
 border-bottom: 1px solid #8F3D00;    /* Bookmark Liste Tabelle */
 text-align: center;
}
td.Datenzeile {
 border-bottom: 1px solid #8F3D00;    
 padding: 0.4em 0 0.4em 0;            /* Bookmark Liste Tabelle */
 text-align: left;
}

Hoffe es kann mir jetzt jemand weiterhelfen, habe inzwischen uch nach Hacks
gesucht,aber nix gefunden, habe auch versucht statt dem border: 4px
oben in der Titelleiste ein background-image einzufügen, hat aber auch nix
gebracht, der Explorer bleibt bei seiner fehlerhaften Darstellung meiner Seite!


gr Pyro

[sejuma]

Kannst du das nochmal näher erläutern?
Im IE 6?
Zwischen FF3 und IE7 kann ich keine besonderen Unterschiede feststellen.

[Pyrofreak]

Hallo Sejuma!


Ja habe den Internet Explorer 6 und den Firefox 2, wie gesagt Probleme treten
nur im Internet Explorer bei mir auf! Sonst habe ich keine Browser bei mir installiert

gr Pyro

Ps.: Danke für deine Antwort

[sejuma]

Ich habe momentan keinen IE 6 zum testen.
Das einzige was mir aufgefallen ist:

Bei der Klasse .Bücher solltest du wegen dem "IE-Doubled-Float-Margin-Bug" noch ein

display: inline;

hinzufügen.

Auch solltest du sicherheitshalber keine Umlaute benutzen. Besser also .buecher

Hast du unter #Sitemap eine Ausklappnavi? Auch damit kommt der IE nicht ohne weiteres klar. Ggf. solltest du dich an dieser Anleitung orientieren.

[Pyrofreak]

Hallo Sejuma!

Aso ist mir klar Du hast den IE6 nicht, dann siehst Du den Fehler auf meiner
Startseite nicht ist klar! Hm aber vl finde ich den ja jetz selber jetz wo ich weis das es nur im IE6 ist...

Aha das buecher werde ich ändern...
und den bug schau ich mir auch an doubled margin

Nein die Sitemap ist ohne Ausklappmenü habe es gleich wie auf der Startseite
nur mit seitlicher Verschiebung bei hover...

gr und danke

Pyro

[Pyrofreak]

@Sejuma

Hätte da noch eine Frage ist die Überschrift auf der Seite mit den Tabellen (Chat-Slang) bei dir auch anstatt Mitte linksbündig zentriert?
Da habe ich nämlich auch das Prob das der Firefox die Überschrift zentriert
anzeigt und der IE6 wiederum linksbündig...

gr Pyro

[sejuma]

Die Überschrift h2 ist im IE 7 zentriert.

Als Fehlerquellen (allgemein) könnte ich mir folgendes vorstellen:

Du verwendest sehr häufig in einzelnen Elementen unterschiedliche Einheiten.
Da kommt innerhalb padding z.B. einmal px und einmal em vor.
Das solltest du vereinheitlichen, möglicherweise verträgt das nicht jeder Browser.

Ein weiteres Problem könnte aus den vielen absoluten und relativen Positionierungen stammen. Da kommt es oft auch darauf an, in welchem Bezug die Positionierung zum vorhergehenden Elternelement steht.
Dein Layout ist eigentlich so übersichtlich und einfach, dass du auf sämtliche absoluten und relativen Positionierungen generell verzichten kannst.
Arbeite besser mit ganz normalen margin-Angaben und wenn div's nebeneinander anzuordnen sind mit float.
Das ist sicherer, aber auch flexibler.

[Pyrofreak]

Hallo Sejuma!

Danke nochmal für deine Antwort, werde das mit den Einheiten nochmal überprüfen und dann gegenbenenfalls ausbessern!

Was die relative Positionierung betrifft und dann die vielen absoluten
hatte ich mich letztendlich so geeinigt, weil ich zuerst "floats" hatte
und hatte dann ein Problem glaub ich wegen der Fussleiste, genau weis ich das
aber nicht mehr hatte mich jedenfalls dann auf die relat/absolute Positionierung
geeinigt und alles umgestellt, das möchte ich auch so belassen...
Habe dann aber zu diesem Positionierungs-Prob auf so einer Seite mit Hacks und Bugs für IE6 gesucht und auch etwas gefunden,nur leider ohne Lösung, wie man
dasProb behebt...

Nun suche ich nach einer möglichst deutschen Seite mit solchen Hacks und Bugs für IE6 usw. inklusive Lösungen, da erhoff ich mir dann das ich den Fehler so lösen kann, denke das müsste klappen...
Vielleicht kennt irgendjemand eine gute Seite, die die ich bisher abgeklappert
hab waren mir nicht hilfreich...

gr Pyro

[sejuma]

Leider in Englisch, aber dennoch sehr umfangreich: IE-Bugs