Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

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

G

Golden Child

macrumors newbie
Original poster
Mar 1, 2011
11
0
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>
 
Last edited by a moderator:
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.
 
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.
Click to expand...

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>
 
Last edited by a moderator:
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 {
 border: none;
}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back