...

View Full Version : background image in span, works in IE not Firefox, why not?



mushu
03-02-2005, 11:32 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head><title>Webmaster Projects Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #222222;
background-color: transparent;
background: #FFFFFF url(bg.jpg) repeat-x fixed;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
position: absolute;
}
ol ul li {
margin: -15px;
padding: 0;
}
#grid {
background: transparent url(bg-grid.jpg) no-repeat fixed;
color: #333333;
}
-->
</style>
</head>
<body>
<h4>Current &amp; future projects</h4>
<span id="grid">
<p><ul type="circle">
<li>Sitewide web Privacy notice updates</li>
</ul></p>
</span>
</body>
</html>

whizard
03-02-2005, 11:38 PM
Hi, and welcome to the forums!

Could you link to the code so we can have an example?

Dan

mushu
03-02-2005, 11:42 PM
It is on our intranet site and behind a firewall, sorry. But, you can use any image files as long as they are different, and just copy-n-paste the code into an .htm file and voila!

I was thinking that some deep dark css rule or inheritance is preventing the span background from displaying in FF (ver 1.0.1) but I can't find anything on Google related to that, so it must be my error...except that it works fine in IE.

rmedek
03-03-2005, 12:02 AM
IE is an idiot. :D

<span> is used to attach non-semantic markup to inline elements. Use <div>, or change the <span> to "display: block". Better yet, just apply the background image to the ul...

mushu
03-03-2005, 12:24 AM
The effect I wanted is to have all of my written text, and only the text, to show its part of the fixed background image under each letter. See attached screenshot from IE browser (Firefox is same except no background gridlines under text). Since I made the span background image a lighter version of the body background, and then put very light grid lines in it, the effect is that I am typing text over light gridlines with a partially translucent background image under it. Kinda neat looking, but only in IE. :(

If I use a DIV then it makes a huge block under my text and looks ugly. :(

rmedek
03-03-2005, 09:18 AM
That's crazy talk, man... :D

Just apply the background to the list item, that way it only shows up under the list text:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

body {
font: 14px verdana, arial, helvetica, sans-serif;
color: #222;
background: #fff url(bg.jpg) repeat-x fixed;
margin: 0;
}

ol ul li {
margin: -15px;
padding: 0;
}

.grid {
background: url(bg-grid.jpg) no-repeat fixed;
color: #333;
}

</style>
</head>
<body>
<h4>Current &amp; future projects</h4>
<ul type="circle">
<li class="grid">Sitewide web Privacy notice updates</li>
</ul>
</body>
</html>

Should work...

mushu
03-03-2005, 07:07 PM
Hey, thanks man!

It works just great in FF but ... I sure hate IE.

In IE it makes the background image too dark - I think the transparency is being ignored. DWmx04 doesn't give me any CSS version warnings, but I'm not sure I trust them either...

See attached screen caps for what's happening.
---
Oops, too large. Let me scale them down & reupload.

rmedek
03-03-2005, 10:25 PM
Hmmmm.. I'm a bit confused. Jpgs don't support transparency. Maybe you meant .pngs? Or maybe you saved a png as a jpg and FF is so cool it's rendering it correctly? I dunno.

Either way, if it has alpha transparency, you're stuck with png, and a whole mess of trouble in IE. (try Googling "png IE" and duck for cover... :D)

mushu
03-03-2005, 11:37 PM
Naw, I don't want the _image_ to use it's own transparency. I saved the jpg in Photoshop with 50% opacity and the grid pattern over it. Since it started out as the original existing background image, it just _appears_ transparent. However, I want the CSS color property in "background:" to make the image's background itself transparent. FF does it correctly, IE (of course) doesn't. Here's the code I ended up with (don't freak out about the "display:none" -- I think I'm playing with a browser rendering bug somewhere in there):

<style type="text/css"><!--
body {
font: 14px Verdana, Arial, Helvetica, Sans-serif;
color: #222;
background: #fff url(bg.jpg) repeat-x fixed;
margin: 0;
padding: 0;
position: absolute;
}
ol ul li {
display:none;
color: #111;
}
.grid {
background: transparent url(bg-grid.gif) no-repeat fixed;
}
--></style></head>
<body>
<h4>Current Projects &amp; To-Do's In No Particular Order</h4>
<!--[if gte IE 5]>
<br />
<![endif]-->
<p><ul type="circle" class="grid">
<li>Public Internet privacy notice update</li>

...etc...

rmedek
03-04-2005, 02:41 PM
Okay man, maybe I'm just being obtuse, but I still don't get it. If the image (a jpg, which isn't really transparent) is applied as a background, does it even make a difference what the background color is, transparent or otherwise? The image covers it up.

I see the difference in the screenshots, but I'm not sure how what FF does is correct. Can you post an actual link to the page?

Also, why the conditional comments for a <br>? I'm assuming there's missing code?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum