...

View Full Version : 2 backgrounds on Internet explorer



L27
01-12-2012, 06:14 PM
I'm looking for help getting multiple backgrounds to work in older browsers like IE. Any help would be amazing thanks. :thumbsup:

teedoff
01-12-2012, 06:25 PM
Can you link your site? or at least provide the code you have?

Multiple backgrounds in what way? a background that changes after a given time? event? or several backgrounds on a single page at once.

L27
01-12-2012, 07:01 PM
Can you link your site? or at least provide the code you have?

Multiple backgrounds in what way? a background that changes after a given time? event? or several backgrounds on a single page at once.

Here http://deathcraft.l27nexus.com/index.html the grey stone is one background the grey content area is the second. The CSS code works in firefox because it's CSS3 but of course IE isn't supported. I want 2 backgrounds to be working in IE.

thanks.

teedoff
01-12-2012, 07:09 PM
You dont declare a doctype, and have several other code errors you should fix. You can view them here (http://validator.w3.org/check?uri=http%3A%2F%2Fdeathcraft.l27nexus.com%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0).

You should always have a valid doctype to ensure cross browser compliance. Fixing these errors might not resolve your issue, but its a start.

Also you should know why tables for layouts are bad (http://www.hotdesign.com/seybold/), and I see no reason why a table was needed here at all.

Post back if you have trouble fixing those errors.

Excavator
01-12-2012, 07:30 PM
Hello L27,
You would be better off presenting that second background image as a background of another div element.

Start with something like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: url(http://deathcraft.l27nexus.com/images/background.jpg);
}
#container {
height: 600px; /*demo only*/
width: 1000px;
margin: 30px auto;
background: url(http://deathcraft.l27nexus.com/images/main.gif);
}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
</body>
</html>

Teed is right, you should not be using tables for this.

L27
01-12-2012, 07:38 PM
Alright I've gone through and fixed a few of these errors. The ones I didn't fix are for example (there is no attribute "ALIGN"). I left these in because dreamweaver seems to think this is a valid attribute, the whole attribute is (<table align>) do you have any advice on why I should correct/remove these.

Also yes IE 9 is showing both backgrounds now which I'm happy about. Although if you look at the site yourself in IE the side bars have gone funny any idea why that is?

Last question while correcting these errors my buttons have all moved down leaving a grey area do you have any idea why this has happened and how i go about fixing it.

Thanks for all your help.

L27
01-12-2012, 07:57 PM
Hello L27,
You would be better off presenting that second background image as a background of another div element.

Start with something like this -

Teed is right, you should not be using tables for this.

This is what I get using your code. http://deathcraft.l27nexus.com/testcode.html

Excavator
01-12-2012, 08:06 PM
This is what I get using your code. http://deathcraft.l27nexus.com/testcode.html

Like I said, it's a place to start. When you add things that break it, you will be learning as you go by fixing them.

Read the link about tables in my signature line.

felgall
01-12-2012, 08:16 PM
Alright I've gone through and fixed a few of these errors. The ones I didn't fix are for example (there is no attribute "ALIGN"). I left these in because dreamweaver seems to think this is a valid attribute, the whole attribute is (<table align>) do you have any advice on why I should correct/remove these.

That attribute was replaced by CSS commands in CSS 1, it is still supported for backwards compatibility only. You should use float to replace it for aligning left or right and use margin:0 auto for centre alignment.

L27
01-12-2012, 08:26 PM
Like I said, it's a place to start. When you add things that break it, you will be learning as you go by fixing them.

Read the link about tables in my signature line.


That attribute was replaced by CSS commands in CSS 1, it is still supported for backwards compatibility only. You should use float to replace it for aligning left or right and use margin:0 auto for centre alignment.

Literally all I want sorting out now is my buttons to be touching the image as it used to be instead of that grey area any ideas?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum