Safari macht Streifen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

12:15, 20.6.2013

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

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

n0tiert hat kostenlosen Webspace.
22:21, 20.6.2013
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

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

tchab hat kostenlosen Webspace.
23:04, 20.6.2013
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

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
n0tiert

n0tiert hat kostenlosen Webspace.
23:31, 20.6.2013
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:
```
#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......

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

tchab hat kostenlosen Webspace.
8:32, 21.6.2013
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:
```
#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......
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
n0tiert

n0tiert hat kostenlosen Webspace.

20:58, 21.6.2013
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 ,

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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city