Website Template CSS wird in Safari auf iPhone 6 nicht richtig angezeigt

Dieses Thema im Forum "Webentwicklung" wurde erstellt von GenesisEX, 12. Januar 2015 .

  1. 12. Januar 2015
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Hallo Leute,

    habe ein Problem und komme nicht auf die Lösung.

    Das sieht dann wie folgt aus:
    Bild

    In der eBay App siehts dann so aus:
    Bild

    Das Template könnt ihr euch hier ansehen:
    Download: templated-wirework.zip | www.xup.to

    Der CSS Code:
    Spoiler
    HTML:
    html, body
    {
     height: 100%;
    }
    
    body
    {
     margin: 0px;
     padding: 0px;
     background: #1B9772;
     font-family: 'Source Sans Pro', sans-serif;
     font-size: 11pt;
     font-weight: 300;
     color: #6c6c6c
    }
    
    h1, h2, h3
    {
     margin: 0;
     padding: 0;
     font-weight: 600;
     color: #454445;
    }
    
    p, ol, ul
    {
     margin-top: 0;
    }
    
    ol, ul
    {
     padding: 0;
     list-style: none;
    }
    
    p
    {
     line-height: 180%;
    }
    
    strong
    {
    }
    
    a
    {
     color: #2C383B;
    }
    
    a:hover
    {
     text-decoration: none;
    }
    
    .container
    {
     margin: 0px auto;
     width: 1200px;
    }
    
    /*********************************************************************************/
    /* Image Style */
    /*********************************************************************************/
    
     .image
    {
     display: inline-block;
    }
    
    .image img
    {
     display: block;
     width: 100%;
    }
    
    .image-full
    {
     display: block;
     width: 100%;
     margin: 0 0 2em 0;
    }
    
    .image-left
    {
     float: left;
     margin: 0 2em 2em 0;
    }
    
    .image-centered
    {
     display: block;
     margin: 0 0 2em 0;
    }
    
    .image-centered img
    {
     margin: 0 auto;
     width: auto;
    }
    
    /*********************************************************************************/
    /* List Styles */
    /*********************************************************************************/
    
     ul.style1
    {
     margin: 0;
     padding: 0em 0em 0em 0em;
     overflow: hidden;
     list-style: none;
     color: #6c6c6c
    }
    
    ul.style1 li
    {
     overflow: hidden;
     display: block;
     padding: 2.80em 0em;
     border-top: 1px solid #D1CFCE;
    }
    
    ul.style1 li:first-child
    {
     padding-top: 0;
     border-top: none;
    }
    
    ul.style1 .image-left
    {
     margin-bottom: 0;
    }
    
    ul.style1 h3
    {
     padding: 1.2em 0em 1em 0em;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     font-size: 1.2em;
     font-weight: 600;
     color: #454445;
    }
    
    ul.style1 a
    {
     text-decoration: none;
     color: #525252;
    }
    
    ul.style1 a:hover
    {
     text-decoration: underline;
     color: #525252;
    }
    
    ul.style2
    {
     margin: 0;
     padding-top: 1em;
     list-style: none;
    }
    
    ul.style2 li
    {
     border-top: solid 1px #E5E5E5;
     padding: 0.80em 0 0.80em 0;
     font-family: 0.80em;
    }
    
    ul.style2 li:before
    {
     display: inline-block;
     padding: 4px;
     background: #DB3256;
    }
    
    ul.style2 a
    {
     display: inline-block;
     margin-left: 1em;
    }
    
    ul.style2 li:first-child
    {
     border-top: 0;
     padding-top: 0;
    }
    
    ul.style2 .icon
    {
     color: #FFF;
    }
    
    ul.style3
    {
     margin: 0;
     padding-top: 1em;
     list-style: none;
    }
    
    ul.style3 li
    {
     border-top: solid 1px rgba(255,255,255,.2);
     padding: 1em 0 1em 0;
     font-family: 0.80em;
    }
    
    ul.style3 li:before
    {
     display: inline-block;
     padding: 4px;
     background: #FFF;
    }
    
    ul.style3 a
    {
     display: inline-block;
     margin-left: 1em;
     font-size: 1em !important;
     color: #FFF;
    }
    
    ul.style3 li:first-child
    {
     border-top: 0;
     padding-top: 0;
    }
    
    ul.style3 .icon
    {
     color: #DB3256;
    }
    
    /*********************************************************************************/
    /* Social Icon Styles */
    /*********************************************************************************/
    
     ul.contact
    {
     margin: 0;
     padding: 2em 0em 0em 0em;
     list-style: none;
    }
    
    ul.contact li
    {
     display: inline-block;
     padding: 0em 0.30em;
     font-size: 1em;
    }
    
    ul.contact li span
    {
     display: none;
     margin: 0;
     padding: 0;
    }
    
    ul.contact li a
    {
     color: #FFF;
    }
    
    ul.contact li a:before
    {
     display: inline-block;
     background: #3f3f3f;
     width: 40px;
     height: 40px;
     line-height: 40px;
     border-radius: 20px;
     text-align: center;
     color: #FFFFFF;
    }
    
    ul.contact li a.icon-twitter:before
    {
     background: #2DAAE4;
    }
    
    ul.contact li a.icon-facebook:before
    {
     background: #39599F;
    }
    
    ul.contact li a.icon-dribbble:before
    {
     background: #C4376B;
    }
    
    ul.contact li a.icon-tumblr:before
    {
     background: #31516A;
    }
    
    ul.contact li a.icon-rss:before
    {
     background: #F2600B;
    }
    
    /*********************************************************************************/
    /* Button Style */
    /*********************************************************************************/
    
     .button
    {
     display: inline-block;
     padding: 1.3em 3em;
     background: #1B9772;
     -moz-transition: opacity 0.25s ease-in-out;
     -webkit-transition: opacity 0.25s ease-in-out;
     -o-transition: opacity 0.25s ease-in-out;
     -ms-transition: opacity 0.25s ease-in-out;
     transition: opacity 0.25s ease-in-out;
     letter-spacing: 0.20em;
     text-decoration: none;
     text-transform: uppercase;
     font-weight: 600;
     color: #FFF;
    }
    
    .button:hover
    {
    }
    
    .button:active
    {
    }
    
    .button-big
    {
     padding: 1.6em 4em;
     font-size: 1.4em;
     font-weight: 900;
    }
    
    /*********************************************************************************/
    /* Heading Titles */
    /*********************************************************************************/
    
     .title
    {
     margin-bottom: 3em;
    }
    
    .title h2
    {
     font-weight: 400;
     font-size: 2.8em;
     color: #323232;
    }
    
    .title .byline
    {
     letter-spacing: 0.15em;
     text-transform: uppercase;
     font-weight: 400;
     font-size: 1.1em;
     color: #6F6F6F;
    }
    
    /*********************************************************************************/
    /* Header */
    /*********************************************************************************/
     
    #header-wrapper
    {
     background: #FFF;
    }
    
    #header
    {
     position: relative;
     height: 100px;
    }
    
    /*********************************************************************************/
    /* Logo */
    /*********************************************************************************/
    
    #logo
    {
     position: absolute;
     top: 2em;
     left: 0;
     width: 100%;
    }
    
    #logo h1
    {
     display: inline-block;
     font-size: 2.5em;
     text-transform: uppercase;
     font-weight: 700;
     color: #2C383B;
     padding-right: 0.50em;
     border-right: 1px solid rgba(0,0,0,.3);
    }
    
    #logo span
    {
     position: absolute;
     top: 1.4em;
     display: inline-block;
     padding-left: 1.50em;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     font-size: 0.90em;
    }
    
    #logo a
    {
     text-decoration: none;
     color: #2C383B;
    }
    
    /*********************************************************************************/
    /* Menu */
    /*********************************************************************************/
    
    #menu
    {
     position: absolute;
     right: 0;
     top: 1em;
    }
    
    #menu ul
    {
     display: inline-block;
    }
    
    #menu li
    {
     display: block;
     float: left;
     text-align: center;
     line-height: 60px;
    }
    
    #menu li a, #menu li span
    {
     display: inline-block;
     margin-left: 1px;
     padding: 0em 1.5em;
     letter-spacing: 0.10em;
     text-decoration: none;
     font-size: 1em;
     text-transform: uppercase;
     outline: 0;
     color: #212121;
     background: #ECECEC;
    }
    
    #menu li:hover a, #menu li.active a, #menu li.active span
    {
    }
    
    #menu .current_page_item a
    {
     background: #E24E2A;
     color: #FFF;
    }
    
    #menu .icon
    {
    }
    
    /*********************************************************************************/
    /* Banner */
    /*********************************************************************************/
     
     #banner-wrapper
    {
     overflow: hidden;
     padding: 3em 0em;
     background: #E24E2A;
    }
    
    #banner
    {
     overflow: hidden;
     width: 1000px;
     padding: 0px 100px;
     text-align: center;
     color: rgba(255,255,255,.7);
    }
    
    #banner a
    {
     color: rgba(255,255,255,.9);
    }
    
    #banner .box-left
    {
     float: left;
    }
    
    #banner .box-right
    {
     float: right;
    }
    
    #banner h2
    {
     margin: 0em;
     padding: 0em;
     font-weight: 400;
     font-size: 3em;
     color: #555555;
    }
    
    #banner span
    {
     display: block;
     padding-top: 0.20em;
     text-transform: uppercase;
     font-size: 1.2em;
     color: #A2A2A2;
    }
    
    /*********************************************************************************/
    /* Page */
    /*********************************************************************************/
    
    #wrapper
    {
     background: #FFF;
    }
    
    #page
    {
     overflow: hidden;
     padding: 6em 0em;
     border-bottom: 2px solid #E3E3E3;
     text-align: center;
    }
    
    #page .button
    {
     margin-top: 2em;
    }
    
    /*********************************************************************************/
    /* Content */
    /*********************************************************************************/
    
    #content
    {
     padding: 0em 7em;
    }
    
    /*********************************************************************************/
    /* Sidebar */
    /*********************************************************************************/
    
     #sidebar
    {
     float: right;
     width: 450px;
    }
    
    #stwo-col
    {
     margin-top: 2em;
    }
    
    #stwo-col h2
    {
     display: block;
     padding-bottom: 1.5em;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     font-size: 1.2em;
     font-weight: 600;
     color: #454445;
    }
    
    #stwo-col .sbox1
    {
     float: left;
     width: 210px;
    }
    
    #stwo-col .sbox2
    {
     float: right;
     width: 210px;
    }
    
    /*********************************************************************************/
    /* Copyright */
    /*********************************************************************************/
    
    #copyright
    {
     overflow: hidden;
     padding: 5em 0em;
     border-top: 1px solid rgba(255,255,255,0.08);
    }
    
    #copyright p
    {
     letter-spacing: 0.20em;
     text-align: center;
     text-transform: uppercase;
     font-size: 0.80em;
     color: rgba(255,255,255,0.3);
    }
    
    #copyright a
    {
     text-decoration: none;
     color: rgba(255,255,255,0.6);
    }
    
    /*********************************************************************************/
    /* Featured */
    /*********************************************************************************/
    
    #featured-wrapper
    {
     overflow: hidden;
     padding: 6em 0em;
     background: #383838;
     text-align: center;
    }
    
    #featured
    {
     overflow: hidden;
    }
    
    #featured .major
    {
     overflow: hidden;
     margin-bottom: 3em;
     padding-bottom: 2em;
     border-bottom: 1px solid #E8E8E8;
    }
    
    #featured .major h2
    {
     font-size: 3em;
    }
    
    #featured .major .byline
    {
     font-size: 1.3em;
    }
    
    #featured .title
    {
     margin-bottom: 1.5em;
     padding-bottom: 1.5em;
     border-bottom: 1px solid rgba(255,255,255,.1);
    }
    
    #featured .title h2
    {
     font-size: 1.2em;
    }
    
    #featured h2
    {
     text-align: center;
     color: #FFF;
    }
    
    #featured .icon
    {
     position: relative;
     display: inline-block;
     width: 100px;
     height: 100px;
     background: #E24E2A;
     margin: 0px auto 20px auto;
     line-height: 100px;
     font-size: 3em;
     text-align: center;
     color: #FFF;
    }
    
    .column1, .column2, .column3, .column4
    {
     width: 282px;
    }
    
    .column1, .column2
    {
     float: left;
     margin-right: 24px;
    }
    
    .column3
    {
     float: left;
    }
    
    .column4
    {
     float: right;
    }
    
    
     #header-featured
     {
     height: 30em;
     background-image: url(images/banner.jpg);
     background-position: center;
     background-size: cover;
     }
    
    
    #slider-wrapper
    {
     padding: 6em 0em;
     background: #DB3256;
    }
    
    #slider
    {
     margin: 0em auto 0em auto;
     width: 1200px;
     position: relative;
    }
    
    #slider .button
    {
    }
    
    #slider .button:hover
    {
    }
    
    #slider .viewer
    {
     width: 1000px;
     height: 375px;
     margin: 0 auto;
     overflow: hidden;
    }
    
    #slider .viewer .reel
    {
     display: none;
     height: 375px;
    }
    
    #slider .viewer .reel .slide
    {
     position: relative;
     width: 1000px;
     height: 375px;
    }
    
    #slider .viewer .reel h2
    {
     position: absolute;
     top: 130px;
     left: 0;
     width: 1200px;
     height: 80px;
     line-height: 80px;
     background: #111111;
     text-align: center;
     opacity: 0.85;
     font-weight: normal;
     color: #ffffff;
     font-size: 2.25em;
    }
    
    #slider .viewer .reel p
    {
     position: absolute;
     top: 210px;
     left: 0;
     width: 1200px;
     height: 40px;
     line-height: 40px;
     background: #0074C6;
     text-align: center;
     opacity: 0.85;
     font-weight: normal;
     color: #ffffff;
     font-size: 1.1em;
    }
    
    #slider .icon
    {
     font-size: 4em;
     color: #FFF;
    }
    
    #slider .previous-button
    {
     position: absolute;
     top: 150px;
     left: 0;
    }
    
    #slider .next-button
    {
     position: absolute;
     top: 150px;
     right: 0;
    }
    
    #slider .indicator
    {
     margin: 30px auto 0 auto;
    }
    
    #slider .indicator ul
    {
     list-style: none;
     padding: 0;
     margin: 0;
     text-align: center;
    }
    
    #slider .indicator ul li
    {
     display: inline-block;
     width: 12px;
     height: 12px;
     text-indent: -9999em;
     background: #c8c8c8;
     margin: 0 2px 0 2px;
     border-radius: 8px;
     border-bottom: solid 1px #ffffff;
     border-top: solid 1px #909090;
    }
    
    #slider .indicator ul li.active
    {
     background: #505050;
     border-top: solid 1px #505050;
    }
    
    /*********************************************************************************/
    /* Footer */
    /*********************************************************************************/
    
    
    #footer-wrapper
    {
     overflow: hidden;
     padding: 6em 0em;
     background: #383838;
     text-align: center;
    }
    
    #footer
    {
     overflow: hidden;
    }
    
    
    #footer .title h2
    {
     font-size: 1.6em;
     font-weight: 300;
     color: #FFF;
    }
    
    #footer .title .byline
    {
     display: block;
     padding-top: 1em;
     text-transform: uppercase;
     font-size: 0.80em;
     color: rgba(255,255,255,0.5);
    }
    
    #footer .button
    {
     margin-top: 2em;
    }
    
    #extra
    {
     overflow: hidden;
     margin: 0em auto 0em auto;
     padding: 5em 0em 5em 0em;
     text-align: center;
    }
    
    #extra h2
    {
     margin: 0em;
     padding: 0em;
     font-weight: 400;
     font-size: 2.4em;
     color: #555555;
    }
    
    #extra span
    {
     display: block;
     padding-top: 0.20em;
     text-transform: uppercase;
     font-size: 1.2em;
     color: #A2A2A2;
    }
    
    
    #extra .button
    {
     margin-top: 2em;
    }
    
    #extra2
    {
     overflow: hidden;
     padding-bottom: 5em;
    }
    
    #extra2 .button
    {
     margin-top: 2em;
    }
    
    #extra2 .title h2
    {
     font-size: 2em;
    }
    
    #extra2 .title .byline
    {
     font-size: 0.80em;
    }
    
    #extra2 #ebox1,
    #extra2 #ebox2
    {
     width: 560px;
    }
    
    #extra2 #ebox1
    {
     float: left;
    }
    
    #extra2 #ebox2
    {
     float: right;
    }
    

    Hoffa da weiß einer weiter.

    Danke euch schonmal!!
     
  2. 13. Januar 2015
    AW: Website Template CSS wird in Safari auf iPhone 6 nicht richtig angezeigt

    Hast du mal geprüft ob die <div alle richtig geschlossen werden bzw nicht zu früh (zu viel) geschlossen werden?
     
  3. 14. Januar 2015
    AW: Website Template CSS wird in Safari auf iPhone 6 nicht richtig angezeigt

    Musste den Body im CSS auf Width 1370px definieren, komischerweise funktioniert es jetzt überall richtig. Danke dir trotzdem raid!
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.