Layout seit aktuellem Chrome entstellt

Sysmatic

Guten Morgen allerseits!

Mal wieder muss ich mich vertrauensvoll an euch wenden...
Seit der neuen Version des Chrome-Browsers sieht auf http://blechlavine.bplaced.net alles etwas verschoben aus,
d.h. der Abstand zwischen Header und Content ist enorm größer geworden.
Das betrifft sowohl Desktop- als auch Mobil-Ansicht, wobei es bei der mobilen nocht etwas anders ist.

Ich sehe mir das nun schon seit geraumer Zeit an, finde aber mal wieder nicht die Ursache,
immerhin war bis vor kurzem alles in Ordnung.
Auch mit dem Firefox sehe ich keine Probleme...

Ich hoffe das mir geholfen werden kann, Danke!

Sailor

Nur ein Verdacht ... überprüfe dein 'Grid-Layout' im <div class="container">!
Du definierst dort die Grid Items 1."aside", 2. "header", 3. "nav" 4. "main", 5. "footer" und weist denen auch anteilige Proportionen zu.

1. "aside" - finde ich gar nicht... wo ist dieser Container?
3. + 5. "nav" und "footer" nimmst du durch 'position: fixed;' komplett aus dem Textfluss heraus, die sollten meiner Meinung nach gar nicht in den Grid-Container rein.

Wie gesagt, nur ein Verdacht, denn mit Grid-Layout habe ich mich bisher noch nicht intensiver befasst.

- - - Aktualisiert - - -

Gerade mal getestet...
sieht mit..

HTML

.container {    
   height: 100%;    
   display: grid;    
   grid-template-rows: auto;    
   grid-template-columns: 100%;
   grid-template-areas: "header" "main";
}

bei im im FF und Chrome ok aus.

Sysmatic

aside, nav und footer waren quasi nur noch überbleibsel...wird irgendwann nochmal alles aufgeräumt.
grid-template-rows: auto; hat hier jedenfalls für Abhilfe gesorgt, Danke nochmal!
Das hatte ich gar nicht auf dem Sender

Sailor

Zitat von Sysmatic

aside, nav und footer waren quasi nur noch überbleibsel...wird irgendwann nochmal alles aufgeräumt.

Erkannte Fehler sollte man umgehend beseitigen - oftmals resultieren daraus Folgefehler an andere Stelle und man sucht sich einen Wolf, um dann die Ursache zu finden.

Ach ja... du hast auch ein Problem im IE11... liegt aber wahrscheinlich daran, dass der Grid nicht vollständig unterstützt und im CSS einen Webkit Zusatz braucht, um wenigstens halbwegs zu funktionierem...
siehe https://caniuse.com/#feat=css-grid

Sysmatic

Ich gebe dir recht, hab mich auch bereits darum gekümmert...

Das mit dem IE11 nervt natürlich schon wieder!
Erste versuche habe ich bereits mit dem Prefix gemacht...passiert aber nicht viel.
Wo genau wende ich das an?

Sailor

Der IE nervt ständig ... ist für jeden Webentwickler ein Quell ständiger Freude... wobei, ab Version 10 hat sich schon einiges Verbesser.

Für dein Problem sollte...
display: -ms-grid;
display: grid;

statt nur
display: grid;

in der entsprechenden CSS Anweisung der richtige Weg sein. Ist jetzt aber nur 'geraten' von mir, da ich wie schon Erwähnt nicht so richtig fit bin im Grid-Layout.

Sysmatic

Geht nicht...hab es auch mit

-ms-display: grid;

usw versucht...da passiert nichts

Sailor

Hmmm... ich bin da im Moment auch etwas ratlos. IE = bäääähhhh.
Zumal ich momentan auch die Webentwicklertools im IE nicht nutzen kann... der stürzt mir dann dauernd ab.
Aber einen Versuch hab ich noch.

HTML

.container {
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-template-rows: auto;
    grid-template-rows: auto;
    -ms-grid-template-columns: 100%; 
    grid-template-columns: 100%;
    -ms-grid-template-areas: "header" "main";
    grid-template-areas: "header" "main";
}

Alles anzeigen

.. ungetestet, aber in etwa so ,lässt sich das aus der Doku herleiten.
Und nicht vergessen... .container taucht in deinen Stylesheet mehrfach auch - als auch an die MediaQueries denken!

Sysmatic

Auch hier nach langem hin und her wieder kein Erfolg.
Hochgeladen ist jetzt das was du zuletzt gepostet hast...

Ich überlege schon ob ich es aussitze bis IE es unterstützt oder ob ich ganz auf Grid verzichte..

Bandit

Siehe https://validator.w3.org/nu/?doc=http%3….bplaced.net%2F

basti1012

Zitat von Sysmatic

Auch hier nach langem hin und her wieder kein Erfolg.
Hochgeladen ist jetzt das was du zuletzt gepostet hast...

Ich überlege schon ob ich es aussitze bis IE es unterstützt oder ob ich ganz auf Grid verzichte..

Nee , Grid ist schon was feines.
Aber..
Du solltest auf jedenfall den Fehler mit den nicht schliesenden h2 beheben. Wenn sowas fehlt ist das meistens auch der Grund das Flex,Grid usw probleme haben könnten. Schließe den mal und versuch das was Sailor dir sagte noch mal umzusetzen ob es dann klappt.

Edit: du hast da aber noch mehr probleme mit offenen und schließenden Tags, mit den <dd> ist auch noch was,aber das kannst du ja selber im Validator sehen
Überprüfe das einmal genau und teste das nochmal mit den Grid

Sysmatic

Jaja, meine flüchtigen Flüchtigkeitsfehler...habe jetzt die schlimmsten korrigiert, der Rest folgt gleich...geändert hat sich allerdings nichts!

Mit Edge sieht es etwas besser aus, aber auch da Probleme:
Der gesamte Content ist linksbündig und beim scrollen wackelt das Menü mit
Es wird immer besser, nur nicht mit den fortschritten

Sailor

Mit deinem jetzigen Code finde ich keine befriedigende Lösung für das IE11 - Grid Problem. Aber das ist vielleicht auch nicht nötig, denn bei näherem Hinsehen stelle ich fest, das dieses ganze Grid-Setup in deinem Fall komplett überflüssig ist!
Alle Elemente, mit Ausnahme von .main, die du in diesem Grid-Container untergebracht hast sind mit position: fixed; aus dem Textfluss rausgenommen. Es bleibt also als einziges Element nur .main... was soll da das Grid-Layout - ein Element bändigt man am besten mit reinem und einfachen HTML / CSS.
Ich habe mal zum testen für dich aus deinem Stylesheet alle rausgelöscht, was nach Grid aussieht. Sichere mal deine Original index.css und mache einen Versuch mit der modifizierten ... ohne Grid.

Code

body
{
    background-color: rgb(141, 144, 150);
}


* 
{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Noto Sans', sans-serif;
}


h1
{
    font-size: 1.2em;
}
h2
{
    font-size: 1.1em;
}


h3 
{
    font-size: 1.0em;
}


h4
{
    font-size: 1.0em;
}


/* ------ */
/* HEADER */
/* ------ */


header 
{
    padding-top: 3.2em;
    width: 100%;
    height: 100%;
    float: left;
    background-color: rgba(55, 55, 55, 0.0);
    text-align: center;
}


.banner-homelink 
{
    display: block;
    width: 100%;
    text-decoration: none;
    text-align: center;
}


.banner-homelink img 
{
    width: 100%;
    max-width: 521px;
}


/* ---------- */
/* NAVIGATION */
/* ---------- */


nav
{ 
    position: fixed;
    top: 0em;
    vertical-align: middle;
    width: 100%;
    float: left;
}


@media (max-width: 66.000em) 
{
    .menu-content 
    {
        max-height: 0;
        overflow: hidden;
        padding-right: 0.5em;
    }


    .collapsible-menu 
    {
        background-color: rgba(30, 144, 255, 0.9);
        color: white;
        padding-left: 0.5em;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        border-bottom: 1px solid black;
    }


    .collapsible-menu a.nav-button
    {
        display: block;
        padding: 0.6em;
        text-decoration: none;
    }


    .collapsible-menu label 
    {
        font-size: 1.5em;
        display: block;
        cursor: pointer;
        background: url(images/intern/menu.png) no-repeat left center;
        background-size: 1.5em 1.5em;
        padding: 0.2em 0 0.2em 2em;
    }


    input#menu 
    {
        display: none;
    }


    input:checked +label 
    {
        background-image: url(images/intern/menu_close.png);
    }


    input:checked ~ .menu-content 
    {
        max-height: 100%;
        padding-top: 0.5em;
    }

        .nav-button 
    {
        background-color: rgb(255, 229, 86);
        text-align: center;
        background-color: gold;
        border-radius: 5px;
        border: 1px solid black;
        display: inline-block;
        cursor: pointer;
        color: #000000;
        font-weight: bold;
        padding: 0.2em;
        margin: 0.3em;
        transition: all 500ms ease;
    }


    .nav-button:hover 
    {
        background-color: silver;
    }


    .nav-button:active 
    {
        position: relative;
        top: 1px;
    }


    .lang-flag
    {
        max-width: 2.5em;
        margin-right: 0.5em;
        margin-left: 0.5em;
    }

    .lang-box
    {
        padding-top: 1.5em;
        padding-bottom: 1em;
        width: 100%;
        text-align: center;
    }

    .partner
    {
        text-align: center;
        padding-bottom: 0.3em;
        padding-top: 0.3em;
    }

    .partner a
    {
        color: white;
        text-decoration: underline;
    }




}
/* ------- */
/* CONTENT */
/* ------- */


main 
{ 
    background: rgba(200, 200, 200, 0.0);
}


.content
{
    padding: 5px 10px 5px 5px;
    margin-bottom: 10px;
    border-radius: 17px;
    background-color: rgba(255, 255, 255, 0.3);
}


div.content
{
    min-height: 200px;
}


.content-main
{
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 20px;
}


.content-head
{
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    border-radius: 17px 17px 0px 0px;
    border: 1px solid #000000;
    background-image: url(images/intern/content-head.png);
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}


.content-body
{
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 0px 0px 17px 17px;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background-color: rgba(234, 243, 252, 0.8);
    font-size: 1.0em;
    text-align: center;
}


.content-message
{
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 1px solid #000000;
    background-color: rgba(245, 245, 245, 0.6);
    font-size: 1.0em;
    text-align: left;
}


.message
{
    text-decoration: none;
    color: #000000;
    display: block
}


.message:hover
{
    text-decoration: none;
    color: #0033ff;
    display: block
}






/* ------ */
/* FOOTER */
/* ------ */


footer 
{ 
    background: rgba(66, 134, 244, 0.0);
    font-size: 0.8em;
    padding-bottom: 0.3em;
}


.admin
{
    text-decoration: none;
    color: white;
    cursor: text;
}


.copyright
{
    text-align: center;
    color: white;
}


.privacy
{
    color: white;
}


/* ------ */
/* COOKIE */
/* ------ */


#cookie 
{
    position: fixed; 
    bottom: 0em; 
    left: 0; 
    right: 0; 
    background-color: rgba(30, 144, 255, 0.9);
    font-size: 1em;
    border-top: 1px solid black;
    vertical-align: middle;
    padding: 0.3em;
}
#cookie a.button 
{
    cursor: pointer;
    padding: 8px 20px; 
    margin-top: 0.1em;
    border-radius: 5px; 
    font-weight: bold; 
    float: right;
    background-color: gold;
    border: 1px solid #000;
    transition: all 500ms ease;
}
#cookie a.button:hover 
{
    background-color: silver;
}
#cookie p.cookiemessage 
{
    display: block; 
    margin-top: 0em;
    margin-left: 0.3em;
    font-weight: bold;
    font-size: 1em;
    color: white;
}
.cookielink
{
    color: black;
}


/* -------- */
/* FORMULAR */
/* -------- */


input[type='submit'] 
{
    font-size: 1.3em; 
    padding: 5px 12px; 
    font-family: Roboto, sans-serif;
    font-weight: 300;
    color: #4298f4;
    border: 1px solid silver;
    background-image: linear-gradient(to top, gainsboro 0%, white 90%);
    border-radius: 20px;
    cursor: pointer;
}


input:hover[type='submit'] 
{
    font-size: 1.3em; 
    padding: 5px 12px; 
    font-family: Roboto, sans-serif;
    font-weight: 300;
    color: #136bf7;
    border: 1px solid #545b66;
    background-image: linear-gradient(to top, gainsboro 0%, white 200%);
    border-radius: 20px;
    cursor: pointer;
}


input[type='text'],
input[type='email']
{ 
    width: 180px; 
    background-color: rgba(119, 171, 255, 0.6);
    font-size: 1.1em; 
    font-family: inherit;
    font-weight: 300;
}


textarea
{
    resize: vertical; 
    max-height: 480px; 
    min-height: 300px; 
    min-width: 90%;
    background-color: rgba(204, 204, 204, 0.2);    
    border-radius:6px; 
    border:2px solid #4298f4;
    outline: none; 
    padding: 0.3em;
}


select 
{
    background-color: rgba(119, 171, 255, 0.6);
    width: 180px; 
    font-size: 1.1em; 
    font-family: inherit;
    font-weight: 300;
}


/* ---- */
/* NEWS */
/* ---- */


#news-container
{
    width: 100%;
    padding: 10px;
    border: 1px solid #000000;
    background-color: rgba(245, 245, 245, 0.5);
    text-align: left;
}
.news-date
{
    font-size: 0.8em;
}


.news-title
{
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}


.news-image
{
    width: 100%;
    padding: 2px;
    border: 1px solid black;
    background-color: silver;
}


.news-text
{
    margin-top: 1em;
}


.news-archive
{
    margin-top: 1em;
    text-align: right;
}


/* --------- */
/* SONSTIGES */
/* --------- */


.img-team
{
    border-radius: 17px;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    width: 100%;
}


.img-gallery
{
    width: 100%;
    padding-bottom: 0.25em;
    padding-top: 0.25em;
}


.img-social
{
    width: 20%;
    padding: 0.5em;
}


.blechi
{
    height: 150px;
}


.blechi_container
{
    text-align: center;
}


.allan-link
{
    font-weight: bold;
    font-style: italic;
    text-decoration: none;
    color: gray;
}


.contact-table
{
    margin: auto;
    min-width: 50%;
}


.preview-container
{
    width: 100%;
    padding: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 1px solid #000000;
    background-color: rgba(245, 245, 245, 0.6);
    font-size: 1.0em;
    text-align: left;
    margin: auto;
    margin-bottom: 5px;
}


.preview-link
{
    text-decoration: none;
    color: #000000;
    display: block;
}


.preview-link:hover
{
    background-color: #414243;
    color: white;
}


.preview
{
    font-weight: bold;
    display: inline-block;
    width: 100%;
}


.preview-image
{
    max-width: 14em;
    float: left;
    margin-right: 1em;
    padding: 0.5em;
}


.gallery-div-block
{
    text-align: center;
}


.gallery-back a
{
    color: rgb(224, 224, 224);
    background-color: rgb(27, 91, 193);
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
    width: 10%;
    text-align: center;
    transition: all 500ms ease;
}


.gallery-back a:hover
{
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}


div.table 
{ 
    display: table; 
    border-collapse: collapse;
    margin: auto;
}
div.tr 
{ 
    display: table-row;
}
div.td-left
{ 
    display: table-cell; 
    text-align: left;
    font-weight: bold;
}
div.td-right
{ 
    display: table-cell; 
    text-align: left;
    padding-left: 2em;
    padding-bottom: 1em;
}




@media screen and (min-width:66.001em) 
{
    .container
    { 
        height: 100%;
    } 

    body
    {
        background: url(images/intern/wallpaper.jpg) fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .giga-container
    {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }

    .mega-container
    {
        min-width: 65.001em;
        max-width: 1050px;
        height: 100%;
    }

    /* ------ */
    /* HEADER */
    /* ------ */


    header 
    {
        position: fixed;
        top: 0.0em;
        background-image: url('images/intern/bg_header.jpg');
        background-size: cover;
        background-color: rgb(184, 191, 193);
        min-width: 65.00em;
        max-width: 1040px;
        height: 6.5em;
        padding: 1em;
        border-left: 1px black solid;
        border-right: 1px black solid;
        border-radius: 0px 0px 10px 10px;
        box-shadow: 0px 1px 1px black;
    }


    .banner-homelink 
    {
        margin-top: 0em;
    }


    .banner-homelink img 
    {
        height: 100%;
    }

    /* ---------- */
    /* NAVIGATION */
    /* ---------- */


    nav 
    {
        position: fixed;
        top: 0em;
        left: 0em;
        max-width: 15%;
        float: left;
        padding-top: 0em;
        padding-bottom: 0.0em;
        border-radius: 0px 0px 10px 10px;
    }


    .menu-content 
    {
        max-height: 0;
        overflow: hidden;
    }


    .collapsible-menu 
    {
        background-image: url(images/intern/bg_menu.jpg);
        background-attachment: fixed;
        background-color: rgba(70, 180, 255, 0.5);
        color: white;
        padding: 0px 3px;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
        border-radius: 0px 0px 10px 0px;
    }


    .collapsible-menu a 
    {
        padding: 0.5em;
        text-decoration: none;
        text-align: center;
        width: 97%;
    }


    .collapsible-menu label 
    {
        font-size: 2em;
        color: white;
        font-weight: bold;
        display: block;
        cursor: pointer;
        background: url(images/intern/menu.png) no-repeat left center;
        background-position: 0.2em 0.3em;
        background-size: 32px 32px;
        text-align: left;
        padding: 0.15em;
        padding-left: 2em;
    }


    input#menu {
        display: none;
    }


    input:checked +label 
    {
        background-image: url(images/intern/menu_close.png);
    }


    input:checked ~ .menu-content 
    {
        max-height: 100%;
        padding-top: 0.5em;
    }


    .nav-box
    {


    }


    .lang-box
    {
        text-align: center;
        padding-top: 0.5em;
    }


    .nav-button 
    {
        background-color: rgb(255, 229, 86);
        border-radius: 5px;
        border: 1px solid black;
        display: inline-block;
        cursor: pointer;
        color: #000000;
        font-weight: bold;
        margin: 0.3em;
        transition: all 500ms ease;
    }


    .nav-button:hover 
    {
        background-color: silver;
    }


    .nav-button:active 
    {
        position: relative;
        top: 1px;
    }


    .lang-flag
    {
        max-width: 3.5em;
    }

    .partner
    {
        text-align: center;
        padding-bottom: 0.3em;
        padding-top: 0.3em;
    }

    .partner a
    {
        color: white;
        text-decoration: underline;
    }


    /* ------- */
    /* CONTENT */
    /* ------- */


    main 
    { 
        background: rgba(70, 180, 255, 0.5);
        padding-bottom: 3em;
        padding-top: 7em;
        width: 1022px;
        min-height: 59em;
        justify-self: center;
        box-shadow: 1px 0px 1px black, -1px 0px 1px black;
        margin: 0 auto;
    }


    .content
    {
        padding: 5px 10px 5px 5px;
        margin-bottom: 10px;
        border-radius: 17px;
        background-color: rgba(255, 255, 255, 0.3);
    }


    div.content
    {
        min-height: 200px;
    }


    .content-main
    {
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 20px;
    }


    .content-head
    {
        margin-top: 5px;
        padding: 10px;
        border-radius: 17px 17px 0px 0px;
        border: 1px solid #000000;
        background-image: url(images/intern/content-head.png);
        font-weight: bold;
        font-size: 1.2em;
        text-align: center;
    }


    .content-body
    {
        margin-bottom: 5px;
        padding: 10px;
        padding-top: 30px;
        padding-bottom: 30px;
        border-radius: 0px 0px 17px 17px;
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        background-color: rgba(234, 243, 252, 0.8);
        font-size: 1.0em;
    }


    .content-message
    {
        width: 100%;
        margin-bottom: 5px;
        padding: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        border: 1px solid #000000;
        background-color: rgba(245, 245, 245, 0.6);
        font-size: 1.0em;
        text-align: left;
    }


    .message
    {
        text-decoration: none;
        color: #000000;
        display: block
    }
    .message:hover
    {
        text-decoration: none;
        color: #0033ff;
        display: block
    }






    /* ------ */
    /* FOOTER */
    /* ------ */


    footer 
    { 
        position: fixed;
        bottom: 0em;
        background-image: url('images/intern/bg_footer.jpg');
        background-size: cover;
        font-size: 1.0em;
        max-width: 1040px;
        min-width: 65.001em;
        margin-top: 20em;
        padding: 0.3em;
        border-left: 1px black solid;
        border-right: 1px black solid;
        border-top: 1px black solid;
        border-radius: 10px 10px 0px 0px;
        box-shadow: 0px -1px 1px black;
    }


    .copyright
    {
        text-align: center;
        color: white;
        text-shadow: black 1px 1px;
    }

    .admin
    {
        text-decoration: none;
        color: white;
        cursor: text;
    }

    .privacy
    {
        text-decoration: underline;
        color: white;
    }






    /* ------ */
    /* COOKIE */
    /* ------ */


    #cookie 
    {
        position: fixed; 
        bottom: 0em; 
        left: 0; 
        right: 0; 
        background-color: rgba(30, 144, 255, 0.9);
        font-size: 1em;
        border-top: 1px solid black;
        vertical-align: middle;
    }
    #cookie a.button 
    {
        cursor: pointer;
        padding: 8px 20px; 
        border-radius: 5px; 
        font-weight: bold; 
        float: right;
        background-color: gold;
        border: 1px solid #000;
        transition: all 500ms ease;
    }
    #cookie a.button:hover 
    {
        background-color: silver;
    }
    #cookie p.cookiemessage 
    {
        display: block; 
        padding: 0; 
        margin-top: 0em;
        font-weight: bold;
        font-size: 1em;
        color: white;
    }
    .cookielink
    {
        color: black;
    }


    /* -------- */
    /* FORMULAR */
    /* -------- */


    input[type='submit'] 
    {
        font-size: 1.3em; 
        padding: 5px 12px; 
        font-family: Roboto, sans-serif;
        font-weight: 300;
        color: #4298f4;
        border: 1px solid silver;
        background-image: linear-gradient(to top, gainsboro 0%, white 90%);
        border-radius: 20px;
        cursor: pointer;
    }


    input:hover[type='submit'] 
    {
        font-size: 1.3em; 
        padding: 5px 12px; 
        font-family: Roboto, sans-serif;
        font-weight: 300;
        color: #136bf7;
        border: 1px solid #545b66;
        background-image: linear-gradient(to top, gainsboro 0%, white 200%);
        border-radius: 20px;
        cursor: pointer;
    }


    input[type='text'],
    input[type='email']
    { 
        width: 180px; 
        background-color: rgba(119, 171, 255, 0.6);
        font-size: 1.1em; 
        font-family: inherit;
        font-weight: 300;
    }


    textarea
    {
        resize: vertical; 
        max-height: 480px; 
        min-height: 300px; 
        min-width: 90%;
        background-color: rgba(204, 204, 204, 0.2);    
        border-radius:6px; 
        border:2px solid #4298f4;
        outline: none; 
    }


    select 
    {
        background-color: rgba(119, 171, 255, 0.6);
        width: 180px; 
        font-size: 1.1em; 
        font-family: inherit;
        font-weight: 300;
    }


    /* ---- */
    /* NEWS */
    /* ---- */


    #news-container
    {
        width: 100%;
        padding: 10px;
        border: 1px solid #000000;
        background-color: rgba(245, 245, 245, 0.5);
        text-align: left;
    }

    .news-table
    {
        width: 100%;
    }

    .news-date
    {
        font-size: 0.8em;
    }


    .news-title
    {
        font-weight: bold;
        font-size: 1.1em;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
    }


    .news-image
    {
        max-width: 20em;
        padding: 2px;
        margin-left: 1em;
        border: 1px solid black;
        background-color: silver;
        float: right;
    }


    .news-text
    {
        margin-top: 1em;
    }


    .news-archive
    {
        margin-top: 1em;
        text-align: right;
    }

    #news-container a
    {
        font-weight: bold;
        color: blue;
        text-decoration: none;
    }


    #news-container a:hover
    {
        color: black;
    }




    /* --------- */
    /* SONSTIGES */
    /* --------- */


    .img-team
    {
        border-radius: 17px;
        -webkit-border-radius: 17px;
        -moz-border-radius: 17px;
        max-width: 50em;
    }


    .img-gallery
    {
        width: 100%;
        padding-bottom: 0.25em;
        padding-top: 0.25em;
    }


    .img-social
    {
        max-width: 7em;
        padding: 0.5em;
    }

    .preview-container
    {
        width: 100%;
        padding: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        border: 1px solid #000000;
        background-color: rgba(245, 245, 245, 0.6);
        font-size: 1.0em;
        text-align: left;
        margin-bottom: 5px;
    }


    .preview-link
    {
        text-decoration: none;
        color: #000000;
        display: block;
        max-width: 50%;
        margin: auto;
    }


    .preview-link:hover
    {
        background-color: #414243;
        color: white;
    }


    .preview
    {
        font-weight: bold;
        display: inline-block;
        width: 100%;
    }


    .preview-image
    {
        max-width: 14em;
        float: left;
        margin-right: 1em;
        padding: 0.5em;
    }




}

Alles anzeigen

basti1012

Jo der Validator zeigt jetzt nix mehr an und so finden tut man auch nix.
Da ich mich mit Grid auch noch nicht so befasst habe kann ich dazu auch nicht mehr sagen.
Da du aber schreibst das der Fehler erst beim aktuellen Chrom da ist ,hast du dich mal erkundigt ob das vieleicht ein bug ist oder so ?
Hast du ein Update gemacht und vorher ging es noch ?

Sysmatic

@basti Die Sache mit Chrome hat sich ja schon erledigt, es waren noch alte Zeilen von vor einer größeren Designänderung übrig...Probleme machen allerdings noch die Browser von Microsoft

Sailor
Folgende Änderungen sind zu erkennen:
-beim Edge sieht alles wie gewünscht aus, allerdings zittert immer noch das Menü beim scrollen
-beim IE11 hat sich tatsächlich gar nichts getan scheint also weniger ein Problem mit dem Grid zu sein!?
-in der mobilen Ansicht sind Header und Überschrift 'verschmolzen'..das stellt jetzt aber kein Problem dar, ändere ich später

Was mir zu denken gibt ist, dass der halb durchsichtige, blaue Hintergrund beim Content fehlt, während er bei allen anderen Browsern zu sehen ist.
Ich vermute fast, dass das der Grund für die Entstellung ist...der Container fehlt einfach!

Sailor

Nun ja... ich werde da weiter dran bleiben, auch wenn ich im Moment etwas ratlos bin - dass der IE rumzickt ist ja nicht ungewöhnlich, aber bei validem HTML und CSS müsste er eigentlich auch was 'vernünftiges' anzeigen.
Die Container mit position: fixed; könnten auch mitspielen bei dem Problem.. das mag der IE auch nicht so gerne - unter Anderem kommt wohl auch das 'Zittern' der Container daher. Da gab es mal (früher zu IE 8 Zeiten) eine Meta-Anweisung, mit der den Quirk-Mode des IE beeinflussen/umstellen konnte, aber ob das hilft kann ich nicht sagen... habe ich auch nicht mehr so richtig auf dem Schirm. Ist schon zu lange her.
Für dein Überlappungsproblem könnte aber ein 'padding-top: 6.5em;' für die '.mega-container' und gleichzeitig eine Reduzierung auf 'padding-top: 0.5em;' im '.main' helfen.

Sailor

Habe da gerade was gefunden... seltsam, aber das könnte uns helfen, wenn es denn noch aktuell ist
https://stackoverflow.com/questions/3582…net-explorer-11
Aber Versuch macht kluch!!!!
Mache mal aus deinem <main>... </main> ein <div class="main">...</div>
und im CSS aus 'main' ein '.main'

Auf das Ergebnis bin ich gespannt!

edit:
hehe... man muss nur weiter lesen. Geht auch einfacher!
Mache einfach mal im CSS zu main ein 'display: block;'

Sysmatic

Na geil!
An den ersten Vorschlag dachte ich nämlich auch schon, hatte aber erst seit jetzt Zeit...
display:block gefällt mir allerdings besser
Und erneut muss ich dir danken!

Fehlt noch das zitternde Menü, dann ist erstmal gut

Sailor

Schon seltsam dieser IE und seine Eigenarten...
Aber wenn ich in meiner Simulation für die Klasse '.collapsible-menu' die Eigenschaft 'background-attachment: fixed;' lösche, dann zittert der Nav-Container nicht mehr
Magst du das mal am lebenden Objekt probieren?

Sysmatic

Aber mal ehrlich, wer soll denn bitte auf sowas kommen?
Und wieder muss ich danken!

Von was für einer Simulation hast du gesprochen?

Tags

Benutzer online in diesem Thema