Div Box

reyman

Huhu liebe Com,

ich stehe hier vor einem Problem mit dem Internet Explorer.

Ich habe eine Div Box erstellt welche den Inhalt zentriert. Das sieht überall gut aus, so wie es soll, nur im IE nicht.

Code

.rundrum {
  margin-top: 10px;
  margin-bottom: 10px;
  margin: 0 auto;
  display: flex; 
  display: -webkit-flex;
  justify-content: center;
}

Was fehlt, damit es im IE genauso aussieht ?

MFG

reyman

MrMurphy

Hallo,

ohne das zugehörige HTML (und dessen CSS) kann dir das niemand beantworten.

Und um welche IE-Version(en) geht es überhaupt?

margin-top und margin-bottom kannst du weglassen, die werden durch das nachfolgende margin außer Kraft gesetzt.

Die CSS-Angaben mit den Prefixen sollten grundsätzlich vor den CSS-Angaben ohne Prefix stehen. Wenn die Browser die Version ohne Prefix unterstützen ist das in der Regel die sinnvollere (weil fehlerbereinigte) Version.

Gruss

MrMurphy

reyman

Ok danke erstmal.

Es geht um die IE version 11.

Aber ich sehe gerade das es nicht an dieser Box liegt.. sondern an etwas anderem.

Hier der komplette CSS Code:

Code

/* CSS an dieser Stelle wirkt sich auf alle Skins aus */




/* Grünes Theme für User Interface */
a, div.vectorTabs li a, div#mw-panel div.portal div.body ul li a, div#content a.external {
    color: #669933;
    font-weight: bold;
}
a:visited, div.vectorTabs li a:visited, div#mw-panel div.portal div.body ul li a:visited, div#content a.external:visited {
    color: #507828;
}








div.vectorTabs, div.vectorTabs span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAR0lEQVQImWWOOxbAQAgCJ9z/xlFIsWZfPoUFoINUlYDfJBYg00vT4oiCFSxihX7ld7Z8j9cCP/Tqc87h1+zXcL5c71/2Lb4AQO1B07yAp+sAAAAASUVORK5CYII=");
}




div.vectorTabs ul li {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAIAAADITs03AAAACXBIWXMAAAsSAAALEgHS3X78AAAAQklEQVQYleWQsQ3AMAzDWP3/U6/pG2aGGI3RFzoIsAhZg1AD/FjG6cce4iez/dnMzhjs2/13OJF6OybHakag8lz3AnxnLT4wWlwvAAAAAElFTkSuQmCC");
}




div#content, #mw-head-base, div#footer {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsSAAALEgHS3X78AAAADElEQVQImWO4/nM5AAUiAnhTbeFNAAAAAElFTkSuQmCC");
}




div.vectorMenu h5 a {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAIAAABmjeQ9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAR0lEQVQImWWOOxbAQAgCJ9z/xlFIsWZfPoUFoINUlYDfJBYg00vT4oiCFSxihX7ld7Z8j9cCP/Tqc87h1+zXcL5c71/2Lb4AQO1B07yAp+sAAAAASUVORK5CYII=");
}




ul {
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANBAMAAACTErm7AAAAMFBMVEX///8AjFIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAitIkkAAAAAXRSTlMAQObYZgAAABdJREFUCJljYMADGAUZGAQFBeAYxAcCAAplALt4L4SlAAAAAElFTkSuQmCC")
}




pre {
    border: 1px dashed #507828;
}








div#content a.external {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAAFVBMVEXl5eXl5eUtlwAkzACQ/2VhoihlvT+VY3BnAAAAAXRSTlMAQObYZgAAAD9JREFUeF4NxkENgEAMRcF3QUCzK6D9DkiLAELgjAWy/j3Qy2SAzITtswEcrVRtjPNua+YinstfYu4OYdZKcn69mgZuQI+sewAAAABJRU5ErkJggg==") no-repeat scroll right center transparent;
}




/* Eingrünung Ende */








.firstHeading {
    background: none repeat scroll 0 0 #669933;
    background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
    background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
    background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
    color: #ffffff;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
    padding-left: 3px;
    -moz-border-radius:5px 5px 0 0; /* Firefox - alte Syntax */
    -webkit-border-radius:5px 5px 0 0; /* Safari, Chrome - alte Syntax */
    border-radius:5px 5px 0 0; /* alle neuen Browser, W3C Standard */
}




h2, h3 {
    margin-top: 1.5em;
    clear:both;
}




h2 {
    background: none repeat scroll 0 0 #82ac59;
    background:-moz-linear-gradient(top, #82ac59, #ffffff); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#ffffff)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #82ac59, #ffffff); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #82ac59, #ffffff); /* Opera */
    background:-ms-linear-gradient(top, #82ac59, #ffffff); /* IE */
    background:linear-gradient(top, #82ac59, #ffffff); /* W3C Standard */
    padding-left: 3px;
    -moz-border-radius:0 0 5px 5px; /* Firefox - alte Syntax */
    -webkit-border-radius:0 0 5px 5px; /* Safari, Chrome - alte Syntax */
    border-radius:0 0 5px 5px; /* alle neuen Browser, W3C Standard */
}




table h2, table h3 {
    margin-top: 0;
    background: transparent;
    padding-left: 0;
}




table.SOtable {
    background: none repeat scroll 0 0 #669933;
    background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
    background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
    background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
    overflow: hidden;
    text-overflow:ellipsis;
    border: 1px solid #AAAAAA;
    -ms-border: 1px solid #AAAAAA;
    border-collapse: collapse;
    margin: 1em 1em 1em 0;
}




.SOtable thead tr {
    background: none repeat scroll 0 0 #669933;
    background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
    background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
    background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
}




.SOtable tbody tr:nth-child(even) {
    /* durch diesen Eintrag wird jede zweite Zeile mit dieser Hintergrundfarbe versehen */
    /* background: #EBEBb8; */
    background: #F5F5D3;
}
.SOtable tbody tr:nth-child(odd) {
    /* durch diesen Eintrag wird jede zweite Zeile mit dieser Hintergrundfarbe versehen */
    background: #FBFBEE;
}




.SOtable tbody tr.hervorgehoben, .SOtable tbody th.hervorgehoben, .SOtable tbody td.hervorgehoben {
     background-color: #E3F7DD;
}




.SOtable tbody tr.hervorgehoben2, .SOtable tbody th.hervorgehoben2, .SOtable tbody td.hervorgehoben2 {
     background-color: #d4e8cf;
}








.SOtable th, .SOtable td {
    border: 1px solid #AAAAAA;
    padding-left: 5px;
    padding-right: 5px;
}




.SOtableRight td {
    text-align: right;
}




.SOtableCenter td {
    text-align: center;
}




.SOtableLeft td {
    text-align: left;
}




.SOtableTop td {
    vertical-align: top;
}




.SOtableBottom td {
    vertical-align: bottom;
}




.SOtableMiddle td {
    vertical-align: middle;
}




.SOtable th {
    background: none repeat scroll 0 0 #669933;
    background:-moz-linear-gradient(top, #82ac59, #669933); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#82ac59), to(#669933)); /* Safari, Chrome */
    background:-webkit-linear-gradient(top, #82ac59, #669933); /* Safari, Chrome - neue Syntax! */
    background:-o-linear-gradient(top, #82ac59, #669933); /* Opera */
    background:-ms-linear-gradient(top, #82ac59, #669933); /* IE */
    background:linear-gradient(top, #82ac59, #669933); /* W3C Standard */
    text-align: center;
    font: bold 14pt;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}




.trwidth100 tbody tr>* {
    width:100px; 
}




.trwidth125 tbody tr>* {
    width:125px; 
}




.trwidth150 tbody tr>* {
    width:150px; 
}




.SOtable caption {
    font-weight: bold;
}




.HCtable td:nth-child(odd) {
    padding-left: 10px;
}




.HCtable td:nth-child(even) {
    text-align:right;
}


.rechtsunter th {
text-align:right;
border-bottom:1px solid black;
font-size: 110%;
}


.rundrum {
  margin: 0 auto;
  display: flex; 
  justify-content: center;
}

Alles anzeigen

Hier der HTML Code: (das ganze ist im Wikicode/Mediawiki)

Code

<div class="rundrum">
<div style="margin:0 auto; max-width: 100%;">
{| class="SOtabletop" style="border-spacing:20px 5px;" /* moderne Fassung von cellspacing, aber 20px horizontal und 5px vertikal */
! [[Datei:Grundlagen.png|center|verweis=]] !! [[Datei:Grundlagen.png|center|link=]]
|- class="rechtsunter"  
! '''Allgemein''' !! '''Auf dem Square'''
|- 
| [[Erste Schritte]] &bull; [[Charakter]] &bull; [[Menü]] &bull; [[Spielumgebung]] &bull; <br>[[Chatsystem]] &bull; [[Ingame-Begriffe]]
| [[NPCs]]  &bull; [[Handel]] &bull; [[Auktionshaus]]
|- class="rechtsunter" 
! '''Auf dem Kurs''' !! '''Erfahrungspunkte'''
|- 
| [[Zum Spiel]] &bull; [[Training Center]] &bull; [[Kurse]] &bull; [[Zum_Spiel#Spieltyp | Spieltyp]] &bull; [[Handicap]] &bull; <br>[[Persönliche Rekorde]] &bull; [[Caddiesystem]] [[Datei:Quest_Neu.png|verweis=]] 
| [[Erfahrungspunkte (EXP)]] &bull; [[EXP Kumulation]] &bull; [[P.density System]]  
|}
</div>
</div>

Alles anzeigen

Im Firefox, Chrome ist das ganze Zentriert. Und im IE ist alles rechts.

MrMurphy

Hallo,

bei mir wird der Inhalt auch im IE zentriert dargestellt.

Grundsätzlich ist es aber schlechter Stil und kann zu Problemen führen Text direkt in Boxen oder andere nicht dafür vorgesehene Elemente zu schreiben. Text sollte immer in dafür vorgesehenen Elementen wie h1 bis h6, p, li, dt, dd u.s.w. stehen.

Gruss

MrMurphy

Nachtrag: Meine Antwort bezog sich auf Reymans ursprüngliche Antwort, das HTML bestände nur aus

Code

<div class="rundrum">
TEXT
</div>

Gruss

MrMurphy

reyman

Okay aber warum bei mir nicht ?

Chrome : http://prntscr.com/7apee4
IE : http://prntscr.com/7apen7

Das mit dem Stil: Ja ich habe in dem Moment keine andere Lösung gefunden. Daher ist das so. Hättest du einen besseren / leichteren vorschlag für mich, mit dem gleichen resultat ?

Tags