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. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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:
    [​IMG]

    In der eBay App siehts dann so aus:
    [​IMG]

    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. Anzeige
  3. #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?
     
  4. #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!
     

  5. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Website Template CSS
  1. Antworten:
    1
    Aufrufe:
    1.117
  2. Antworten:
    0
    Aufrufe:
    1.095
  3. Antworten:
    1
    Aufrufe:
    337
  4. Antworten:
    3
    Aufrufe:
    1.138
  5. Antworten:
    2
    Aufrufe:
    310