Forum Moderators: not2easy
I'm having some trouble with getting a background image to display in firefox even though it shows correctly in IE.
Here is my doctype:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Here is the html code:
<div class="showhidelistings">
<a href="javascript:fcnShowHideListings();">
<span class="listingimage">
<img src="spacer.gif" style="height:93px; width:10px; border:0px;" id="showhidelistings" alt="Listings" />
</span>
</a>
</div>
Here is the css:
.listingimage {background-image:url('/Includes/ASPX/ImageGen.aspx?ImgType=Directory&DirectoryType=HideListing&width=10&height=93&HexFront=fc7301&HexBack=ffffff&Trans=true'); background-repeat:no-repeat; background-position:center center;}
I've made sure that the spacer image that fills the space to allow the javascript function link work and set height and width properties on both the spacer image in the page and the background-image in css.
Can anyone please have a look and tell me if i'm doing something wrong?
thanks in advance
Are you setting the correct MIME type in the .aspx page?
* EDIT - By the way, Welcome to Webmasterworld! [webmasterworld.com]
[edited by: swa66 at 11:35 pm (utc) on June 24, 2009]
[edit reason] example.com please, can;t be owned [/edit]
I've tried to access the image directly and it does work.
I checked the mime type in the aspx page and it was correct but then I made some changes to the vb code that generates the image and it now shows correctly.
thank you for help anyway though and i'm sure i'll be back soon :D
I got confused with another image i had problems with that is generated in the same page.
All the other images generated for this page work correctly and display full height and width. It looks like the spacer with the link around is in the correct place but that the background image is being pushed down so that only 5 pixels of the center of the image shows on the page at the bottom of the spacer area but the clickable area is correct. one of the other images on the page is generated and added to the page in exactly the same way and that one displays correctly.
You have: <span class="listingimage"> and as far as I know, you cannot set the height on an inline element (unless you have already styled it with display: block; or display: inline-block; ).
Could you post all of the styling rules for listingimage?
There is no styling on the page only the class for the span in the external stylesheet:
.listingimage {background-image:url('/Includes/ASPX/ImageGen.aspx?ImgType=Directory&DirectoryType=HideListing&width=10&height=93&HexFront=fc7301&HexBack=ffffff&Trans=true'); background-repeat:no-repeat; background-position:center center; width:10px; height:93px;}
In the first post I made I added all the code that refers to the .listingimage class including the html that calls it and adds the spacer to the page if you need to see that too.
This is exactly the same styling, other than a slightly different URL, as another span class background image on the same page and that one renders correctly. I don't have any display styling on either image. How would use the display property to make it show the image correctly?
thanks in advance
this might break other sections of the page, but it will let you know if this is the culprit.
In your example, you are using an XML prolog; an XHTML Doctype Declaration (DTD) and XML declaration. You can safely remove the latter,
<?xml version="1.0" encoding="UTF-8"?> ,since you are presumably serving your document as 'text/html'. By including this XML declaration in this manner, you are forcing IE6 into Quirks Mode.
thanks
Slightly aside:-
In your example, you are using an XML prolog; an XHTML Doctype Declaration (DTD) and XML declaration. You can safely remove the latter,<?xml version="1.0" encoding="UTF-8"?>
,since you are presumably serving your document as 'text/html'. By including this XML declaration in this manner, you are forcing IE6 into Quirks Mode.
thanks for your help
I've copied the doctype declaration from w3.org so that the page will validate as xhtml 1.1. if i remove the xml declaration will it still validate?
The document is actually saved as a .aspx page. Does this make a difference to what doctype i can use for validating?
Does quirks mode only allow browsers to use older tags etc.. does it change anything regarding layout and built-in browser settings like padding or anything? I'm just curious.
The document is actually saved as a .aspx page. Does this make a difference to what doctype i can use for validating?
Not at all- they are two completely different things :)
Does quirks mode only allow browsers to use older tags etc.. does it change anything regarding layout and built-in browser settings like padding or anything? I'm just curious.
Yes. It is something to avoid at all costs - there is no reason for force browsers in to Quirks Mode. The only reason the feature exists is to retain some level of backwards compatibility of sites/pages that were coded based on these quirks.
There are other bugs in IE relating to inadvertant doctype switching. For example, placing an HTML comment after the XML declaration but before the Doctype, will trigger Quirks Mode in IE7 & IE8.
Thats so weird for a comment to push quirks mode but thanks for the tip, i'll remember this in future and try to avoid it as best i can.
Thats so weird for a comment to push quirks mode but thanks for the tip, i'll remember this in future and try to avoid it as best i can.
FYI, it's completely pointless to have the XML declaration there in the first place, since 99.9% of the time you have to serve the document up as 'text/html' since IE still doesn't support true XHTML (based on the application/xhtml+xml mime type).
i'm learning new things everyday atm and it's all for the better so thank you for helping! lol
Are they are any times that you know of that i need it?
You should only use it if you are serving a page up as true XHTML (using the application/xhtml+xml mime type). Broadly speaking this utilises the XML parser (the feature in browsers which allows them to render, and make sense of, XML), which allows quicker page loading, as the XML parser doesn't include any error handling code, amongst other things.
or do i still need it for other browsers?
No they don't, as you'll want to retain document interoperability. Having that said, there are some content negotiation techniques which allow a particular document to be served as 'application/xhtml+xml' (XHTML) when requested by a browser which supports it, and 'text/html' (HTML) when requested by IE or a legacy browser that doesn't support true XHTML.
Sorry it's been so long, we have now published live and I just wanted to let you know that adding the display:block property has fixed this problem with the background images in ff.
thanks to you both for all your help.
