CSS + Mozilla & background-image

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

CSS + Mozilla & background-image

Post by nigma »

Basically I have:

Code: Select all

span.sectionTitle {
background-image: url(blue_04.gif);
}
Now, for some reason the background image will not show up in Mozilla, anyone tell me why?

Thanks for any and all help / advice provided.
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

works fine for me.
You're sure the url is correct?
the background image should show up in right-click->"view page info"->media as type=Background where you can check its properties.
Cruzado_Mainfrm
Forum Contributor
Posts: 346
Joined: Sun Jun 15, 2003 11:22 pm
Location: Miami, FL

Post by Cruzado_Mainfrm »

try this code:

Code: Select all

span.sectionTitle { 
background-image: url('blue_04.gif'); 
}
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

that shouldn't be necessary
http://www.w3.org/TR/REC-CSS1#url
But note the remark in that section
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

My stylesheet is in the same dir as "blue_04.gif."

Volka: It doesn't show up when I do that, but the .sectionTitle is nested inside two divs. Like this:

Code: Select all

<div id="rightSideContent">
<div class="section">
<span class="sectionTitle">Section Title</span>
// the div sectionContent would be here
</div>
</div>
Wouldn't think that would make a difference but I am no CSS "wizard" so I cannot say that with 90% confidence.
User avatar
scorphus
Forum Regular
Posts: 589
Joined: Fri May 09, 2003 11:53 pm
Location: Belo Horizonte, Brazil
Contact:

Post by scorphus »

Works for me too (IE 6, Mozilla 1.4 and Mozilla Firebird 0.6.1). This is the way I tested:

Code: Select all

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="rightSideContent">
<div class="section">
<span class="sectionTitle">Section Title</span>
// the div sectionContent would be here
</div>
</div>

</body>
</html>
style.css:

Code: Select all

span.sectionTitle &#123;
	background-image: url(blue_04.gif);
&#125;
All 3 files in the same dir.

Regards,
Scorphus.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

If it works for you guys would it also work for you if it was on the web? Maybe I configured mozilla all wierd?
User avatar
scorphus
Forum Regular
Posts: 589
Joined: Fri May 09, 2003 11:53 pm
Location: Belo Horizonte, Brazil
Contact:

Post by scorphus »

I've uploaded it to my server so you can try it out. Go for it.

Cheers,
Scorphus.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Hey thanks scorphus, I am going to check it out when I get home.
Post Reply