---
title: "Olika bakgrund i IE och övriga läsare"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/112888-olika-bakgrund-i-ie-och-övriga-läsare"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Karlsson"
published: "2004-10-04T09:54:20.000Z"
updated: "2004-10-04T22:35:55.000Z"
replies: 11
views: 346
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/112888-olika-bakgrund-i-ie-och-övriga-läsare"
---

# Olika bakgrund i IE och övriga läsare

## #1 — Karlsson, 2004-10-04T09:54Z

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

Permalänk: https://www.webforum.nu/p/112888

## #2 — jarvklo, 2004-10-04T10:04Z

Hmm..

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

\---------------

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

Permalänk: https://www.webforum.nu/p/1451729

## #3 — Karlsson, 2004-10-04T12:03Z

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;
}
```

Permalänk: https://www.webforum.nu/p/1451787

## #4 — sabbacus, 2004-10-04T12:17Z

Om jag inte missminner mig utnyttjar hacket en renderingsbugg i IE. Mer info finns [här](http://tantek.com/CSS/Examples/boxmodelhack.html)

Permalänk: https://www.webforum.nu/p/1451792

## #5 — jarvklo, 2004-10-04T12:19Z

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

Permalänk: https://www.webforum.nu/p/1451793

## #6 — Karlsson, 2004-10-04T12:24Z

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

Permalänk: https://www.webforum.nu/p/1451795

## #7 — Karlsson, 2004-10-04T12:30Z

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

Permalänk: https://www.webforum.nu/p/1451801

## #8 — Insider, 2004-10-04T14:49Z

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.

Permalänk: https://www.webforum.nu/p/1451924

## #9 — jarvklo, 2004-10-04T15:09Z

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

Permalänk: https://www.webforum.nu/p/1451936

## #10 — OlleBoop, 2004-10-04T19:46Z

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

Permalänk: https://www.webforum.nu/p/1452106

## #11 — Karlsson, 2004-10-04T20:05Z

Fuck!

Permalänk: https://www.webforum.nu/p/1452110

## #12 — jarvklo, 2004-10-04T22:35Z

Så kan man uttrycka saken ja - [Browse happy](http://browsehappy.com/) :birp

Permalänk: https://www.webforum.nu/p/1452182

---

Tråden på webben: https://www.webforum.nu/amne/html-css/112888-olika-bakgrund-i-ie-och-övriga-läsare