~~~~~~Firefox displays my design wrong

For some reason, Firefox adds a line break (or something) in my design, and IE does not. How can I fix this in firefox?



Here is the html:

<TABLE WIDTH=1044 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
	<TR>
		<TD ROWSPAN=7>
			<IMG SRC="images/backtohealth_01.jpg" WIDTH=51 HEIGHT=916 ALT=""></TD>
		<TD ROWSPAN=5 background="images/backtohealth_02.jpg">
			<IMG SRC="images/backtohealth_02.jpg" WIDTH=33 HEIGHT=833 ALT=""></TD>
		<TD COLSPAN=3><div align="right"></div></TD>
		<TD ROWSPAN=5 background="images/backtohealth_04.jpg">
			<IMG SRC="images/backtohealth_04.jpg" WIDTH=31 HEIGHT=833 ALT=""></TD>
		<TD ROWSPAN=7>
			<IMG SRC="images/backtohealth_05.jpg" WIDTH=50 HEIGHT=916 ALT=""></TD>
	</TR>
	<TR>
		<TD background="images/bluebox.jpg"><?php include("top_details.html") ?></TD>
		<TD ROWSPAN=2>
			<IMG SRC="images/backtohealth_07.jpg" WIDTH=5 HEIGHT=184 ALT=""></TD>
		<TD background="images/nutrition.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>                <div align="right">
              <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
  ID=nutrition WIDTH=370 HEIGHT=181>
                <PARAM NAME=movie VALUE="swf/nutrition.swf">
                <PARAM NAME=quality VALUE=high>
                <PARAM NAME=loop VALUE=false>
                <EMBED src="swf/nutrition.swf" loop=false quality=high
  WIDTH=370 HEIGHT=181 TYPE="application/x-shockwave-flash"
  PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
                </EMBED>
              </OBJECT>
            </div></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
          </tr>
        </table></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/backtohealth_09.jpg" WIDTH=242 HEIGHT=3 ALT=""></TD>
		<TD>
			<IMG SRC="images/backtohealth_10.jpg" WIDTH=632 HEIGHT=3 ALT=""></TD>
	</TR>
	<TR>
		<td colspan="3"><img src="images/greenmenu.jpg" width="879" height="58" border="0" usemap="#Map1"/>
		 </td>
	</TR>
	<TR>
		<TD COLSPAN=3 valign="top"><table width="100%" border="0" cellspacing="3" cellpadding="3">
          <tr>
            <td width="29%" rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><?php include("news.html") ?></td>
              </tr>
              <tr>

Code (markup):

Thanks in advance!

 

I suggest you download the firefox "web design developer" plug-in. This is a very useful tool for web developers who would like to see their work appearance in firefox.

There are some attributes that firefox does not recognize / like but OK with Internet explorer.

If you download this plug-in, it will tell your all the errors that you need to correct and warnings as well.

 

I second that. The Chris Pederick's Web Developer Extension is an outstanding tool for Web authors in general. The download is very easily installed and only a quick re-start of Firefox is needed to activate it.

 

Try using

CELLPADDING="0" CELLSPACING="0"

instead of

CELLPADDING=0 CELLSPACING=0

"""s are the new xhtml standard anyways

 

Can you please post the entire code, or at least give us a link to visit? I noticed your table abruptly ends, and that you're also including some other file.

First, use style="background-image: url('./images/bluebox.jpg'); background-repeat: no-repeat;" instead of background="images/bluebox.jpg"

That will fix your repeating background. It's hard to tell where the line break comes in because we can't see what's in the include file: <?php include("top_details.html") ?>

Also, I noticed usemap="#Map1" ... please don't ...

 

Don't use tables.

 

What I do is push the lower elements up by like a pixel or two. That usually looks good enough in both browsers.

This may be a pixel-rounding error. Google it and you'll see plenty of pictures showing it. The browsers sometimes have to guess how many pixels long or wide an image is.

To make my borders touch each other on stommepoes.jobva.nl/Pizzaatje/pizzaatje.html, I gave the boxes underneath
margin-top: -2px;
and usually that's enough. (Borders in question are the yellow side-borders-- the tops and bottoms are part of images, while in the middle it's a CSS border)

Try not to design a site or images that must be perfect to the pixel-- there will always be some browser which can't render it properly : )

 

No, use tables correctly or not at all.