Vinnaren i pepparkakshustävlingen!
2013-07-06, 15:38
  #1
Medlem
Spaders avatar
Har följt instruktionerna på deras sida och ändå funkar det inte.
Har googlat och följt instruktionerna som andra skrivit, och det funkar ändå inte.

Börjar bli jävligt less på piss-browsern IE. Fattar inte att MS är så jävla inkompetenta.

Kod följer nedan:

HTML:
HTML-kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Mr LOL-K</title>
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script type="text/javascript" src="js/modernizr.js"></script>
</head>

<body>
	<div id="container">

		<div id="content">	
			<div id="header">		 
				<p>This is the Header</p>			   
			</div>
			<p>This is the Content</p>		
			<div id="footer">		       
				<p>This is the Footer</p>				    
			</div>
		</div>
	</div>
</body>
</html>

CSS:
HTML-kod:
* { 
	padding: 0; margin: 0; 
}

body {
	background: url(../img/BG.png);
	background-color: #2a2a2a;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	height: 100%;
}

html {
	height: 100%;
}

#container { 
	border: 10px solid transparent;
	border-top: 0px;
	border-bottom: 0px;
	
	-moz-border-image: url(../img/containerBorder.png) 0 10 0 10 repeat; /* Old Firefox */
	-webkit-border-image: url(../img/containerBorder.png) 0 10 0 10 repeat; /* Safari */
	-o-border-image: url(../img/containerBorder.png) 0 10 0 10 repeat; /* Opera */
	border-image: url(../img/containerBorder.png) 0 10 0 10 repeat;
	
	height: 100%;
	margin: 0 auto;
	width: 800px;
}

#header {
	background: #000;
	border: 0px;
	color: #fff;
	height: 100px;
	width: 800px;
}

#content { 
	background: #aaa;
	border: 0px;
	color: #fff;
	height: 100%;
	width: 800px;
}

#footer { 
	background: #000;
	border: 0px solid;
	bottom: 0%;
	clear: both;
	color: #FFF;
	font-weight: bold;
	position: fixed;
	text-align: center;
	width: 800px;
}

Har försäkrat mig om att det inte är ett pathing-fel (har länkat till skriptet på en extern sida bara för att testa - and still nothing)

Har även testat att tanka deras dev-version av scriptet (som innehåller ALLT - inte bara det jag behöver) och det funkar ändå inte.
Har även testat med CSS Pie som är ett liknande alternativt: funkar inte där heller.
Citera
2013-07-06, 20:32
  #2
Medlem
Povels avatar
Berätta hur det inte funkar. Vad för resultat förväntade du dig, och på vilket sätt skiljer det sig från vad som händer? Det du skrev ger inte mycket ledning tyvärr.

IE10 är en utmärkt webbläsare, som inte är så svår att få till saker i.

/p
Citera
2013-07-07, 02:14
  #3
Medlem
Spaders avatar
Det funkar inte fast jag följt instruktionerna till installationen; det modernizr ska göra är att göra så att CSS3-attribut såsom border-image funkar i IE10 (som är en jävla skitbrowser som inte följer CSS-standarder).

För det är just border-image som jag behöver.

Länk till deras sida: http://modernizr.com/
Citera
2013-07-07, 03:02
  #4
Medlem
gadzooxs avatar
Citat:
Ursprungligen postat av Spader
Det funkar inte fast jag följt instruktionerna till installationen; det modernizr ska göra är att göra så att CSS3-attribut såsom border-image funkar i IE10 (som är en jävla skitbrowser som inte följer CSS-standarder).
Öh nej. Du har missuppfattat syftet med Modernizr. Det handlar enbart om feature-detection, dvs den tar reda på om browsern ifråga redan stödjer border-image (eller vilken feature det nu handlar om). Den fixar inte avsaknaden av features - har aldrig gjort och kommer förmodligen aldrig att göra, eftersom det finns andra libs för sånt.

Modernizr indikerar feature-stöd genom att peta in klasser på html-taggen, så att du kan bygga CSS-regler för specifika features, eller från JS enkelt ta reda på om browsern stödjer feature X. Om den aktuella browsern stödjer CSS3-propertyn border-image, så petas class="borderimage" in på html-taggen och i JS är Modernizr.borderimage == true. Om browsern inte stödjer border-image så insertas inte klassen och Modernizr.borderimage returnerar false. Men det är också allt Modernizr gör.

Följer inte IE CSS-standarder? Jag kan hålla med om att IE inte är världens bästa browser, långt ifrån, men border-image är faktiskt en CSS3-feature. CSS3 var ingen färdig standard (är fortfarande inte?) när IE10 släpptes. Du kan inte kräva stöd för standarder som ännu inte är standarder, eller inte var det när produkten släpptes.
Citera
2013-07-07, 12:22
  #5
Medlem
Spaders avatar
Jaha det var ju trist.
Och ja browser-image är CSS3 - som borde vara standard nu, eller? Skiten har ju funnits ett bra tag.
Border-image hör ju till CSS3-modulen "backgrounds and borders" som CR-status (candidate recommendation). Alla stora browsers (chrome, FF, safari, opera) har implementerat det redan - utom Explorer... Av någon anledning väljer MS alltid att vänta tills dom är illa tvugna att implementera något (troligen för att skitbrowsern är dåligt skrivet i grunden, kör på gammalt ActiveX skräp, etc).

Det märks för övrigt att det är en skitbrowser. Användandet av IE har minskat för varje år det senaste decenniet. Idag är det knappt 12% av användarna som använder den (mot 33% för 3 år sedan och 50% för 5 år sedan). Ingen annan browser har haft en sådan stadig och stark nedgång i användandet. Det beror givetvis på många olika faktorer men att alltid vara sent ute med att implementera nya grejer i browsern är knappast till deras fördel eller hur?

Tack för svaren. Jag tror jag skiter i IE-användarna för stunden. 1-2 år till och dom kommer knappt existera ändåså.
Citera
2013-07-14, 06:08
  #6
Medlem
Citat:
Ursprungligen postat av gadzoox
Öh nej. Du har missuppfattat syftet med Modernizr. Det handlar enbart om feature-detection, dvs den tar reda på om browsern ifråga redan stödjer border-image (eller vilken feature det nu handlar om). Den fixar inte avsaknaden av features - har aldrig gjort och kommer förmodligen aldrig att göra, eftersom det finns andra libs för sånt.

Korrekt. Vill dock tillägga att Modernizr lägger HTML5-taggar såsom section, nav och footer så att det går att använda dessa i äldre browsers där de inte existerar.
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback