1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Div Box

  • reyman
  • 29. Mai 2015 um 11:26
  • reyman
    Teeny
    Beiträge
    16
    • 29. Mai 2015 um 11:26
    • #1

    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
    Profi
    Reaktionen
    3
    Beiträge
    639
    • 29. Mai 2015 um 11:30
    • #2

    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

    4 Mal editiert, zuletzt von MrMurphy (29. Mai 2015 um 12:15)

  • reyman
    Teeny
    Beiträge
    16
    • 29. Mai 2015 um 12:28
    • #3

    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.

    3 Mal editiert, zuletzt von reyman (29. Mai 2015 um 12:39)

  • MrMurphy
    Profi
    Reaktionen
    3
    Beiträge
    639
    • 29. Mai 2015 um 12:40
    • #4

    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

    Einmal editiert, zuletzt von MrMurphy (29. Mai 2015 um 13:12)

  • reyman
    Teeny
    Beiträge
    16
    • 29. Mai 2015 um 13:06
    • #5

    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

  • html
  • internet
  • text
  • explorer
  • problem
  • code
  • auto
  • bot
  • bottom
  • div
  • inhalt
  • center
  • box
  • internet explorer
  • display
  • px
  • zentriert
  • margin-bottom
  • margin
  • flex
  • content
  • liebe
  • top

Benutzer online in diesem Thema

  • 1 Besucher
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche