Website Design Forum

**alexburn** · 01-30-2008, 08:40 AM

Hi,

Temporary website is http://pubspotters.com/heliguy.
Its a Joomla site with a free template that seems to work fine in firefox but messes up at the top for IE. I have tried disabling the css file to make sure it isnt a stylesheet problem. I just need the images to line up correctly around the header.

Here is the top of the template in FireFox- looks perfect....

Here is how the same template looks in Internet Explorer 7...

Here is the HTML for this template:

Code:

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!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>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php if ( $my->id ) { initEditor(); } ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/templates/247portal-red/favicon.ico\" />" ; ?>
<link rel="alternate" title="<?php echo $mosConfig_sitename; ?>" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/index2.php?option=com_rss&no_html=1" type="application/rss+xml" />
<script language="JavaScript" type="text/javascript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
  </script>
<style type="text/css">
<!--
.Stil1 {    font-size: xx-small;
    color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div>
  <a name="up" id="up"></a>
  <table width="770" height="20" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" class="mt"><a href="http://www.mamboteam.com" class="Stil1" >www.mamboteam.com</a></td>
    </tr>
  </table>  
  <table width="770"  border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
    <td style="padding:0px;"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/space.gif" width="770" height="1" /></td>
  </tr>
    <tr>
      <td><div class="background">
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/center.jpg">
          <tr>
            <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/left.jpg" width="26" /></td>
            <td class="title">              <table width="100%"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="100" colspan="2" class="title" style="padding-top:14px;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td width="100%" style="padding-left:10px;"><a href="<?php echo $mosConfig_live_site;?>" title="<?php echo $mosConfig_sitename; ?>"><?php echo $mosConfig_sitename; ?></a></td>
                      <td><?php mosLoadComponent( "banners" ); ?></td>
                    </tr>
                </table></td>
              </tr>
              <tr>
                <td width="400" height="29"><div id="search">
                    <?php mosLoadModules ( 'user4', -1 ); ?>
                </div></td>
                <td width="100%" height="29" valign="bottom" class="mainlevel-nav"><?php mosLoadModules ( 'user3' ); ?></td>
              </tr>
            </table></td>
            <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/right.jpg" width="26" /></td>
          </tr>
        </table>
        <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="11" height="25" background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/shadowl.jpg"><div>
            </div></td>
            <td height="25" bgcolor="#F1F1F1" style="border-bottom: 1px solid #999999; border-top: 5px solid #FFFFFF;"><?php mosPathWay(); ?></td>
            <td height="25" align="right" bgcolor="#F1F1F1" style="border-bottom: 1px solid #999999; border-top: 5px solid #FFFFFF;"><div class="date"><?php echo mosCurrentDate(); ?></div></td>
            <td width="11" height="25" align="right" background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/shadowr.jpg">&nbsp;</td>
          </tr>
        </table>
        <table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td valign="top" style="padding-left:8px; background-repeat: repeat-y;" background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/shadowl.jpg">&nbsp;</td>
            <td valign="top" style="background-repeat: repeat-y;"background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/lb.gif"><?php if (mosCountModules('left')) { ?>
              <div class="leftrow">
                <?php mosLoadModules ( 'left' ); ?>
              </div>
              <?php } ?></td>
            <td valign="top" bgcolor="#FAFAFA" width="100%"><div class"main">
              <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                <tr valign="top" bgcolor="#F1F1F1">
                  <?php if (mosCountModules('top')) { ?><td colspan="3" style="border-top: 3px solid #FFFFFF;">
                      <div>
                        <?php mosLoadModules ( 'top' ); ?>
                      </div>
                      </td><?php } ?>
                </tr>
                <tr>
                  <?php if (mosCountModules('user1')) { ?><td valign="top" bgcolor="#F1F1F1" style="border-top: 3px solid #FFFFFF;"><div>
                      <?php mosLoadModules ( 'user1' ); ?>
                  </div></td>
                  <td width="4" class="mod" valign="top" bgcolor="#FFFFFF" style="border-top: 3px solid #FFFFFF;"><div class="mod"> <?php } ?><?php if (mosCountModules('user2')) { ?> </div></td> 
                  
                  <td valign="top" bgcolor="#F1F1F1" style="border-top: 3px solid #FFFFFF;"><div>
                    <?php mosLoadModules ( 'user2' ); ?>
</div></td><?php } ?>
                </tr>
                <tr align="left" valign="top">
                  <td colspan="3" style=" border-top: 4px solid #FFFFFF; padding: 5px;"><div class="main">
                      <?php mosMainBody(); ?>
                      </div></td>
                </tr>
                <tr bgcolor="#F1F1F1">
                  <td colspan="3" valign="top" style="border-top: 3px solid #FFFFFF;"><?php if (mosCountModules('bottom')) { ?>
                    <div>
                      <?php mosLoadModules ( 'bottom' ); ?>
                  </div>
                    <?php } ?></td>
                  </tr>
              </table>
             </td>
            <td valign="top" style="background-repeat: repeat-y; "background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/rb.gif"><?php if (mosCountModules('right')) { ?>
                <div class="rightrow">
                  <?php mosLoadModules ( 'right' ); ?>
                </div>                
              <?php } ?></td>
            <td valign="top" style="padding-right: 8px; background-repeat: repeat-y;" background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/shadowr.jpg">&nbsp;</td>
          </tr>
        </table>
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" background="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/center2.jpg">
          <tr>
            <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/left2.jpg" /></td>
            <td>
              <table width="100%"  border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="30" align="left"><a href="<?php echo sefRelToAbs($_SERVER['REQUEST_URI'])."#up"; ?>"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/ltop.jpg" alt="Top!" border="0" /></a> </td>
                  <td align="center"><div class="footer"><?php include_once('includes/footer.php'); ?>
                    <a href="http://www.mamboteam.com" target="_blank">Design by Mamboteam.com!</a></div>
                    </td>
                  <td width="30" align="right"><a href="<?php echo sefRelToAbs($_SERVER['REQUEST_URI'])."#up"; ?>"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/rtop.jpg" alt="Top!" border="0" /></a></td>
                </tr>
            </table></td>
            <td width="26"><img src="<?php echo $mosConfig_live_site;?>/templates/247portal-red/images/right2.jpg" /></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
</div>
</body>
</html>

Anyone have any ideas on how to line up the images in the table at the top?

Thanks
Alex

**freelancevote** · 01-30-2008, 07:33 PM

I wish Microsoftw would just discontinue Internet Explorer becauise it's a huge headache. I've literally spent hours trying to find solutions to problems with IE. My advice is to find a different template that already works fine in Internet Explorer.

**alexburn** · 01-30-2008, 07:55 PM

Do you ever think to yourself that if you stare hard enough at something for long enough, it will come to you? I spent at least 12 hours looking at this simple problem.... and I solved it! That is quite impressive for me as I know very little about HTML other than the basics and even less about PHP.

Here was the solution....

This one line, for some reason, screws up in Internet Explorer under Transitional DTD XHTML 1.0:

Code:

<td height="100" colspan="2" class="title" style="padding-top:14px;"><table width="100%" border="0" cellpadding="0" cellspacing="0">

In particular style="padding-top:14px;".

All I did was remove this style from the template and everything fit perfectly into place!

I ran W3C Validation, found 21 errors.... cleaned up the messy code.... and voila!! A perfectly validated and functional template!!

**lub07** · 08-13-2008, 02:19 PM

Yes!!! For IE's sake never use heightwith padding-top/-bottom. The same applies of course for width - should never be used with padding-left/-right. If you need something like that, use rather a second element, which you can assign padding/margin. And use width/height in the parent component.