Vollständige Version anzeigen : Website Template CSS wird in Safari auf iPhone 6 nicht richtig angezeigt


GenesisEX
12.01.2015, 20:22

Hallo Leute,

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

Das sieht dann wie folgt aus:
;;0;xup~to/tn/2015_01/13536324;jpeg (;;;xup~to/dl,13536324/android_Samsung-Galaxy-Tab-4-10;1_4;4_portrait;jpg/)

In der eBay App siehts dann so aus:
;;0;xup~to/tn/2015_01/30226060;png (;;;xup~to/dl,30226060/image1;png/)

Das Template könnt ihr euch hier ansehen:
Download: templated-wirework;zip | ;;xup~to (;;;xup~to/dl,94825166/templated-wirework;zip/)

Der CSS Code:

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

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
raid-rush
13.01.2015, 16:39

Hast du mal geprüft ob die <div alle richtig geschlossen werden bzw nicht zu früh (zu viel) geschlossen werden?


GenesisEX
14.01.2015, 00:54

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


Ähnliche Themen zu Website Template CSS wird in Safari auf iPhone 6 nicht richtig angezeigt
  • Seite wird nicht richtig angezeigt
    Huhu, ich habe nen Problem... Wenn ich die Seite emopunk~net normal aufrufe (über Firefox oder Internet Explorer) wird die seite nicht richtig angezeigt. Wie sie da aussieht.. siehe Anhang! Wenn ich sie an einem anderen PC aufrufe oder über nen Web-Proxy wird sie alledings richtig angezeigt. [...]

  • Forum wird mit IE nicht richtig angezeigt
    Lustig - wie soll dir jemand sagen, wo der Fehler liegt, wenn du uns keinen Quellcode gibst? :rolleyes: [...]

  • Seite wird nicht richtig angezeigt
    Hey !! Ich habe folgendes Problem. Ich kann mich nicht mehr Bedanken und somit auch nichts mehr downloaden hier im Forum ! Es wird unten rechts nichts mehr angezeigt ??? Habe aber POP_up Fenster zugelassen !!! Kann mir jemand sagen wo dran das liegt !!! [...]



raid-rush.ws | Imprint & Contact pr