[SOLVED]IE is breaking the main area format - Suggestions?

mstroz · Post by **mstroz** » Thu 12. Jan 2006, 17:10

Hi,

I posted this topic,
Main area wonking out in IE... Ideas on how to fix? about a month ago and got a helpful response.

The problem is, it's still problem.
The rounded corners of the main area looks fine in Firefox, but it looks like crap in IE. Unfortunately, my client uses IE exclusively.

I've added a spacer graphic like kobos suggested in the previous forum post, and IE still doesn't display the area properly.

This image may give you a better idea of the problem.

Also, here is the main area code if that will help:

Code: Select all

<table width="950" height="185"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="1" colspan="9" bgcolor="#94927B"></td>
  </tr>
  <tr>
    <td width="10" height="180" bgcolor="#94927B">&nbsp;</td>
    <td width="225" bgcolor="#94927B"><img src="http://ohtmacon.com/graphics/watersports.jpg" width="225" height="180"></td>
    <td width="10" bgcolor="#94927B">&nbsp;</td>
    <td width="225" bgcolor="#94927b"><img src="http://ohtmacon.com/graphics/exercise.jpg" width="225" height="180"></td>
    <td width="10" bgcolor="#94927B">&nbsp;</td>
    <td width="225" bgcolor="#94927B"><img src="http://ohtmacon.com/graphics/parks.jpg" width="225" height="180"></td>
    <td width="10" bgcolor="#94927B">&nbsp;</td>
    <td width="225" bgcolor="#94927B"><img src="http://ohtmacon.com/graphics/events.jpg" width="225" height="180"></td>
    <td width="10" bgcolor="#94927B">&nbsp;</td>
  </tr>
  <tr>
    <td height="5" colspan="9" bgcolor="#94927B"></td>
  </tr>
</table>
<table width="950"  border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#94927B"><table width="930"  border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#94927B">
          <tr>
            <td width="15" height="15" align="left" valign="top" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/U-left.jpg"></td>
            <td width="910" align="left" valign="top" bgcolor="#FFFFFF"><img src="http://www.ohtmacon.com/graphics/igs.gif" width="780" height="1"></td>
            <td width="15" height="15" valign="top" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/U-right.jpg" align="right"></td>
          </tr>
          <tr>
            <td colspan="3" align="left" valign="top" bgcolor="#FFFFFF"><table width="90%"  border="0" align="center" cellpadding="12" cellspacing="0">
              <tr>
                <td>{CONTENT}</td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td width="15" height="15" align="left" valign="bottom" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/l-left.jpg"></td>
            <td height="10" align="left" valign="top" bgcolor="#FFFFFF"></td>
            <td width="15" height="15" valign="bottom" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/l-right.jpg" align="right"></td>
          </tr>
    </table>
    <br></td>
  </tr>
</table>

Also here is what the page layout looks like:

Any help or suggestions would be greatly appreciated.
Regards,
Mark

DeXXus · Post by **DeXXus** » Thu 12. Jan 2006, 19:16

This part doesn't look right (corner graphics are not on the same level):

Code: Select all

          <tr> 
            <td width="15" height="15" align="left" valign="top" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/U-left.jpg"></td> 
            <td width="910" align="left" valign="top" bgcolor="#FFFFFF"><img src="http://www.ohtmacon.com/graphics/igs.gif" width="780" height="1"></td> 
            <td width="15" height="15" valign="top" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/U-right.jpg" align="right"></td> 
          </tr>

DeXXus · Post by **DeXXus** » Sat 14. Jan 2006, 00:21

EDIT:
NM...The code (as shown above) looks fine when used within IE

dexxus wrote:This part doesn't look right (corner graphics are not on the same level):

Code: Select all

          <tr> 
            <td width="15" height="15" align="left" valign="top" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/U-left.jpg"></td> 
            <td width="910" align="left" valign="top" bgcolor="#FFFFFF"><img src="http://www.ohtmacon.com/graphics/igs.gif" width="780" height="1"></td> 
            <td width="15" height="15" valign="top" bgcolor="#FFFFFF"><img src="http://ohtmacon.com/graphics/U-right.jpg" align="right"></td> 
          </tr>

mstroz · Post by **mstroz** » Sat 14. Jan 2006, 05:53

I was wondering about that.

I still have no idea what to do about this, and my drop dead deadline is coming up Monday. I'm getting a bit worried.

Thanks for trying, and any other suggestion would be much appreciated.

DeXXus · Post by **DeXXus** » Sat 14. Jan 2006, 11:25

Actually... some things just don't add up (check your table width and then add up the widths of it's elements).
For example:
TABLE width=930 ~but~ TD's=15+910+15=940

Code: Select all

<TABLE borderColor=#94927b cellSpacing=0 cellPadding=0 width=930 
            align=center border=0>
              <TBODY>
              <TR>
                <TD vAlign=top align=left width=15 bgColor=#ffffff 
                  height=15><IMG 
                  src="Ocmulgee Heritage Trail  Home Page_files/U-left.jpg"></TD>
                <TD vAlign=top align=left width=910 bgColor=#ffffff><IMG 
                  height=1 
                  src="Ocmulgee Heritage Trail  Home Page_files/igs.gif" 
                  width=780></TD>
                <TD vAlign=top width=15 bgColor=#ffffff height=15><IMG 
                  src="Ocmulgee Heritage Trail  Home Page_files/U-right.jpg" 
                  align=right></TD></TR>

Also, I think that the use of valign and align for your TD's and IMG might need checking. Make sure height and width settings are consistent for all element types (including images) and apply your tag parameters in a universal and consistent order... so that you can note what is missing and whether intended. Change the bgColor of the TD's containing the right-hand images to red (#f00000) and note the visible effect upon the space surrounding those corner graphics (upper & lower) against the white (#ffffff) of the table content.

mstroz · Post by **mstroz** » Mon 16. Jan 2006, 00:07

I'll give this a try in the morning.
Thanks for your feedback Dexxus.

mstroz · Post by **mstroz** » Fri 3. Feb 2006, 03:40

I forgot to update you...
Dexxus, your suggestion fixed the problem. Thanks!

DeXXus · Post by **DeXXus** » Fri 3. Feb 2006, 08:04

Nice work. Glad I was able to keep you from losing patience with your design and phpWCMS. Take care.