Jump to content

CSS backgroud images with different browsers


therich

Recommended Posts

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

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

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

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

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

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.

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

I tried that. Still no results. What do you think?

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...