SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Tulsa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 adding large space between table cells.

    Okay, I am using tables...yes I know CSS is better but I am a little limited in my options as the layout has to work with a specific shopping cart software. Anyways. I got my layout up and it looked great in FF...but IE 6 was adding huge gaps between my table cells. So I added the holly hack and it's fudged a little on my FF design but only solved one of the cells in IE6.

    I also added the img display: block; still no fix.

    The page is at https://www.digitalmediawarehouse.com/index_beta.asp

    Here is my HTML code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Digital Media Warehouse</title>
    <link href="CSS/dedza.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
    <table width="800" border="0" cellpadding="0" cellspacing="0">
      <tr>
        
    	<td width="595" id="header">&nbsp;</td>
        <td><div align="right"><img src="images/logo_e.gif" alt="Digital Media Warehouse" width="205" height="107" /></div></td>
    	
      </tr>
      <tr>
        <td colspan="2"><table width="800" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="150"><img src="images/navigation.gif" alt="Navigation" width="150" height="31" /></td>
            <td height="30" bgcolor="#FFFFFF" class="blackbar">&nbsp;</td>
            <td bgcolor="#FFFFFF" class="blackbar"><div align="right"><a href="#">Home</a> | <a href="#">Sign In</a> | <a href="#">Checkout</a> &nbsp;</div></td>
          </tr>
        </table></td>
        </tr>
      <tr>
        <td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="150" rowspan="3" class="leftnav">
    		<!--#include file="categories_beta.asp"-->		</td>
            <td height="271" colspan="5" class="eyecandy"><img src="images/home.jpg" alt="Digital Media Warehouse" width="650" height="271" /></td>
          </tr>
          <tr>
            <td width="200" height="30" class="blackbar">Free Printer:</td>
            <td width="10" height="30" class="blackbar">&nbsp;</td>
            <td width="200" height="30" class="blackbar">Customer Service:</td>
            <td width="10" height="30" class="blackbar">&nbsp;</td>
            <td width="200" height="30" class="blackbar">About Us:</td>
          </tr>
          <tr>
            <td width="200" valign="top" bgcolor="#FFFFFF" class="fp_con">We know we're going to use plenty of supplies on a daily basis. And if your purchases meet our low monthly requirements we give you an HP DesignJet 5500 printer, it's just that simple! Well, there is an agreement that you have to sign...but it is simple. Heck, we'll even service it for Free during the entire contract period.</td>
            <td width="10" valign="top" bgcolor="#FFFFFF" class="border">&nbsp;</td>
            <td width="200" valign="top" bgcolor="#FFFFFF" class="fp_con"> It all starts with your sales rep. First of all, he or she is actually a he or a she - not some automated phone menu or an internet order form. Your rep is a human being, complete with a fully funtioning brain. And those brains store mountains of helpful stuff.   Your rep can make product recommendations, keep you informed, provide samples and do all kinds of other impressive tricks. </td>
            <td width="10" valign="top" bgcolor="#FFFFFF" class="border">&nbsp;</td>
            <td width="200" valign="top" bgcolor="#FFFFFF" class="fp_con">The first thing you need to know about us? Quite simply, it's not about us. It's about helping you get the job done - Better, faster and more affordably. It's about having a place you can go and (most importantly) people you can trust. </td>
          </tr>
        </table></td>
        </tr>
      <tr>
        <td height="50" colspan="2" class="footer">Copyright &copy; 2007 Digital Media Warehouse | 914 N Broadway | Oklahoma City , OK 73102<br>
          Phone: 800-576-1882 | <a href="#">Contact Us</a> | <a href="#">Customer Service</a> | <a href="#">About Us</a> | </td>
        </tr>
    </table>
    
    </div>
    
    </body>
    </html>
    Here is my css:

    Code:
    /* Digital Media Warehouse: Dedza V: 0.2 */
    body {
    	font-family:Arial, Helvetica, sans-serif;
    	background-color: #2E3360;
    	margin: 0px;
    	background-image: url(../images/background.gif);
    	background-repeat: repeat-x;
    }
    #header {
    	background-image: url(../images/headerbg.jpg);
    	background-repeat: no-repeat;
    }
    #wrapper {
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	width: 800px;
    }
    .blackbar {
    	background-image: url(../images/nav_row.gif);
    	background-repeat: no-repeat;
    	font-weight: bold;
    	color: #FFFFFF;
    	/*padding-left: 5px; */
    	height: 1%;
    }
    .blackbar a:link, .blackbar a:visited {
    	color:#FFFFFF;
    	font-weight: normal;
    }
    img {
     display: block;
    }
    .eyecandy {
    	height: 271px;
    }
    p {
    
    }
    
    .link {
    }
    .leftnav {
    	padding: 5px;
    	background-image: url(../images/nav_col.jpg);
    	background-repeat: no-repeat;
    	background-color: #F2F7F9;
    }
    .leftnav a:link, .leftnav a:visited {
    	text-decoration:none;
    	font-size: 0.8em;
    	color: #000066;
    }
    .leftnav a:hover {
    	text-decoration: none;
    	color: #0000CC;
    }
    /* html .leftnav {
    	width: 137px;
    } */
    .border {
    	background-image: url(../images/con_border.jpg);
    }
    .fp_con {
    	font-size: 0.9em;
    	padding: 5px;	
    }
    .footer {
    	background-image: url(../images/footer.gif);
    	background-repeat: no-repeat;
    	padding-left: 150px;
    	color: #FFFFFF;
    }
    .footer a:link, .footer a:visited {
    	color: #FFFFFF;
    }
    Any ideas on what I am missing.

  2. #2
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Tulsa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A little update on this issue...I noticed it is also happening in IE7. I have a feeling it has something to do with hasLayout but i'm not sure how to kill it.

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's basic table structure and the need to nest a table on the right hand side, so that the content doesn't move down when your left sidebar gets longer as you add text.

    I would go back and remove any hacks you have (I didn't look at any of that - no need to :-) eg: as a test to see what I mean, add a heap of paragraphs to the end of your long menu items list in the left side bar and you will see that that space on the right gets even bigger.....

    You need to insert a new table into the right column and into *that table* insert your content.. with your cursor inside the outer cell, make sure you have the alignment set to top. It's your use of colspans that is throwing out your layout too - you shouldn't use them unless you know the consequences of what can happen.

    PS: It is really messed up in FFox (not just a little

    Nadia

  4. #4
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Tulsa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I was working on it this morning which was probably when you saw it all messed up in FF. But that has been fixed now. I did add a whole bunch of paragraphs in the bottom content and that seemed to close the gap. I'll test it now with another nested table and see how that goes.

  5. #5
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Tulsa
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay. I did what I think you were getting at, and took it a little bit further. Which may have been where I messed up. To get rid of the column spans I started setting everything up as an individual table. So instead of having everything wrapped in one table it is four tables stacked on top of each other.

    The table that contains the content is nested inside the table with the image and the side navigation bar. Now the blank space is distributed between the bottom of the content table and the top. And in FF there is space on the bottom. I can use empty p tags to fill the space. But part of my problem is that the navigation on the left is dynamic so it will be fluctuating in size.


Bookmarks

Posting Permissions

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