2 replies [Last post]
douglas1438
Offline
newbie
UK
Last seen: 6 years 24 weeks ago
UK
Joined: 2008-04-01
Posts: 2
Points: 0

I'm unable to find a definitive answer to my problem and am hoping I might find a solution here.

Basically I have several div's with background images but these do not appear in IE7, Firefox, etc. although the background image defined in the body tag does.

The full code is displyed below and the page can be seen at the following address:

http://www.v102.co.uk/test/index.htm

Any help would be very much appreciated.

Thanks in advance,

Chris

Best•Mate Personal Reward Programme '08/'09

/* CSS Document */
/* Layout items */
body {
text-align:center;
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-color: #000000;
background-image: url(images/common/pageBG.gif);
background-repeat: repeat;
background-position: 0px 0px;
}
#frame {
width:810px;
margin-right:auto;
margin-left:auto;
margin-top:30px;
padding:0px;
text-align:left;
background-color: #000000;
}
#header {
color: #FFFFFF;
height: 45px;
width: 795px;
padding-top: 10px;
padding-left: 15px;
}
#mainMenu {
font-family:Myriad, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
height: 20px;
text-align: right;
width: 810px;
margin-bottom: 10px;
background-attachment: fixed;
background-color: #ff6600;
background-image: url(images/common/menuBG.gif);
background-repeat: no-repeat;
background-position: 474px 0px;
overflow: visible;
}
#leftCol {
float: left;
width:124px;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
border: 2px solid #ff6600;
padding: 10px;
layer-background: #000000 url(images/common/panelGrad.jpg) repeat-x fixed 0px 0px;
/*
background-attachment: fixed;
background-image: url(../images/common/panelGrad.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
*/
height: 325px;
margin-bottom: 10px;
margin-top: 0px;
margin-right: 0px;
margin-left: 15px;
background-attachment: fixed;
background-image: url(images/common/panelGrad.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
}
/* box hack for ie */
* html div#leftCol
{
width: 148px; /* for IE5.x/win */
w\idth: 148px; /* for other IE versions */
}
#mainCol {
width:440px;
float: left;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border: 2px solid #ff6600;
padding: 10px;
height: 325px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
background-color: #FFFFFF;
}
/* box hack for ie */
* html div#mainCol
{
width: 464px; /* for IE5.x/win */
w\idth: 464px; /* for other IE versions */
height: 325px; /* for IE5.x/win */
h\eight: 325px; /* for other IE versions */
}
#rightCol {
width:124px;
float: left;
border: 2px solid #ff6600;
background-color: #000000;
padding: 10px;
color: #FFFFFF;
background-attachment: fixed;
background-image: url(images/common/panelGrad.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
height: 325px;
margin-top: 0px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* box hack for ie */
* html div#rightCol
{
width: 148px; /* for IE5.x/win */
w\idth: 148px; /* for other IE versions */
}
a:link{
color: #000066;
text-decoration: none;
font-weight: bold;
}
a:visited{
color: #000066;
text-decoration: none;
}
a:hover{
color: #edd000;
text-decoration: underline;
}
a:active{
color: #000066;
text-decoration: none;
}
#menuItem1 {
width:65px;
text-align: center;
margin-left:481px;
float: left;
height: 15px;
padding-top: 2px;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#menuItem2 {
width:65px;
text-align: center;
float: left;
height: 15px;
padding-top: 2px;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#menuItem3 {
width:65px;
text-align: center;
float: left;
height: 15px;
padding-top: 2px;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#menuItem4 {
width:65px;
text-align: center;
float: left;
height: 15px;
padding-top: 2px;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#menuItem5 {
width:65px;
text-align: center;
float: left;
height: 15px;
padding-top: 2px;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#myAccount {
width:124px;
float: left;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
border: 2px solid #FFFFFF;
padding: 10px;
height: 115px;
margin-top: 0px;
margin-bottom: 15px;
margin-right: 0px;
margin-left: 15px;
vertical-align: top;
}
* html div#myAccount
{
width:148px; /* for IE5.x/win */
w\idth:148px; /* for other IE versions */
height:139px; /* for IE5.x/win */
h\eight:139px; /* for other IE versions */
}
#mechanics {
width:124px;
float: left;

font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
border: 2px solid #FFFFFF;
padding: 10px;
height: 115px;
margin-top: 0px;
margin-bottom: 15px;
margin-right: 0px;
margin-left: 10px;
}
* html div#mechanics
{
width:148px; /* for IE5.x/win */
w\idth:148px; /* for other IE versions */
height:139px; /* for IE5.x/win */
h\eight:139px; /* for other IE versions */
}
#faqs {
width:124px;
float: left;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
border: 2px solid #FFFFFF;
padding: 10px;
height: 115px;
margin-top: 0px;
margin-bottom: 15px;
margin-right: 0px;
margin-left: 10px;
}
* html div#faqs
{
width:148px; /* for IE5.x/win */
w\idth:148px; /* for other IE versions */
height:139px; /* for IE5.x/win */
h\eight:139px; /* for other IE versions */
}
#downloads {
width:124px;
float: left;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
border: 2px solid #FFFFFF;
padding: 10px;
height: 115px;
margin-top: 0px;
margin-bottom: 15px;
margin-right: 0px;
margin-left: 10px;
}
* html div#downloads
{
width:148px; /* for IE5.x/win */
w\idth:148px; /* for other IE versions */
height:139px; /* for IE5.x/win */
h\eight:139px; /* for other IE versions */
}
#training {
width:124px;
float: left;
font-family: Myriad, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
border: 2px solid #FFFFFF;
padding: 10px;
height: 115px;
margin-top: 0px;
margin-bottom: 15px;
margin-right: 0px;
margin-left: 10px;
}
* html div#training
{
width:148px; /* for IE5.x/win */
w\idth:148px; /* for other IE versions */
height:139px; /* for IE5.x/win */
h\eight:139px; /* for other IE versions */
}

Rewards

Choose and claim from a fantastic selection of unique rewards.

Welcome

to the Best•Mate Website

News

Click on 'Rewards' section for this months very special reward. An all expenses paid extravaganza to see the Bolshoi ballet in Moscow.

My Account

Click here to visit your personal account and statement details

Mechanics

Click here for full details of the Best•Mate Personal Reward Programme.

FAQs

Click here to download Podcasts for your mobile phone, iPod or MP3 Player.

Downloads

Click here for downloadsm support items and Terms and Conditions.

Online Training

Coming soon! An opportunity to keep up with the latest in product information.


secretsather
secretsather's picture
Offline
Regular
Last seen: 5 years 16 weeks ago
Joined: 2007-04-28
Posts: 20
Points: 0

Take out the

Take out the 'background-attachment: fixed;'

Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.

douglas1438
Offline
newbie
UK
Last seen: 6 years 24 weeks ago
UK
Joined: 2008-04-01
Posts: 2
Points: 0

Re. Take out the

That's fantastic, thanks secretsather.

You've saved me an awful lot of heartache.