Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2008
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS / Table layout query in IE

    Hey,

    I'm currently working on a website, an example of which is being shown here:

    www.blurrededgemagazine.com/test/indexredone.php

    I'm having a layout problem in IE; I have used a combination of CSS and tables to create the "Reviews" section on this front page, however in IE it appears to be pushed down a few pixels lower than the other tables within the parent table.

    The code is as follows:
    Code:
    <table style="padding-left:10px; padding-right:10px;" width="890px" align="center" height="659px"><tr><td width="220px"><table id="reviewstable" align="left"><tr><th><a href="sub.php?m=r">Reviews</a></th></tr><?php here?></table></td><td width="21px"></td><td width="380px">
      <table id="articlestable" align="center"><tr><th><a href="sub.php?m=r">Articles</a>
      </th></tr><?php here ?></table></td><td width="18px"></td><td width="220px" valign="top"><table id="blogtable" align="right"><tr><th height="29px"><p align="center">Blog Posts</p></th>
      </tr><tr><td height="201px"><? php here ?></td>
      </tr></table></td></tr></table>
    and relevant CSS:
    Code:
    table#reviewstable {
    	width:220px;
    	height:659px;}
    table#reviewstable th {
    	background:url(images2/cellpic3.gif) top left repeat-x;
    	width:220px;
    	height:29px;}
    table#reviewstable td {
    text-align:center;
    vertical-align:text-top;
    width:220px;
    height:210px;
    padding-top:10px;}
    table#articlestable {
    	width:380px;
    	height:659px;
    }
    table#articlestable th {
    	background:url(images2/cellpic3.gif) top left repeat-x;
    	width:380px;
    	height:29px;
    }
    table#articlestable td {
    text-align:center;
    vertical-align:text-top;
    width:380px;
    height:210px;
    padding-top:10px;}
    
    table#blogtable {
    	width:220px;
    	height:230px;
    }
    table#blogtable th {
    	background:url(images2/cellpic3.gif) top left repeat-x;
    	height:29px;
    }
    table#blogtable td {
    height:201px;
    text-align:center;
    vertical-align:text-top;
    padding-top:10px;}
    Any ideas as to what could cause this would be great. It's been driving me crazy tonight.

    Regards

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    You have an "expanding box" problem there somewhere, but I'm not exactly sure where.

    So much of that code is not supported in IE6 and that's what I'm using to view it.

    A quick and dirty solution would be to add this to your CSS:
    Code:
    <!--[if IE]>
    <style type="text/css"
    table#reviewstable td {
    	height:213px;
    }
    <![endif]-->
    It raises the bar up. Not sure if that'll affect your image alignments though.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •