CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: cant get simple css image displayed in firefox

  1. 11-18-2005, 02:51 PM #1
    oohmygod831
    oohmygod831 is offline New Comer (less than 5 posts)
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default cant get simple css image displayed in firefox

    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
    Reply With Quote Reply With Quote
  2. 11-19-2005, 04:05 PM #2
    Wedgy
    Wedgy is offline Junior Coders
    Join Date
    Nov 2005
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can you post the CSS file? this part isn't helping me understand your problem.
    Reply With Quote Reply With Quote
  3. 11-19-2005, 08:00 PM #3
    oohmygod831
    oohmygod831 is offline New Comer (less than 5 posts)
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css file

    this is the css file

    .Background {
    background-image: url(../Vidicom/images/Background1.png);
    background-repeat: repeat-x;
    }
    Reply With Quote Reply With Quote
  4. 11-24-2005, 07:42 AM #4
    Wedgy
    Wedgy is offline Junior Coders
    Join Date
    Nov 2005
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Reply With Quote Reply With Quote
  5. 11-24-2005, 08:40 AM #5
    gk-interactive
    gk-interactive is offline New Comer (less than 5 posts)
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    try placing the style to a table containing the backround image
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules