Website working in Safari browser, but not displaying properly in Firefox

Discussion in 'Web Design and Development' started by Golden Child, Mar 1, 2011.

  1. Golden Child, Mar 1, 2011
    Last edited by a moderator: Mar 1, 2011

    Golden Child macrumors newbie

    Joined:
    Mar 1, 2011
    #1
    I am new to web design and programming and I am having some problems making my website display properly universally in all browsers. My website display perfectly correctly in Safari and Opera. However, the slices that make up my site are not displayed and aligned correctly in the popular Firefox browser. The problem is that my site displays exactly the same as what it looks like in the editing mode in Dreamweaver when pulled up in Firefox. The Safari and Opera browsers default css seems completely fix this visual problem. What do I need to do to fix this problem so that my site will display correctly in Firefox as well? Hear is the code for my index page:


    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
    title>Welcome to Designosaur Online!</title>
    <
    script src="../../../Big Designosaur Images/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <style type="text/css"">
    * {margin:0}
    </style>
    </head>

    <body>
    <table width="1282" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="629"><script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','629','height','160','src','../../../Designosaur Flash Docs/Animated Designosaur logo big','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','loop','false','movie','../../../Designosaur Flash Docs/Animated Designosaur logo big' ); //end AC code
    </script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="629" height="160">
    <param name="movie" value="../../../Designosaur Flash Docs/Animated Designosaur logo big.swf" />
    <param name="quality" value="high" /><param name="LOOP" value="false" />
    <embed src="../../../Designosaur Flash Docs/Animated Designosaur logo big.swf" width="629" height="160" loop="false" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
    </object></noscript></td>
    <td width="653"><img src="../../../Big Designosaur Images/Big Index/BigIndex_header.gif" width="652" height="41" /><img src="../../../Big Designosaur Images/Big Index/BigIndex_home.gif" width="100" height="35" /><img src="../../../Big Designosaur Images/Big Index/BigIndex_homeworks.gif" width="61" height="35" /><a href="Designosaur Big Works.html"><img src="../../../Big Designosaur Images/Big Index/BigIndex_works.gif" width="101" height="35" /></a><img src="../../../Big Designosaur Images/Big Index/BigIndex_workcontact.gif" width="58" height="35" /><a href="Contact Big.html"><img src="../../../Big Designosaur Images/Big Index/BigIndex_contact.gif" width="100" height="35" /></a><img src="../../../Big Designosaur Images/Big Index/BigIndex_contactright.gif" width="232" height="35" /><img src="../../../Big Designosaur Images/Big Index/BigIndex_subheader.gif" width="652" height="84" /></td>
    </tr>
    </table>
    <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1280','height','635','src','../../../Designosaur Flash Docs/Dino Big Index','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../../Designosaur Flash Docs/Dino Big Index' ); //end AC code
    </script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1280" height="635">
    <param name="movie" value="../../../Designosaur Flash Docs/Dino Big Index.swf" />
    <param name="quality" value="high" />
    <embed src="../../../Designosaur Flash Docs/Dino Big Index.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1280" height="635"></embed>
    </object>
    </noscript></body>
    </html>
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    I see one typo here:
    PHP:
    <style type="text/css"">
    Notice the extra " at the end. That can definitely cause issues.

    I also recommend running your page through the HTML validator, which can help identify these kinds of problems.
     
  3. Golden Child, Mar 1, 2011
    Last edited by a moderator: Mar 1, 2011

    Golden Child thread starter macrumors newbie

    Joined:
    Mar 1, 2011
    #3
    Thanks. Well noted. I ran my site through the HTML validator and used the HTML-Tidy function to clean up my mark up. It seems the missing "alt" values is what is causing the disjointed presentation of my site on the Firefox browser. It says *PLEASE DESCRIBE THIS IMAGE* under the problematic images that require specific "alt" values. However, I am not sure what values to put under the "alt" sections of each of these images. :confused:

    You can take a look at my site using Firefox to understand exactly what I am talking about. My site is called www.designosauronline.com

    Here is the mark-up after using HTML-Tidy:

    PHP:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Welcome to Designosaur Online!</title>

    <
    script src="../../../Big%20Designosaur%20Images/Scripts/AC_RunActiveContent.js" type="text/javascript">
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    * {margin:0}
    /*]]>*/
    </style>
    </head>
    <body>
    <table width="1282" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="629"><script type="text/javascript">
    //<![CDATA[
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','629','height','160','src','../../../Designosaur Flash Docs/Animated Designosaur logo big','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','loop','false','movie','../../../Designosaur Flash Docs/Animated Designosaur logo big' ); //end AC code
    //]]>
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="629" height="160"><param name="movie" value="../../../Designosaur Flash Docs/Animated Designosaur logo big.swf" />
    <param name="quality" value="high" />
    <param name="LOOP" value="false" />
    <embed src="../../../Designosaur%20Flash%20Docs/Animated%20Designosaur%20logo%20big.swf" width="629" height="160" loop="false" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" /></object></noscript></td>
    <td width="653"><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_header.gif" width="652" height="41" alt="** PLEASE DESCRIBE THIS IMAGE **" /><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_home.gif" width="100" height="35" alt="** PLEASE DESCRIBE THIS IMAGE **" /><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_homeworks.gif" width="61" height="35" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="Designosaur%20Big%20Works.html"><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_works.gif" width="101" height="35" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_workcontact.gif" width="58" height="35" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="Contact%20Big.html"><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_contact.gif" width="100" height="35" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_contactright.gif" width="232" height="35" alt="** PLEASE DESCRIBE THIS IMAGE **" /><img src="../../../Big%20Designosaur%20Images/Big%20Index/BigIndex_subheader.gif" width="652" height="84" alt="** PLEASE DESCRIBE THIS IMAGE **" /></td>
    </tr>
    </table>
    <script type="text/javascript">
    //<![CDATA[
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1280','height','635','src','../../../Designosaur Flash Docs/Dino Big Index','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../../Designosaur Flash Docs/Dino Big Index' ); //end AC code
    //]]>
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1280" height="635"><param name="movie" value="../../../Designosaur Flash Docs/Dino Big Index.swf" />
    <param name="quality" value="high" />
    <embed src="../../../Designosaur%20Flash%20Docs/Dino%20Big%20Index.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1280" height="635" /></object></noscript>
    </body>
    </html>
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    The missing alt attributes on your img tags is not causing the rendering difference, but you do have a number of images that sole purpose is to create empty space, which is bad design. You aren't making use of CSS in your design, which would make certain things simpler.

    As for the issue at present, adding the following to your CSS will fix it.

    PHP:
    a img {
     
    bordernone;
    }
     
  5. Golden Child thread starter macrumors newbie

    Joined:
    Mar 1, 2011

Share This Page