12 replies [Last post]
ikerson
ikerson's picture
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT-4
Joined: 2010-04-08
Posts: 7
Points: 10

My right div falls below the left in IE. The layout works in Firefox, Chrome, Opera, Safari and it's based on a template that has worked fine in IE and otherwise for a dozen other pages. I'm guessing it has something to do with the table in the left div. But, I have no idea what. Here are screen shots, a link, and the code.

Page in IE

Link to problem page

HTML Code:

<?php
	include('locale/config_locale.php');
	$language = ($_POST['language'])?$_POST['language']:$_SESSION['language']; 
	if (!$language) $language = "ko";
	setLanguage($language);
?>
 
<!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" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/PHPtemplate.php.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="Page Title" -->
<title><?php echo(PAYMENT_PAGE_TITLE)?></title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body>
<div id="container">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><?php echo(NAVLIST_MENU_1)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_2)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_3)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_4)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_5)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_6)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_7)?></a></li>
</ul>
</div>
<!-- language change form -->
<div id="select_language">
  <form name="language_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <select name="language" onChange="document.language_form.submit();">
      <option value="ko" <?php echo(($language=="ko")?"SELECTED":"")?> >한국어</option>
      <option value="en" <?php echo(($language=="en")?"SELECTED":"")?> >English</option>
    </select>
  </form>
</div>
<div style="clear:both"></div>
<div id="banner"> </div>
<div id="content">
	<!-- This is the left div. It contains the main content, which varies by page -->
  <div id="content_main"><!-- InstanceBeginEditable name="Main Content" -->
  <h1 class="left"><?php echo(PAYMENT_MAIN_H1)?></h1>
  <p class="left"><?php echo(PAYMENT_CONT_H1)?></p>
  <h2 class="left"><?php echo(PAYMENT_CONT_H2_1)?></h2>
  <p class="left"><?php echo(PAYMENT_TRANSFER)?></p>
  <h2 class="left"><?php echo(PAYMENT_CONT_H2_2)?></h2>
  <p class="left"><?php echo(PAYMENT_PAYPAL)?></p>
  <h3 class="left"><?php echo(PAYMENT_CONT_H2_3)?></h3>
    <table width="540" border="0">
      <tr>
        <td colspan="5" align="center" valign="middle" bgcolor="#CCCCCC"><?php echo(PAYMENT_TABLE_TITLE)?></td>
        </tr>
      <tr>
        <td align="center" valign="middle" width="75">&nbsp;</td>
        <td align="center" valign="middle" width="75"><?php echo(PAYMENT_TABLE_HEAD_1)?></td>
        <td align="center" valign="middle" width="75"><?php echo(PAYMENT_TABLE_HEAD_2)?></td>
        <td align="center" valign="middle" width="75"><?php echo(PAYMENT_TABLE_HEAD_3)?></td>
        <td align="center" valign="middle" width="220"><?php echo(PAYMENT_TABLE_HEAD_4)?></td>
      </tr>
      <tr bgcolor="#00CCFF">
        <td rowspan="4" align="center" valign="middle" bgcolor="#00CCFF"><?php echo(PAYMENT_CHILD_CLASS)?></td>
        <td align="center" valign="middle">1</td>
        <td align="center" valign="middle">20</td>
        <td align="center" valign="middle">$90 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="DXFMG6YU4GB2Y" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#00CCFF">
        <td height="24" align="center" valign="middle" bgcolor="#00CCFF">2</td>
        <td align="center" valign="middle">20</td>
        <td align="center" valign="middle">$170 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="ED7XH3XQETSJG" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#00CCFF">
        <td align="center" valign="middle">3</td>
        <td align="center" valign="middle">20</td>
        <td align="center" valign="middle">$240 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="RTMHV7NJZH6H4" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#00CCFF">
        <td align="center" valign="middle">5</td>
        <td align="center" valign="middle">20</td>
        <td align="center" valign="middle">$350 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="ZRTCJ5PMJS522" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0099FF">
        <td rowspan="4" align="center" valign="middle"><?php echo(PAYMENT_AD_CLASS)?></td>
        <td align="center" valign="middle">1</td>
        <td align="center" valign="middle">30</td>
        <td align="center" valign="middle">$130 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="8R7X8QM5GUYA8" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0099FF">
        <td align="center" valign="middle">2</td>
        <td align="center" valign="middle">30</td>
        <td align="center" valign="middle">$250 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="C8CWY7BZB584A" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0099FF">
        <td align="center" valign="middle">3</td>
        <td align="center" valign="middle">30</td>
        <td align="center" valign="middle">$360 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="L5LRSSTHT8GUJ" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0099FF">
        <td align="center" valign="middle">5</td>
        <td align="center" valign="middle">30</td>
        <td align="center" valign="middle">$530 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="R5RWXF4WKGGTJ" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0066FF">
        <td rowspan="4" align="center" valign="middle"><?php echo(PAYMENT_COLL_CLASS)?></td>
        <td align="center" valign="middle">1</td>
        <td align="center" valign="middle">45</td>
        <td align="center" valign="middle">$200 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="2GDXHJMFSTWDC" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0066FF">
        <td align="center" valign="middle">2</td>
        <td align="center" valign="middle">45</td>
        <td align="center" valign="middle">$380 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="KJ6LV87CGQE44" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0066FF">
        <td align="center" valign="middle">3</td>
        <td align="center" valign="middle">45</td>
        <td align="center" valign="middle">$530 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="4CAY3UC8EDEGL" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
      <tr bgcolor="#0066FF">
        <td align="center" valign="middle">5</td>
        <td align="center" valign="middle">45</td>
        <td align="center" valign="middle">$790 <?php echo(PAYMENT_VALUE)?></td>
        <td align="center" valign="middle"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="Q4U5YR3H9L694" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
        </form></td>
      </tr>
    </table>
  <!-- InstanceEndEditable -->
    <!-- End right (main content) div -->
  </div>
  <!-- This is the right div. It is full of info boxes, which do not vary by page -->
  <div class="right">
<h1 class="right"> </h1>
<p id="ads">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','235','height','105','align','middle','title','See all West Chester English has to offer','src','imageSlider','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','scale','noborder','movie','imageSlider' ); //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="235" height="105" align="middle" title="See all West Chester English has to offer">
    <param name="movie" value="imageSlider.swf" />
    <param name="quality" value="high" /><param name="SCALE" value="noborder" />
    <embed src="imageSlider.swf" width="235" height="105" align="middle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="noborder"></embed>
  </object></noscript>
</p>
<h1 class="right"><?php echo(REGISTER_BOX_HEADER)?></h1>
<p class="right"><table class="right" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a class="right" href="#"><?php echo(REGISTER_BOX_CONTENT)?></a></td>
    <td><img src="images/enroll.png" alt="Registration" /></td>
  </tr>
</table>
</p>
<h1 class="right"><?php echo(TEACHER_BOX_HEADER)?></h1>
<p class="right"><table class="right" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="bottom"><ul id="teacher"><li><?php echo(TEACHER_BOX_L1)?></li><li><?php echo(TEACHER_BOX_L2)?></li><li><?php echo(TEACHER_BOX_L3)?></li></ul><img src="images/teacherBackground.png" alt="Meet West Chester English's Teacher"/></td>
    <td width="140px"><a class="right" href="#"><?php echo(TEACHER_BOX_CONTENT)?></a></td>
  </tr>
</table>
</p>
<h1 class="right"><?php echo(SKYPE_BOX_HEADER)?></h1>
<p class="right"><table class="right">
  <tr>
    <td><!--
Skype 'My status' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:westchesterenglish?chat"><img src="http://mystatus.skype.com/smallclassic/westchesterenglish" style="border: none;" width="114" height="20" alt="My status" /></a></td>
  </tr>
  <tr id="sample">
    <td><?php echo(SKYPE_BOX_CONTENT)?></td>
  </tr>
</table>
<!--<h1 class="right"><?php echo(SAMPLE_BOX_HEADER)?></h1>
<p class="right"><table class="right" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a class="right" href="#"><?php echo(SAMPLE_BOX_CONTENT)?></a></td>
  </tr>
  <tr id="sample">
    <td align="center"><img style="margin-bottom:5px" border="0" src="../images/sample.png" alt="Sample program" /></td>
  </tr>
</table>
<h1 class="right"><?php echo(PAY_BOX_HEADER)?></h1>
<p class="right"><a class="right" href="#"><?php echo(PAY_BOX_CONTENT)?></a></p>-->
<!-- End right div -->
</div>
</div>
<!-- This is the bottom div. It contains links, which do not vary by page -->
<div class="bottom">
  <ul class="bottom">
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_1)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_2)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_3)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_4)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_5)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_6)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_7)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_8)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_9)?></a></li>
  </ul>
</div>
<!-- End bottom div -->
</div>
</body>
<!-- InstanceEnd --></html>

CSS:

@charset "utf-8";
/* CSS Document */
/* New West Chester English Design 4-15-2010 */
 
body { 
font : 76%/160% Tahoma, Verdana, Arial, sans-serif; 
color : #000;}
 
#container { 
width : 800px; 
margin : 0 auto; 
padding : 0; 
text-align : left;
background: url(images/backgroundTab.png) no-repeat;
}
 
#navcontainer ul li {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
text-align: center;
}
 
#navcontainer a {
color: #000000;
text-decoration: none;
font-weight:bold;
border-right:1px solid;
display: block;
padding-right: .5em;
padding-left: .5em;
}
 
#select_language {
float: right;
padding-right: 1.5em;
}
 
#navcontainer a:hover {background:url(images/backgroundTabHover.png) repeat-x; }
 
#banner {
width:100%;
background: url(images/banner.png) no-repeat;
margin:0;
padding-top:301px;
}
 
div#content { 
width : 100%;
padding-top:15px;
overflow: auto;
background: url(images/backgroundTransparent.png) repeat-x; 
}
 
div#content_main { 
float : left; 
width : 550px;
margin-top : 10px;
padding : 5px;
}
 
h1.left { 
width : 100%;
color:#000000;
text-indent:20px;
font-weight:bold; 
font-size: 2.0em;
margin-bottom: .2em;
min-height:30px;
padding: .2em;
background:url(images/leftH1.png) no-repeat top left;
}
 
h2.left {
width : 100%;
color:#000000;
text-indent:20px; 
font-size: 1.5em;
font-weight:bold;
min-height:30px;
padding: .2em;
background:url(images/leftH2.png) no-repeat top left;
}
 
h3.left {
width : 100%;
color:#000000;
text-indent:20px; 
font-size: 1em;
font-weight:bold;
min-height:30px;
margin-bottom: .2em;
padding: .2em;
background:url(images/leftH3.png) no-repeat top left;
}
 
p.left {
font-size:1.2em;
}
 
div.right {
float : right; 
width : 240px; 
margin : 0; 
padding : 0;
}
 
h1.right { 
color:#000000; 
font-size: 1.5em;
height: 2.0em;
margin-top : 10px;
margin-bottom:0px;
padding:0;
text-indent: 15px;
background: url(images/rightBoxTop.png) no-repeat top left;}
 
#ads { 
text-align:left;
text-indent:0px;
font-size:1em;
margin-top:-18px;
padding: 0px;
border-bottom:2px solid #3399cc;
border-left:2px solid #3399cc;
border-right:2px solid #3399cc;
}
 
#register {
text-align:left;
font-size:1em;
margin-top:-20px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;
padding-left: 3px;
border-bottom:2px solid #3399cc;
border-left:2px solid #3399cc;
border-right:2px solid #3399cc;
background: url(images/enroll.png) no-repeat bottom right;
}
 
a#register {
display : block; 
text-align:left;
border:hidden;
text-decoration:none;
color:#000000;
background:none;
margin-right:85px;
}
 
a:link#register {
text-decoration:none;
color:#000000;
padding: 10px;
border:hidden;
}
 
a:visited#register {
color:#000000;
text-decoration:none;
border:hidden;
padding: 10px;
}
 
a:hover#register {
text-decoration:none;
border:hidden;
}
 
ul#teacher {
font-weight:bold;
font-size:1em;
color:green;
line-height:1.2em;
list-style-type:square;
margin:0px;
}
 
table.right {
width:100%;
align:center;
margin-top:-12px;
cellspacing:0px;
cellpadding:15px;
border-bottom:2px solid #3399cc;
border-left:2px solid #3399cc;
border-right:2px solid #3399cc;
border-top:hidden;
}
 
p.right {
text-align:left;
font-size:1em;
margin-top:-20px;
padding: 0px;
border-bottom:2px solid #3399cc;
border-left:2px solid #3399cc;
border-right:2px solid #3399cc;
}
 
a.right {
display : block; 
text-align : left;
}
 
a:link.right {
text-decoration:none;
color:#000000;
padding: 10px;}
 
a:visited.right {
color:#000000;
text-decoration:none;
padding: 10px;}
 
a:hover.right {text-decoration:none;}
 
div.bottom { 
width:100%;
height: 20px;
text-align:center;
margin-top:20px;
background: url(images/backgroundBottom.png) bottom left;
}
 
ul.bottom {
margin : 0;
padding : 0 0 20px 10px;
text-align:center;}
 
li.bottom {
display : inline;
margin : 0;
padding : 0;
list-style-type : none; }
 
a:hover.bottom {
border-bottom : 4px solid #6699FF;
padding-bottom : 2px; }
 
a:link.bottom {
float:left;
color:#000000;
line-height : 20px;
font-weight : bold;
margin : 0 10px 4px 10px;
text-decoration : none; }
 
table.catalogue {
border-right:2px solid #3399cc;
border-left:2px solid #3399cc;
}
 
td.catalogue {
border-bottom:2px dotted green;
}

It's not pretty, but it usually gets the job done.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 7 years 29 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

IE always has issues with

IE always has issues with padding, Don't use paddding for any of your template containers (div.right, div#main-container). Use margins on their child elements to achieve the result. Hope this helps Smile

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

A good place to help debug

A good place to help debug IE: http://haslayout.net/. My guess is that it has something to do with IE "layout"...

Your table is a bit funky, are you trying to define the width and height or leave it fluid? I would deconstruct the html table formatting presets and reapply the formatting through css, this would help prevent browser interpretation problems.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

jon19870 wrote: IE always has

jon19870 wrote:

IE always has issues with padding, Don't use paddding for any of your template containers (div.right, div#main-container). Use margins on their child elements to achieve the result.

That's pretty unsound advice. IE doesn't have issues with padding. Panda gave more pertinent advice with his pointers to hasLayout.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 7 years 29 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

What I have posted was

What I have posted was something I read a while ago which has prevented alot of issues for me generally caused by IE with padding on the main containers header/cols/footer. Sorry if you saw this as bad advice, but it's helped me in the past and thought it might be of help in this case as the floated element on the right is being pushed down due to width issues on the containers which looks like a result of a IE wrongly accumulating the overall widths.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If you mix em or % horizontal

If you mix em or % horizontal padding (and/or margins) with pixel widths, you'll get problems in all browsers with the calculation of the overall width; IE just happens to be less forgiving than the others when it comes to allowing content to extend outside its parent if the content is wider, and adjacent content allows it. If you calculate your overall widths correctly, you won't have a problem.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ikerson
ikerson's picture
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT-4
Joined: 2010-04-08
Posts: 7
Points: 10

Getting an education

jon19870, Panda, and Tyssen, thanks for the feedback. I am getting an education seeing you all hashing this issue out. The problem is likely due to my laziness. The troublesome table comes from the old “fixed width” version of my site that I simply cut and pasted into the new version. I will go back and style the table in CSS. I would like the table and as much of the site as possible to be fluid to accommodate the dynamic content (i.e. English, Korean, or any other language I add later). All fixed widths are unavoidable, due to my laziness, an oversight, or an attempt at a quick and dirty solution in the face of my incomplete understanding of CSS.

One question: I looked at http://haslayout.net/ and was completely overwhelmed. I know this is only a guess on your part, but from what I am reading you think that styling the table in CSS with ems and % will fix the problem, make the table render more reliably in all browsers, and maybe load more efficiently. (That last bit is my own guess.) That way I won’t have to worry about IE bugs. Do I understand correctly?

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

What I would do is take the

What I would do is take the table out first and see if the layout is working correctly.

Next, clean up your table's html, reset its formatting through css and add the table back in to see if the design is still working.

Then start formatting the table the way you would like it, but keep an eye on the design as you go to make sure its consistent with your desired outcome. When you hit a problem address it at the point you added new code instead of adding a bunch of code. This way you will be able to pinpoint the problems as they crop up.

When you check your design, make sure to resize the browser, zoom the page and change the text size to see if you are getting the consistent design you are after.

You can use %, ems, px or whatever you like, you just have to be carful about mixing them, and be aware of how they are applied.

As a side, there is a double margin bug in IE though I don't think it applies in your case but without playing with the actual code I wouldn't rule it out. Your floated divs are set to the exact width of the container which leaves no room for error so if there is a margin or border in there somewhere that I missed it would break your design as well.

gl

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Versions of IE before 6.0 did

Versions of IE before 6.0 did have an issue with padding in that they simply did not follow the CSS standard. Padding in those browsers did not change the overall element size, which was wrong then and is wrong now.

6.0 and above do follow the standard so far as padding goes, sort of. Version six will do it ONLY if given a proper "standards triggering document type declaration" on the first line of the page. With no doctype, IE6 may as well be IE5 so far as CSS is concerned.

Well, that's what IE chose to trigger standards mode. Actually the doctype declaration was not meant for that in the first place but the folks over at MS, as so often, decided to use it for their own purposes....

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

ikerson
ikerson's picture
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT-4
Joined: 2010-04-08
Posts: 7
Points: 10

IE rowspan bug

I basically followed the process Panda outlined above and found the cause of the problem. But, I am no closer to a solution. IE does not like the rowspan attribute in my table. It knocks out the right div when I add the html tag, td rowspan="4". IE8 is the only browser that does this.

I have uploaded the page with and without the rowspan so you can see the difference. And, I am including the CSS for the table and code for the page below. (The general CSS style sheet has not changed from above.)

I googled "IE rowspan bug" and did not find an immediate solution. All the advice was to reformate the table in a way that does not use rowspan. This seems impractical.

Anyone know anything about a rowspan bug in IE8 or otherwise? Is there a quick fix? What do you suggest? Is there a way to span rows with CSS? And, if there is a way, will IE still mis-render the page?

In an aside, I am intensely frustrated with IE. I’ve read countless people slag off Explorer and haven’t had much sympathy until now. Why the f**K can’t they make a browser that works consistently?!

Oh well, I guess I’ll get on http://haslayout.net/ and see if I can find anything...

CSS Table Code

@charset "utf-8";
/* CSS Document for table formating */
 
.rounded-corner
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 5%;
	width: 90%;
	text-align: left;
	border-collapse: collapse;
	float:left;
}
 
.rounded-corner thead th.rounded-head-left
{
	background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
}
.rounded-corner thead th.rounded-head-right
{
	background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
}
 
.rounded-corner img 
{ 
	border: hidden;
}
 
.rounded-corner th
{
	padding: 8px;
	font-weight: normal;
	font-size: 13px;
	color: #039;
	background: #b9c9fe;
}
.rounded-corner td
{
	padding: 8px;
	background: #e8edff;
	border-top: 1px solid #fff;
	color: #669;
}
.rounded-corner tfoot td.rounded-foot-left
{
	background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
}
.rounded-corner tfoot td.rounded-foot-right
{
	background: #e8edff url('table-images/botright.png') right bottom no-repeat;
}
.rounded-corner tbody tr:hover td
{
	background: #d0dafd;
}

HTML code (with rowspan attribute)

<?php
	include('locale/config_locale.php');
	$language = ($_POST['language'])?$_POST['language']:$_SESSION['language']; 
	if (!$language) $language = "ko";
	setLanguage($language);
?>
 
<!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" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/PHPtemplate.php.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="Page Title" -->
<title><?php echo(PAYMENT_PAGE_TITLE)?></title>
<link href="table.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body>
<div id="container">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><?php echo(NAVLIST_MENU_1)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_2)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_3)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_4)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_5)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_6)?></a></li>
<li><a href="#"><?php echo(NAVLIST_MENU_7)?></a></li>
</ul>
</div>
<!-- language change form -->
<div id="select_language">
  <form name="language_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <select name="language" onChange="document.language_form.submit();">
      <option value="ko" <?php echo(($language=="ko")?"SELECTED":"")?> >한국어</option>
      <option value="en" <?php echo(($language=="en")?"SELECTED":"")?> >English</option>
    </select>
  </form>
</div>
<div style="clear:both"></div>
<div id="banner"> </div>
<div id="content">
	<!-- This is the left div. It contains the main content, which varies by page -->
  <div id="content_main"><!-- InstanceBeginEditable name="Main Content" -->
  <h1 class="left"><?php echo(PAYMENT_MAIN_H1)?></h1>
  <p class="left"><?php echo(PAYMENT_CONT_H1)?></p>
  <h2 class="left"><?php echo(PAYMENT_CONT_H2_1)?></h2>
  <p class="left"><?php echo(PAYMENT_TRANSFER)?></p>
  <h2 class="left"><?php echo(PAYMENT_CONT_H2_2)?></h2>
  <p class="left"><?php echo(PAYMENT_PAYPAL)?></p>
  <h3 class="left"><?php echo(PAYMENT_CONT_H2_3)?></h3>
    <table class="rounded-corner" summary="West Chester English's rates by course, level, and frequency.">
    <thead>
    	<tr>
        	<th class="rounded-head-left" scope="col">&nbsp;</th>
            <th scope="col"><?php echo(PAYMENT_TABLE_HEAD_1)?></th>
            <th scope="col"><?php echo(PAYMENT_TABLE_HEAD_2)?></th>
            <th scope="col"><?php echo(PAYMENT_TABLE_HEAD_3)?></th>
            <th class="rounded-head-right" scope="col"><?php echo(PAYMENT_TABLE_HEAD_4)?></th>
        </tr>
    </thead>
        <tfoot>
    	<tr>
        	<td class="rounded-foot-left"></td>
            <td colspan="4" class="rounded-foot-right"><em></em></td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td><?php echo(PAYMENT_CHILD_CLASS)?></td>
            <td>1</td>
        	<td>20</td>
        	<td>$90 <?php echo(PAYMENT_VALUE)?></td>
            <td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="DXFMG6YU4GB2Y" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /></form></td>
        </tr>
        	<td>&nbsp;</td>
            <td>2</td>
        	<td>20</td>
        	<td>$170 <?php echo(PAYMENT_VALUE)?></td>
        	<td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="ED7XH3XQETSJG" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /></form></td>
        <tr>
        <td>&nbsp;</td>
        <td>3</td>
        <td>20</td>
        <td>$240 <?php echo(PAYMENT_VALUE)?></td>
        <td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="RTMHV7NJZH6H4" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /></form></td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td>5</td>
        <td>20</td>
        <td>$350 <?php echo(PAYMENT_VALUE)?></td>
        <td><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="ZRTCJ5PMJS522" />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /></form></td>
        </tr>
        <tr>
        	<td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
        	<td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
	</table>
  <!-- InstanceEndEditable -->
    <!-- End right (main content) div -->
  </div>
  <!-- This is the right div. It is full of info boxes, which do not vary by page -->
  <div class="right">
<h1 class="right"><?php echo(BANNER_BOX_HEADER)?></h1>
<p id="ads">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','235','height','105','align','middle','title','See all West Chester English has to offer','src','imageSlider','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','scale','noborder','movie','imageSlider' ); //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="235" height="105" align="middle" title="See all West Chester English has to offer">
    <param name="movie" value="imageSlider.swf" />
    <param name="quality" value="high" /><param name="SCALE" value="noborder" />
    <embed src="imageSlider.swf" width="235" height="105" align="middle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="noborder"></embed>
  </object></noscript>
</p>
<h1 class="right"><?php echo(REGISTER_BOX_HEADER)?></h1>
<p class="right"><table class="right" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a class="right" href="#"><?php echo(REGISTER_BOX_CONTENT)?></a></td>
    <td><img src="images/enroll.png" alt="Registration" /></td>
  </tr>
</table>
</p>
<h1 class="right"><?php echo(TEACHER_BOX_HEADER)?></h1>
<p class="right"><table class="right" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="bottom"><ul id="teacher"><li><?php echo(TEACHER_BOX_L1)?></li><li><?php echo(TEACHER_BOX_L2)?></li><li><?php echo(TEACHER_BOX_L3)?></li></ul><img src="images/teacherBackground.png" alt="Meet West Chester English's Teacher"/></td>
    <td width="140px"><a class="right" href="#"><?php echo(TEACHER_BOX_CONTENT)?></a></td>
  </tr>
</table>
</p>
<h1 class="right"><?php echo(SKYPE_BOX_HEADER)?></h1>
<p class="right"><table class="right">
  <tr>
    <td><!--
Skype 'My status' button
http://www.skype.com/go/skypebuttons
-->
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
<a href="skype:westchesterenglish?chat"><img src="http://mystatus.skype.com/smallclassic/westchesterenglish" style="border: none;" width="114" height="20" alt="My status" /></a></td>
  </tr>
  <tr id="sample">
    <td><?php echo(SKYPE_BOX_CONTENT)?></td>
  </tr>
</table>
<!--<h1 class="right"><?php echo(SAMPLE_BOX_HEADER)?></h1>
<p class="right"><table class="right" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a class="right" href="#"><?php echo(SAMPLE_BOX_CONTENT)?></a></td>
  </tr>
  <tr id="sample">
    <td align="center"><img style="margin-bottom:5px" border="0" src="../images/sample.png" alt="Sample program" /></td>
  </tr>
</table>
<h1 class="right"><?php echo(PAY_BOX_HEADER)?></h1>
<p class="right"><a class="right" href="#"><?php echo(PAY_BOX_CONTENT)?></a></p>-->
<!-- End right div -->
</div>
</div>
<!-- This is the bottom div. It contains links, which do not vary by page -->
<div class="bottom">
  <ul class="bottom">
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_1)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_2)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_3)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_4)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_5)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_6)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_7)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_8)?></a></li>
    <li class="bottom"><a class="bottom" href="#"><?php echo(BOTTOM_LINK_9)?></a></li>
  </ul>
</div>
<!-- End bottom div -->
</div>
</body>
<!-- InstanceEnd --></html>

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Can you try this and tell me

Can you try this and tell me if it does anything for you?

.rounded-corner{
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 12px;
  margin: 20px auto;
  width: 90%;
  text-align: left;
  border-collapse: collapse;
  }

if not try this:

div#content_main { 
  float: left; 
  width: 545px;
  margin: 0;
  margin-top: 10px;
  padding: 5px;
  padding-right: 0px;
  overflow: hidden;
  }

ikerson
ikerson's picture
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT-4
Joined: 2010-04-08
Posts: 7
Points: 10

Adjusting the Content Div Worked.

Awesome Panda! Your second suggestion worked. I'd buy you a beer if you weren't 5 time zones away.

So I guess the lesson here is give your layouts room to breath. My divs were sitting too close together and it didn't leave any room for error on my part or on the part of the browser.

Any idea what the rowspan thing was about or is that just a red herring?

Again, thanks for the effort.

Panda
Panda's picture
Offline
Enthusiast
UK
Last seen: 12 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2010-04-25
Posts: 98
Points: 110

Will travel for

Will travel for beer...lol

Red herring? I am having a hard time seeing how they are connected.

I would be tempted to try playing with the content_main div.

I would try adjusting the width just to see at what point it breaks.

Also, might try this to see if it breaks it again:

div#content_main { 
  float: left; 
  width: 550px;
  margin: 0;
  margin-top: 10px;
  padding: 5px;
  overflow: hidden;
  }

I seriously can't get over what a pain IE is.

Anyway, glad I could help you out...