therich Posted December 16, 2005 Share Posted December 16, 2005 Hi there,I've put a webpage together and use background images placed with CSS. The site looks like it should with IE, Safari and Netscape, however the background images do not appear with Fire Fox.Is there a way around this? I am pretty new to CSS.Any help would be greatly appreciated. Thanks alot for reading. Apologies if this has already been covered a thousand times, I never saw anything in a quick search.Best,-Rich Link to comment Share on other sites More sharing options...
Chocolate570 Posted December 16, 2005 Share Posted December 16, 2005 Well, i'm pretty sure there's a way to do this, but I suggest a javascript application checking for the browser and writing the appropriate stylesheet/stylesheet link. For example: <script type="text/javascript">var brow=navigator.appNameswitch(brow){case "Internet Explorer"document.write('<link rel="stylesheet" href="iestyle.css" />')break................}</script> That will check if the browser is internet explorer, if so, it'll put down a link to the IE style. Where the dots are you have to fill in each switch statement. If you don't know javascript, give me a holler. Link to comment Share on other sites More sharing options...
aspnetguy Posted December 16, 2005 Share Posted December 16, 2005 do you have background-attachment: fixed in your code???? if you do this is the problem. remove it and FF will display fine.As you can do brower compatibility without using javascript ans iwthout creating 2 stylesheets.just do this background-image:url(pic.gif); /*FF*/-background-image:url(pic2.gif); /*IE*/ FF will display pic.gif while IE will display pic2.gifReason this owrks is the first line sets the image to pic.gif for both browsers but FF ignores the entire line if it begins with '-' but IE on ignores the '-' and reads the rest of the line setting IE to pic2.gif.That is a way to setup different values for IE and FF. I use this method when deealing with absolute positions in IE and FF since both browsers interpret differently so some differences are needed.Good luck. Link to comment Share on other sites More sharing options...
therich Posted December 16, 2005 Author Share Posted December 16, 2005 Hey guys. First off, thanks alot for taking the time to help me out.This is how my CSS looks, after making the changes you suggested. /* CSS Document */BODY{ font-style: normal; font-family: Arial; text-align: justify; }td.top { background-position: 0px 0px; background-repeat: no-repeat; background-image: url(/buttons/topper.jpg); /*FF*/ -background-image: url(/buttons/topper.jpg); /*IE*/ }td.mainleft { background-position: 0px 0px; background-repeat: no-repeat; background-image: url(/buttons/mainleft.jpg); /*FF*/ -background-image: url(/buttons/mainleft.jpg); /*IE*/ }td.main { background-position: 0px 0px; background-repeat: no-repeat; background-image: url(/buttons/main.jpg); /*FF*/ -background-image: url(/buttons/main.jpg); /*IE*/ }td.footer { background-position: 0px 0px; background-repeat: no-repeat; background-image: url(/buttons/footer.jpg); /*FF*/ -background-image: url(/buttons/footer.jpg); /*IE*/ }</style> If you can suggest ways of improving this please feel free.I need to download FF myself, it was a viewer to the site who tipped me off. I know that the site works in IE, NETSCAPE and SAFARI, so I thought that would do it. But apparently people browse the site with FF too!Will I need to resize the background images for them to appear correctly in FF? Right now I am using the same images for IE and FF, as you can see.Thanks again, it's appreciated.-Rich Link to comment Share on other sites More sharing options...
aspnetguy Posted December 16, 2005 Share Posted December 16, 2005 you dont need to do this background-image: url(/buttons/main.jpg); /*FF*/-background-image: url(/buttons/main.jpg); /*IE*/ My example had 2 different images...it was just an example of how the '-' affects the 2 browsers.Test it in FF and let us know of an incosistencies and we will help you resolve them. Link to comment Share on other sites More sharing options...
therich Posted December 16, 2005 Author Share Posted December 16, 2005 you dont need to do thisbackground-image: url(/buttons/main.jpg); /*FF*/-background-image: url(/buttons/main.jpg); /*IE*/ My example had 2 different images...it was just an example of how the '-' affects the 2 browsers.Test it in FF and let us know of an incosistencies and we will help you resolve them. <{POST_SNAPBACK}> So...background-image: url(/buttons/main.jpg); That should display in FF? You, see that is the way I had it in the first place... I am going to download FF and test it all out later. Link to comment Share on other sites More sharing options...
therich Posted December 16, 2005 Author Share Posted December 16, 2005 I just used FF and none of the background images are showing. Link to comment Share on other sites More sharing options...
aspnetguy Posted December 16, 2005 Share Posted December 16, 2005 try this instead background-image: url(buttons/main.jpg); no / at beginning. Link to comment Share on other sites More sharing options...
therich Posted December 17, 2005 Author Share Posted December 17, 2005 try this insteadbackground-image: url(buttons/main.jpg); no / at beginning. <{POST_SNAPBACK}> I tried that. Still no results. What do you think? Link to comment Share on other sites More sharing options...
therich Posted December 20, 2005 Author Share Posted December 20, 2005 I tried that. Still no results. What do you think?<{POST_SNAPBACK}> Just to let you know that I worked it out. The problem was that I had a "/" in the link to the CSS file from the HTML of the webpage.E.G. <link rel="stylesheet" type="text/css" href="/myfile.css" /> I removed that... <link rel="stylesheet" type="text/css" href="myfile.css" /> ...and now it works. So now it is compatible in all browsers. Thanks for your help, which essentially led me onto solving the problem.Best,-Rich Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now