PDA

View Full Version : cant get simple css image displayed in firefox



oohmygod831
11-18-2005, 02:51 PM
im creating a site with dreamweaver studio mx 2004. i want to have a gradient added to the body of the page so i tried in css. i tried it in IE and it worked fine but all other browsers didnt show it. i created the gradient firstly in fireworks and then tried another using photoshop (to try and save it in different formats to see if that worked) the gradient is on a transparent background. here is the code for the css

.Background {
background-image: url(../Vidicom/images/Background1.png);
background-repeat: repeat-x;
}

and here is the code for the whole page ( so far it is a table with a header image and nav buttons in it)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>vidicom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../Vidicom%20Website/vidiStyle.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function mmLoadMenus() {
if (window.mm_menu_1117164545_0) return;
window.mm_menu_1117164545_0 = new Menu("root",127,20,"Arial, Helvetica, sans-serif",14,"#000000","#FFFFFF","#CAD7E2","#7EA9CB", "center","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1117164545_0.addMenuItem("company&nbsp;his tory");
mm_menu_1117164545_0.addMenuItem("people");
mm_menu_1117164545_0.addMenuItem("technology");
mm_menu_1117164545_0.addMenuItem("news");
mm_menu_1117164545_0.hideOnMouseOut=true;
mm_menu_1117164545_0.bgColor='#000000';
mm_menu_1117164545_0.menuBorder=1;
mm_menu_1117164545_0.menuLiteBgColor='#FFFFFF';
mm_menu_1117164545_0.menuBorderBgColor='#999999';

window.mm_menu_1117181518_0_1 = new Menu("text&nbsp;2&nbsp;screen",141,20,"Arial, Helvetica, sans-serif",14,"#000000","#FFFFFF","#CAD7E2","#7EA9CB", "center","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1117181518_0_1.addMenuItem("photo's");
mm_menu_1117181518_0_1.addMenuItem("7&nbsp;day&nbs p;trial&nbsp;");
mm_menu_1117181518_0_1.addMenuItem("packages&nbsp; &&nbsp;prices");
mm_menu_1117181518_0_1.hideOnMouseOut=true;
mm_menu_1117181518_0_1.bgColor='#000000';
mm_menu_1117181518_0_1.menuBorder=1;
mm_menu_1117181518_0_1.menuLiteBgColor='#FFFFFF';
mm_menu_1117181518_0_1.menuBorderBgColor='#999999' ;
window.mm_menu_1117181518_0_2 = new Menu("sms&nbsp;marketing",85,20,"Arial, Helvetica, sans-serif",14,"#000000","#FFFFFF","#CAD7E2","#7EA9CB", "center","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1117181518_0_2.addMenuItem("fact&nbsp;shee t");
mm_menu_1117181518_0_2.addMenuItem("reporting");
mm_menu_1117181518_0_2.addMenuItem("costs");
mm_menu_1117181518_0_2.hideOnMouseOut=true;
mm_menu_1117181518_0_2.bgColor='#000000';
mm_menu_1117181518_0_2.menuBorder=1;
mm_menu_1117181518_0_2.menuLiteBgColor='#FFFFFF';
mm_menu_1117181518_0_2.menuBorderBgColor='#999999' ;
window.mm_menu_1117181518_0_3 = new Menu("radio&nbsp;sms",85,20,"Arial, Helvetica, sans-serif",14,"#000000","#FFFFFF","#CAD7E2","#7EA9CB", "center","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1117181518_0_3.addMenuItem("fact&nbsp;shee t");
mm_menu_1117181518_0_3.addMenuItem("features");
mm_menu_1117181518_0_3.addMenuItem("costs");
mm_menu_1117181518_0_3.hideOnMouseOut=true;
mm_menu_1117181518_0_3.bgColor='#000000';
mm_menu_1117181518_0_3.menuBorder=1;
mm_menu_1117181518_0_3.menuLiteBgColor='#FFFFFF';
mm_menu_1117181518_0_3.menuBorderBgColor='#999999' ;
window.mm_menu_1117181518_0_4 = new Menu("bespoke&nbsp;services",84,20,"Arial, Helvetica, sans-serif",14,"#000000","#FFFFFF","#CAD7E2","#7EA9CB", "center","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1117181518_0_4.addMenuItem("industries");
mm_menu_1117181518_0_4.hideOnMouseOut=true;
mm_menu_1117181518_0_4.bgColor='#000000';
mm_menu_1117181518_0_4.menuBorder=1;
mm_menu_1117181518_0_4.menuLiteBgColor='#FFFFFF';
mm_menu_1117181518_0_4.menuBorderBgColor='#999999' ;
window.mm_menu_1117181518_0 = new Menu("root",177,20,"Arial, Helvetica, sans-serif",14,"#000000","#FFFFFF","#CAD7E2","#7EA9CB", "center","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1117181518_0.addMenuItem(mm_menu_111718151 8_0_1);
mm_menu_1117181518_0.addMenuItem("text&nbsp;2&nbsp ;tv");
mm_menu_1117181518_0.addMenuItem(mm_menu_111718151 8_0_2);
mm_menu_1117181518_0.addMenuItem(mm_menu_111718151 8_0_3);
mm_menu_1117181518_0.addMenuItem(mm_menu_111718151 8_0_4);
mm_menu_1117181518_0.addMenuItem("content&nbsp;del ivery&nbsp;&&nbsp;billing");
mm_menu_1117181518_0.addMenuItem("gateway&nbsp;ser vices");
mm_menu_1117181518_0.hideOnMouseOut=true;
mm_menu_1117181518_0.childMenuIcon="arrows.gif";
mm_menu_1117181518_0.bgColor='#000000';
mm_menu_1117181518_0.menuBorder=1;
mm_menu_1117181518_0.menuLiteBgColor='#FFFFFF';
mm_menu_1117181518_0.menuBorderBgColor='#999999';

mm_menu_1117181518_0.writeMenus();
} // mmLoadMenus()

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" src="mm_menu.js"></script>
</head>

<body class="Background" onLoad="MM_preloadImages('images/Button-home-down.png','images/Button-aboutus-down.png','images/Button-products-down.png','images/Button-resellers-down.png','images/Button-faqs-down.png','images/Button-stats-down.png','images/Button-contactus-down.png')">
<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/Header2.png" width="700" height="195"></td>
</tr>
<tr>
<td colspan="3"><a href="javascript:;" onMouseOver="MM_swapImage('Image1','','images/Button-home-down.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Button-home-up.png" name="Image1" width="100" height="30" border="0" id="Image1"></a><a href="javascript:;" onMouseOver="MM_swapImage('Image2','','images/Button-aboutus-down.png',1);MM_showMenu(window.mm_menu_1117164545 _0,0,30,null,'Image2')" onMouseOut="MM_swapImgRestore();MM_startTimeout(); "><img src="images/Button-aboutus-up.png" name="Image2" width="100" height="30" border="0" id="Image2"></a><a href="javascript:;" onMouseOver="MM_swapImage('Image3','','images/Button-products-down.png',1);MM_showMenu(window.mm_menu_1117181518 _0,0,30,null,'Image3')" onMouseOut="MM_swapImgRestore();MM_startTimeout(); "><img src="images/Button-products-up.png" name="Image3" width="100" height="30" border="0" id="Image3"></a><a href="javascript:;" onMouseOver="MM_swapImage('Image4','','images/Button-resellers-down.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Button-resellers-up.png" name="Image4" width="100" height="30" border="0" id="Image4"></a><a href="javascript:;" onMouseOver="MM_swapImage('Image5','','images/Button-faqs-down.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Button-faqs-up.png" name="Image5" width="100" height="30" border="0" id="Image5"></a><a href="javascript:;" onMouseOver="MM_swapImage('Image6','','images/Button-stats-down.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Button-stats-up.png" name="Image6" width="100" height="30" border="0" id="Image6"></a><a href="javascript:;" onMouseOver="MM_swapImage('Image7','','images/Button-contactus-down.png',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Button-contactus-up.png" name="Image7" width="100" height="30" border="0" id="Image7"></a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

i am truly stuck and any help would be great, thanks

Wedgy
11-19-2005, 04:05 PM
Can you post the CSS file? this part isn't helping me understand your problem.

oohmygod831
11-19-2005, 08:00 PM
this is the css file

.Background {
background-image: url(../Vidicom/images/Background1.png);
background-repeat: repeat-x;
}

Wedgy
11-24-2005, 07:42 AM
I think to use transparency (and hence gradients in this way) you must save the image in a GIF file, with transparency turned on. You should be able to do this in photoshop, but I have had better luck with GIFs in Animation Shop (comes with Paint Shop Pro 7).

The GIMP also seems to offer better Web image file support.

Second, I think cross-browser transparency is tricky, and involves a few Kludges.

I will try to find the link I was reading recently on this.

gk-interactive
11-24-2005, 08:40 AM
try placing the style to a table containing the backround image