Olika bakgrund i IE och övriga läsare

11 svar · 340 visningar · startad av Karlsson 4 okt. 2004

KarlssonMedlem sedan maj 2000252 inlägg

Frågan4 okt. 2004 09:54#1

Halloj
två frågor;
1. Jag vill lägga en delvis transparent bild som bakgrund i en div för IE, för övriga läsare en semitransparent .png-bild.
Går det att i samma id skriva båda dom sakerna, d.v.s. dölja .png-bilden för IE och vice versa?

2. Tycker att texten syns dålig i ie när jag lagt en delvis transparent bild som bakgrund. Nåt tips vad jag kan göra för att det ska se bättre ut?

/ Karlsson

jarvkloMedlem sedan juli 20013 378 inlägg

4 okt. 2004 10:04#2

Hmm..

Du kan t.ex. använda MS egna "Villkorliga kommentarer" till detta (även om det innebär att du får lägga kod på varje HTML-sida)

<style type="text/css">
<!--
div.annorlunda {background-image:url(alla-utom-ie.png)}
-->
</style>

<!--[if IE]>
<style type="text/css">
div.annorlunda {background-image:url(ie-specifik.png)}
</style>
<![endif]-->

eller

<link rel="stylesheet" type="text/css" href="grundutseende.css">

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="msiespecialare.css">
<![endif]-->

Se också: http://www.webforum.nu/showthread.php?s=&postid=667854#post667854

---------------

Beror väl ganska mycket på hur bilden ser ut...
Prova att jobba med kontrastverkan genom att byta färg på texten, eller kanske att göra texten fetare eller större (eller både och)

KarlssonMedlem sedan maj 2000252 inlägg

4 okt. 2004 12:03#3

Ok
Det är en sak jag undrar över, i "the box model hack" används en sån här grej, vad gör den egentligen?

div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

sabbacusMedlem sedan juli 2002630 inlägg

4 okt. 2004 12:17#4

Om jag inte missminner mig utnyttjar hacket en renderingsbugg i IE. Mer info finns här

jarvkloMedlem sedan juli 20013 378 inlägg

4 okt. 2004 12:19#5

Den utnyttjar en bugg i MSIE som gör att MSIE slutar läsa deklarationen vid den första voice-family:-deklarationen

MSIE uppfattar alltså koden ungefär såhär:

div.content { 
  width:400px; 
[red][äsch - det här ser felaktigt ut - jag hoppar över resten av deklarationerna][/red]
}

medan "resten av världen" (iaf de flesta andra webbläsarna) ser en redundant deklaration där både width: och voice-family: anges två gånger (och där den senaste gäller - alltså värdena "inherit" och "300px")

Du kan alltså använda Box Model Hack istället om du vill genom att köra med

div.content { 
  background-image:url(ie-specifik.png);
  voice-family: "\"}\""; 
  voice-family:inherit;
  background-image:(alla-utom-ie.png);
}

om du vill.

Vad som är "enklast" eller "elegantast" är en smaksak.
Personligen tycker jag att det känns mer och mer olustigt att blanda in utlösning av webbläsarspecifika buggar i CSS-koden regelmässigt, och har numera börjat gå över till MSIE-fix-och-trixande med villkorliga kommentarer istället eftersom jag då använder en dokumenterad och supportad "finess" i MSIE ;)

KarlssonMedlem sedan maj 2000252 inlägg

4 okt. 2004 12:24#6

Tackar tackar, tror jag kör med "hackeriet" trots allt.

KarlssonMedlem sedan maj 2000252 inlägg

4 okt. 2004 12:30#7

Suck...
man ska inte ropa hej förrän man är över bäcken

#header		{
			padding: 15 15 15 15;
			width: 350px;
			float: left;
			border: 1px solid white;
			background-image: url(gfx/dotted_bgr.gif);
			voice-family: "\"}\""; 
			voice-family:inherit;
			background-image: url(gfx/femti.png);
			}

Visar inte bakgrundsbilden i IE :-(

InsiderMedlem sedan jan. 2000978 inlägg

4 okt. 2004 14:49#8

Sökvägen: gfx/dotted_bgr.gif är troligen fel.
Om man anger en relativ sökväg ska den anges i förhållande till CSS-dokumentet.

jarvkloMedlem sedan juli 20013 378 inlägg

4 okt. 2004 15:09#9

Hmm...

Snabb test visar att the Box Model Hack tydligen inte påverkar background utan bara width !

Följande kod

<html>
<head>
  <title>Ett exempel</title>
<style type="text/css">
#header		{
  padding: 15px 15px 15px 15px;
  width: 350px;
  float: left;
  border: 1px solid black;
  voice-family: "\"}\""; 
  voice-family:inherit;
  background-color:navy;
  width:10px;
}
</style>
</head>
<body>
<div id="header">Test this!</div>
</body>
</html>

ger nämligen en marinblå bakgrubd (men olika bredd) både i MSIE6/Win2K och Mozilla 1.4 (som var de webbläsare jag råkade ha tillgång till just här och nu)...

BLÄ! :bla Det är precis sådant här som får mig att rekommendera villkorliga kommentarer istället - för man vet i praktiken aldrig exakt var man har webbläsarbuggarna :x

OlleBoopMedlem sedan feb. 20001 861 inlägg

4 okt. 2004 19:46#10

Nej, blev ju så med "be nice to Opera"-hacket för att använda x-small etc för textstorlek, funkade i Opera 6 men inte i 7.
Helt plötsligt fixar MS till IE (oink, oink, flap-flap-flap :OO ) också sen sitter man med en hel drös csshack som måste fixas...

KarlssonMedlem sedan maj 2000252 inlägg

4 okt. 2004 20:05#11

Fuck!

jarvkloMedlem sedan juli 20013 378 inlägg

4 okt. 2004 22:35#12

Så kan man uttrycka saken ja - Browse happy :birp