phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

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

https://forum.phpwcms.org/viewtopic.php?t=9767

Page 1 of 1

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

Posted: Thu 12. Jan 2006, 17:10
by mstroz
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.

Image

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:

Image

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

Posted: Thu 12. Jan 2006, 19:16
by DeXXus
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>

Posted: Sat 14. Jan 2006, 00:21
by DeXXus
EDIT:
NM...The code (as shown above) looks fine when used within IE
:roll:
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>

Posted: Sat 14. Jan 2006, 05:53
by mstroz
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.

Posted: Sat 14. Jan 2006, 11:25
by DeXXus
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.

Posted: Mon 16. Jan 2006, 00:07
by mstroz
I'll give this a try in the morning.
Thanks for your feedback Dexxus.

Posted: Fri 3. Feb 2006, 03:40
by mstroz
I forgot to update you...
Dexxus, your suggestion fixed the problem. Thanks!

Posted: Fri 3. Feb 2006, 08:04
by DeXXus
Nice work. Glad I was able to keep you from losing patience with your design and phpWCMS. Take care.
All times are UTC+02:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited