Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    background image in span, works in IE not Firefox, why not?

    <!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>
    Last edited by mushu; 03-02-2005 at 10:38 PM.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Hi, and welcome to the forums!

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

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    IE is an idiot.

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

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails background image in span, works in IE not Firefox, why not?-samp-ie.jpg  

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    That's crazy talk, man...

    Just apply the background to the list item, that way it only shows up under the list text:
    Code:
    <!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...

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails background image in span, works in IE not Firefox, why not?-ie-capture.jpg   background image in span, works in IE not Firefox, why not?-ff-capture.jpg  
    Last edited by mushu; 03-03-2005 at 06:11 PM.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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... )

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •