kostenloser Webspace werbefrei: lima-city


Safari macht Streifen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    tchab

    tchab hat kostenlosen Webspace.

    Moin Leute, ich habe heute in bisschen rumgespielt und beim Testen bemerkt, dass mir Safari (zumindest der mobile) Streifen anzeigt, wo eigentlich keine sein sollten.

    Es geht um die Farbbereiche, die eigentlich durchgängig sein sollten.

    Screenshot: http://abload.de/img/mobile.0e2rvo.jpg

    In Firefox, Opera und Chrome/ium auf meinem System sehe ich keine Streifen innerhalb der Farben.

    Hier kann man sich das ganze live ansehen: blog.x421.de

    Das CSS:
    @import url(http://fonts.googleapis.com/css?family=Quicksand:400,300);
    @import url(http://fonts.googleapis.com/css?family=Alef);
    
    body { 
    	margin:0em; 
    	padding:0em; 
    	font-family:Monospace; 
    	color:#ffffff; 
    	background: #3a3636;
    	font-family: 'Quicksand', sans-serif; 
    	font-weight: 300;
    	font-size: 1.0em;
    	text-align: justify;
    	line-height: 1.500em;
    }
    
    #wrapper {
    	width: 50.000em;
    	margin: 0 auto;
    }
    
    #intro {
    	height: 1.100em;
    	font-size: 2.500em;
    	padding: 0.400em;
    	padding-bottom: 0px;
    	color: black;
    	background: #78D1FF;
    }
    
    #intro-left {
    	text-align: left;
    }
    
    #intro-left a:link {
    	color: black;
    	text-decoration: none;
    }
    
    #intro-left a:visited {
    	color: black;
    	text-decoration: none;
    }
    
    #intro-left a:hover {
    	color: black;
    	text-decoration: underline;
    }
    
    #intro-right {
    	text-align: right;
    	float: right
    }
    
    #navbar {
    	text-align: center;
    	background: #78D1FF;
    	width: 100%;
    	font-family: 'Alef', sans-serif;
    	color: black;
    }
    
    #navbar a:link {
    	color: #000000;
    	text-decoration: none;
    }
    
    #navbar a:visited {
    	color: #000000;
    	text-decoration: none;
    }
    
    #navbar a:hover {
    	color: #000000;
    	text-decoration: underline;
    }
    
    #content {
    	clear: both;
    }
    
    .postbox {
    	font-family: 'Alef', sans-serif;
    	background: #222020;
    	margin-top: 1em;
    	margin-bottom: 1em;
    }
    
    .postbox a:link {
    	color: #B0FFAE;
    	text-decoration: none;
    }
    
    .postbox a:visited {
    	color: #B0FFAE;
    	text-decoration: none;
    }
    
    .postbox a:hover {
    	text-decoration: underline;
    	color: #B0FFAE;
    }
    .posttitle {
    	font-family: 'Quicksand', sans-serif;
    	font-size: 1.8em;
    	font-weight: bolder;
    	height: 1em;
    	color: black;
    	background: #B0FFAE;
    	text-align: center;
    	padding: 0.1em;
    } 
    
    .posttitle a:link {
    	color: black;
    	text-decoration: none;
    }
    
    .posttitle a:visited {
    	color: black;
    	text-decoration: none;
    }
    
    .posttitle a:hover {
    	color: black;
    	text-decoration: underline;
    }
    
    .meta {
    	background: #B0FFAE;
    	color: black;
    	text-align: center;
    }
    .posttext {
    	padding: 5px;
    }
    .nav-posts {
    	width: 100%;
    }
    .previous {
    	float: left;
    	color: #78D1FF;
    	width: 100px;
    }
    
    .next {
    	float: right;
    	color: #78D1FF;
    	width: 100px;
    }
    
    .pager {
    	background: #78D1FF;
    	font-family: 'Alef', sans-serif;
    	color: black;
    	margin: 0px;
    	text-align: center;
    	padding-left: 4px;
    	padding-right: 4px;
    }
    
    .pager a:link {
    	color: black;
    	text-decoration: none;
    }
    
    .pager a:visited {
    	color: black;
    	text-decoration: none;
    }
    
    .pager a:hover {
    	color: black;
    	text-decoration: none;
    }
    
    
    #bottombar {
    	text-align: center;
    	background: #78D1FF;
    	width: 100%;
    	font-family: 'Alef', sans-serif;
    	color: black;
    }
    
    #bottombar a:link {
    	color: #000000;
    	text-decoration: none;
    }
    
    #bottombar a:visited {
    	color: #000000;
    	text-decoration: none;
    }
    
    #bottombar a:hover {
    	color: #000000;
    	text-decoration: underline;
    }


    Beitrag zuletzt geändert: 20.6.2013 12:16:28 von tchab
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/


    var ua = navigator.userAgent.toLowerCase(); 
     if (ua.indexOf('safari')!=-1){ 
       if(ua.indexOf('chrome')  > -1){
        alert("1") // chrome
       }else{
    
       <link href="/mein/apple/div.css" type="text/css" rel="stylesheet" />
        alert("2") // saf
       }
      }

    usw..........


    ihr solltet mal lernen google zu nutzen :wall:

    Beitrag zuletzt geändert: 20.6.2013 22:38:27 von n0tiert
  4. Autor dieses Themas

    tchab

    tchab hat kostenlosen Webspace.

    n0tiert schrieb:
    http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/


    var ua = navigator.userAgent.toLowerCase(); 
     if (ua.indexOf('safari')!=-1){ 
       if(ua.indexOf('chrome')  > -1){
        alert("1") // chrome
       }else{
    
       <link href="/mein/apple/div.css" type="text/css" rel="stylesheet" />
        alert("2") // saf
       }
      }

    usw..........


    Ich habe keine Lust auf Hacks, nur damit meine Seite auf Gerät XYZ gut aussieht. Es gibt nicht umsonst Standards. (Auch wenn es natürlich Standards dafür gibt, mit Dingen zu arbeiten, die diese Standards nicht unterstützen.)

    Deine Website bezieht sich übrigens auf Linien, die beim zoomen enstehen, meine sind immer und auf jeder Zoomstufe sichtbar.


    ihr solltet mal lernen google zu nutzen :wall:


    Ja, du hast recht, dieser Thread ist ein bisschen spammig. Ist mir beim erstellen nicht aufgefallen.

    Leider habe ich mit meinen Suchanfragen keine Ergebnisse erzielen können. Da mir der Fehler auch noch nie unterlaufen ist habe ich auch nicht damit gerechnet, dass er so häufig auftritt, dass es schon Hacks dafür gibt.

    Würde mich trotzdem interessieren, warum Safari das so macht. Vielleicht hat hier ja jemand ne Idee.

    Beitrag zuletzt geändert: 20.6.2013 23:05:21 von tchab
  5. die Standards wovon du sprichst, wo stehen die bitte, es gibt stellen die sind der Meinung so sollte es gemacht werden. aber es ist nicht 100% in stein gemeißelt.... ob chrome, opera, firefox und von IE will ich garnicht sprechen haben oder benötigen ihre speziellen Hacks

    nur so als sample bzgl Browser spezifisches CSS: :wink:

    #example1 {
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    }


    Allein das einbinden von jQuery UI und W3c css check ist schon beunruhigend was die fehler ausgabe betrifft...... :confused:


    Beitrag zuletzt geändert: 21.6.2013 6:24:15 von n0tiert
  6. Autor dieses Themas

    tchab

    tchab hat kostenlosen Webspace.

    n0tiert schrieb:
    die Standards wovon du sprichst, wo stehen die bitte, es gibt stellen die sind der Meinung so sollte es gemacht werden. aber es ist nicht 100% in stein gemeißelt.... ob chrome, opera, firefox und von IE will ich garnicht sprechen haben oder benötigen ihre speziellen Hacks

    nur so als sample bzgl Browser spezifisches CSS: :wink:

    #example1 {
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    }


    Allein das einbinden von jQuery UI und W3c css check ist schon beunruhigend was die fehler ausgabe betrifft...... :confused:


    1. Die Standards werden von w3 ausgearbeitet.
    2. Ich kenne Präfixe in CSS. Ich nutze sie aber nicht. Meine Güte, selbst Google hat erkannt, dass sie Schrott sind.
    3. Und weil ich es gerne so valide wie möglich habe, mache ich sowas eben nicht.

    Beitrag zuletzt geändert: 21.6.2013 21:00:22 von tchab
  7. keine hacks , ok
    was machste bei portrait, rechts schwarz ?

    mhhhhmmm also CSS, lass ma schauen , was sagste den hierzu ?


    http://stackoverflow.com/questions/5329110/css-media-queries-for-iphone

    http://stackoverflow.com/questions/5031482/how-to-target-iphone-3gs-and-iphone-4-in-one-media-query

    http://stackoverflow.com/questions/12539697/iphone-5-css-media-query

    http://www.w3.org/TR/css3-mediaqueries/

    w3c , :lol:

    EDIT:
    Iphone5 link added
    und da dir die Prafixe bekannt sind packste noch ein "! important" für den div mit hinein


    ansonnsten schalte ne landingpage "sorry but iphone browser suxx"



    Beitrag zuletzt geändert: 21.6.2013 21:16:17 von n0tiert
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!