[CSS] Background-image niet in IE - Softwareontwikkeling

woensdag 16 mei 2007 14:50

Acties:

Verwijderd

Topicstarter

ik wil met css, via een externe stylesheet, een transparante background-image maken voor een deel van mijn pagina. in firefox werkt het perfect, maar in internet explorer wil hij mijn image niet tonen.
ik heb via google op internet gezocht naar deze "ie bug" maar geen fix voor kunnen vinden.
het enige wat ik vond is het via een interne stylesheet te doen, maar dat lijkt me onlogisch, want dan moet ik het op elke pagina programmeren, dat is juist de kracht van CSS, 1 x programmeren en overal toepassen. ik hoop dat een van jullie hier wel een oplossing voor weet. Dit is de css code:

Cascading Stylesheet:

div#content_bg {
    width: 90%;
    height: 380;
    background:url('filename.jpg') 12% no-repeat;
    opacity: .30;
    position: absolute;
}

woensdag 16 mei 2007 15:01

Acties:

Verwijderd

IE 7 of IE 6 ?

woensdag 16 mei 2007 15:03

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op woensdag 16 mei 2007 @ 15:01:
IE 7 of IE 6 ?

IE7 doet ie het niet en IE6 heb ik niet getest, omdat ik die niet meer op mijn pc hebt staan.

woensdag 16 mei 2007 15:10

Acties:

OkkE

CSS influencer :+

Met deze test, gaat het prima in zowel FF als in IE6:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
div#content_bg {
    width: 90%;
    height: 380;
    background:url('test.gif') 12% no-repeat;
    opacity: .30;
    position: absolute;
}
        </style>
    </head>
    <body>

    <div id="content_bg">test</div>

    </body>
</html>

Dus ik denk dat het of op een IE7 probleem gaat, of om een foutje in de gebruikte HTML...
Maar waarom staat er geen eenheid achter je height:380; ?

[ Voor 0% gewijzigd door OkkE op 16-05-2007 15:30 . Reden: Tekst toegevoegd aan de DIV ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 16 mei 2007 16:05

Acties:

Verwijderd

Topicstarter

Dat vertelde ik ook in mijn 1e bericht, dat het wel via een interne stylesheet werkt maar niet via een externe stylesheet. Terwijl die het in firefox zowel met interne als externe stylesheets werkt. Ik wil weten hoe je dit zelfde bereikt met ie7 met externe stylesheet.
Er staat geen eenheid achter omdat als je niks invoert hij standaard pixels pakt.

woensdag 16 mei 2007 16:29

Acties:

Pendaco

Vogon Poetry FTW!

Vervang, <style type="text/css"> door;
<link rel="stylesheet" href="naamcssbestand.css" type="text/css" media="screen" />

Maak een .css bestand knip en plak;
div#content_bg {
width: 90%;
height: 380;
background:url('test.gif') 12% no-repeat;
opacity: .30;
position: absolute;
}

Sla op > naamcssbestand.css

Verwijder uit je html;
<style type="text/css">
div#content_bg {
width: 90%;
height: 380;
background:url('test.gif') 12% no-repeat;
opacity: .30;
position: absolute;
}
</style>

woensdag 16 mei 2007 16:35

Acties:

GeleFles

What's in a bottle?

staat de achtergrond niet toevallig in een andere map als de stylesheet en je document? misschien dat er met het pad iets verkeerd gaat...

woensdag 16 mei 2007 16:36

Acties:

OkkE

CSS influencer :+

Verwijderd schreef op woensdag 16 mei 2007 @ 16:05:
Dat vertelde ik ook in mijn 1e bericht, dat het wel via een interne stylesheet werkt maar niet via een externe stylesheet. Terwijl die het in firefox zowel met interne als externe stylesheets werkt. Ik wil weten hoe je dit zelfde bereikt met ie7 met externe stylesheet.
Er staat geen eenheid achter omdat als je niks invoert hij standaard pixels pakt.

Op welke manier link je de externe stylesheet? Misschien dat het daar dan in zit.. Aangezien ik hier geen IE7 heb, kan ik het daar niet op testen, maar met deze code gaat het ook in IE6 goed:

code:

1	<link rel="stylesheet" href="bgtest.css" media="screen">

RonnieB82 schreef op woensdag 16 mei 2007 @ 16:35:
staat de achtergrond niet toevallig in een andere map als de stylesheet en je document? misschien dat er met het pad iets verkeerd gaat...

Dan zou die het in Firefox ook niet doen, lijkt me....

Verder wel een goede tip; hier ben ik in het begin ook nog wel eens mee de mist in gegaan. Je moet het path naar je background-image beredeneren vanuit je HTML document.

[ Voor 25% gewijzigd door OkkE op 16-05-2007 16:38 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 16 mei 2007 16:43

Acties:

Verwijderd

Topicstarter

RonnieB82 schreef op woensdag 16 mei 2007 @ 16:35:
staat de achtergrond niet toevallig in een andere map als de stylesheet en je document? misschien dat er met het pad iets verkeerd gaat...

ja ik denk dat dat het probleem is, ik ga nu de image in dezelfde map zetten als de stylesheet, ik beredeneerde inderdaad vanuit het html document naar de locatie van de image en niet vanuit de stylesheet, maar de image wordt natuurlijk wel in de stylesheet aangeroepen, dus moet je vanuit de stylesheet beredeneren, wel vreemd dat firefox dat gewoon accepteert en ie niet.

woensdag 16 mei 2007 16:51

Acties:

OkkE

CSS influencer :+

Hmm..

Als ik deze structuur heb:

code:

1
2
3

\index.php
\images\logo.gif
\include\css\default.css

Dan moet ik in mijn CSS het volgende doen:

code:

1	#logo { background:url('/images/logo.gif') no-repeat 0px 0px; }

Als ik vanuit de CSS redeneer, zoals hier onder, werkt het bij mij niet..

code:

1	#logo { background:url('../../images/logo.gif') no-repeat 0px 0px; }

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 17 mei 2007 17:31

Acties:

moozzuzz

OkkE schreef op woensdag 16 mei 2007 @ 16:51:
Hmm..

In jouw voorbeeld kan dit ook liggen aan verschil relatieve (./../xxx) en absolute (/yy/xxx) urls?

maandag 21 mei 2007 14:20

Acties:

Verwijderd

Topicstarter

bij mij werkt het inmiddels al,
ik heb deze structuur:
\index.php
\css\styles.css
\imgs\logo.gif

en deze css code (aangepast aan jouw voorbeeld dan):
#logo { background:url('../images/logo.gif') no-repeat 0px 0px; }

dus je moet wel degelijk vanuit CSS redeneren.
1 directory omhoog en daar de map imgs zoeken en daarbinnen logo.gif

maandag 21 mei 2007 18:22

Acties:

moozzuzz

Verwijderd schreef op maandag 21 mei 2007 @ 14:20:
dus je moet wel degelijk vanuit CSS redeneren.
1 directory omhoog en daar de map imgs zoeken en daarbinnen logo.gif

of

Cascading Stylesheet:

1
2
3

#logo {
    background: url('/images/logo.gif') no-repeat 0px 0px;
}