Seite 2 von 3 ErsteErste 123 LetzteLetzte
Ergebnis 11 bis 20 von 22

Thema: Layout seit aktuellem Chrome entstellt

  1. #11
    Fortgeschrittene/r
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    189
    Danke
    0
    Bekam 28 mal "Danke" in 28 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    Zitat Zitat von Sysmatic Beitrag anzeigen
    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
    Geändert von basti1012 (07.11.2018 um 19:55 Uhr)
    Mein soforthilfe Forum und Chat

  2. #12
    Azubi(ne)
    Themenstarter
    Avatar von Sysmatic
    Registriert seit
    01.10.2018
    Ort
    Thüringen
    Alter
    31
    Beiträge
    67
    Danke
    10
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    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

  3. #13
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    326
    Danke
    0
    Bekam 71 mal "Danke" in 71 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    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;
        }
    
    
    }
    Geändert von Arne Drews (08.11.2018 um 17:56 Uhr) Grund: MOD: Code-Tags angepasst
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  4. #14
    Fortgeschrittene/r
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    189
    Danke
    0
    Bekam 28 mal "Danke" in 28 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    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 ?
    Mein soforthilfe Forum und Chat

  5. #15
    Azubi(ne)
    Themenstarter
    Avatar von Sysmatic
    Registriert seit
    01.10.2018
    Ort
    Thüringen
    Alter
    31
    Beiträge
    67
    Danke
    10
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    @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!

  6. #16
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    326
    Danke
    0
    Bekam 71 mal "Danke" in 71 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    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.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  7. #17
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    326
    Danke
    0
    Bekam 71 mal "Danke" in 71 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    Habe da gerade was gefunden... seltsam, aber das könnte uns helfen, wenn es denn noch aktuell ist
    https://stackoverflow.com/questions/...et-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;'
    Geändert von Sailor (08.11.2018 um 13:06 Uhr)
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  8. Folgende User finden die Antwort von Sailor gut:


  9. #18
    Azubi(ne)
    Themenstarter
    Avatar von Sysmatic
    Registriert seit
    01.10.2018
    Ort
    Thüringen
    Alter
    31
    Beiträge
    67
    Danke
    10
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    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

  10. #19
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    326
    Danke
    0
    Bekam 71 mal "Danke" in 71 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt

    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?
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  11. Folgende User finden die Antwort von Sailor gut:


  12. #20
    Azubi(ne)
    Themenstarter
    Avatar von Sysmatic
    Registriert seit
    01.10.2018
    Ort
    Thüringen
    Alter
    31
    Beiträge
    67
    Danke
    10
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Layout seit aktuellem Chrome entstellt


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

    Von was für einer Simulation hast du gesprochen?

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 26.09.2017, 12:45
  2. Antworten: 8
    Letzter Beitrag: 02.10.2013, 14:07
  3. Tabellen-Layout in DIV-Layout umändern...
    Von Peter_Pan im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 22.03.2007, 21:29
  4. Seit wann ???
    Von °dieWoelfin° im Forum Forum-Hilfe.de intern
    Antworten: 11
    Letzter Beitrag: 20.11.2006, 15:39
  5. Aus aktuellem Anlass
    Von umbenannt im Forum Off Topic und Quasselbox
    Antworten: 20
    Letzter Beitrag: 29.12.2003, 16:19

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •