CSS background image Firefox problem

cdaeppen
cdaeppen used Ask the Experts™
on
Hi,
I am having an issue getting a background image to appear in Firefox behind a Table. In IE6  8 no problems, just wont appear in Firefox.

I have tried setting #leftSide and #rightSide to background: transparent without success. I have also set <TABLE> to have a background: transparent as well. Can anyone spot my error on this page?

http://www.baumer.com/index.php?id=360
CSS:
 
#product_request, #product_request input, #product_request select, #product_request textarea {
	font-family: verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 11px;
}
 
#product_request table {
	background:transparent;
}
 
#product_request label {
	display:block;
	font-family:verdana, Geneva, Arial, Helvetica, sans-serif;
	color:#666666;
	font-size:11px;
}
 
#product_request .errors {
	color:red;
	font-weight:bold;
	display:inline;
}
 
#product_request #xWrap {
	width: 100%;
	margin: 0 auto;
	background: transparent url(../images/form_bg.gif) repeat-y center top;
}
 
#product_request #xWrap #leftSide {
	float:left;
	width:393px;
	margin:0;
}
 
#product_request #xWrap #rightSide {
	float: right; 
	width:393px;
	margin: 0;
}
 
#product_request #xWrap .highlight {
	background:#e4e4e4;
	padding: 5px;
}
 
#product_request .regular {
	vertical-align: bottom;
	padding: 15px 5px 0 5px;
	font-family:verdana, Geneva, Arial, Helvetica, sans-serif;
	color:#666666;
	font-size:11px;
}
 
#product_request .regularField {
	width: 155px;
}
 
#product_request .smallField {
	width: 75px;
}
 
#product_request .mediumField {
	width: 100px;
}
 
#product_request .largeField {
	width: 300px;
}

Open in new window

baumer-contact.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Update your #product_request table to be like this
#product_request table {
  background-color: #efefef;
}

Open in new window

Commented:
If it's just a gray image, why not add a background color to your table. That'll fix all your issues.

#leftSide {
   background-color:gray;
}

Commented:
too late :)
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
#product_request table {
background : transparent;
}
#product_request label {
display : block;
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
font-size : 11px;
}
#product_request .errors {
color : red;
font-weight : bold;
display : inline;
}
#product_request #xWrap {
width : 100%;
margin : 0 auto;
background : transparent url(../images/form_bg.gif) repeat-y center top;
}
#product_request #xWrap #leftSide {
float : left;
width : 393px;
margin : 0;
}
#product_request #xWrap #rightSide {
float : right;
width : 393px;
margin : 0;
}
#product_request #xWrap .highlight {
background : #e4e4e4;
padding : 5px;
}
#product_request .regular {
vertical-align : bottom;
padding : 15px 5px 0 5px;
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
font-size : 11px;
}
#product_request .regularField {
width : 155px;
}
#product_request .smallField {
width : 75px;
}
#product_request .mediumField {
width : 100px;
}
#product_request .largeField {
width : 300px;
}  
 background-image : url(../images/form_bg.gif);background-attachment:fixed;background-repeat:norepeat;
 

Try this 
 background-image : url(../images/form_bg.gif);background-attachment:fixed;background-repeat:norepeat;
 
 
OR this
 
 
 
#product_request table { 
background : transparent; 
} 
#product_request label { 
display : block; 
font-family : verdana, Geneva, Arial, Helvetica, sans-serif; 
color : #666666; 
font-size : 11px; 
} 
#product_request .errors { 
color : red; 
font-weight : bold; 
display : inline; 
} 
#product_request #xWrap { 
width : 100%; 
margin : 0 auto; 
background : transparent url(../images/form_bg.gif) repeat-y center top; 
} 
#product_request #xWrap #leftSide { 
float : left; 
width : 393px; 
margin : 0; 
} 
#product_request #xWrap #rightSide { 
float : right; 
width : 393px; 
margin : 0; 
} 
#product_request #xWrap .highlight { 
background : #e4e4e4; 
padding : 5px; 
} 
#product_request .regular { 
vertical-align : bottom; 
padding : 15px 5px 0 5px; 
font-family : verdana, Geneva, Arial, Helvetica, sans-serif; 
color : #666666; 
font-size : 11px; 
} 
#product_request .regularField { 
width : 155px; 
} 
#product_request .smallField { 
width : 75px; 
} 
#product_request .mediumField { 
width : 100px; 
} 
#product_request .largeField { 
width : 300px; 
}  

Open in new window

Consultant & Challenge Subduer
Top Expert 2009
Commented:
It wouldn't work in IE8 either if IE8 wasn't in quirks mode.  Use a doctype that triggers standards mode: http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/

Floated elements don't make their parent elements expand in height by default. In this case you can fix it simply by giving "#product_request #xWrap" float:left

More information: http://www.dynamicsitesolutions.com/css/layout-techniques/#clearing_floats
#product_request #xWrap {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: transparent url(../images/form_bg.gif) repeat-y center top;
}

Also main class should be given 100% height.

Author

Commented:
Well that was fast!

To coolersport and Onthrax: that solution will work but then the backgrounds wont be the same height unless I define a height for the two tables. Thats why I have these two tables wrapped in a DIV so that the background stretches as far as it needs to go (dynamic).

Author

Commented:
Wow that was it. All I was missing was a "float:left;" in #xWrap. Many Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial