space hassles

Adam H-W · June 28th, 2004, 07:06 AM

Hi there

I'm at my wits end!!

I'm trying to get rid of this space at the top of my page and I can't see a reason for it being there. I've torn all the coding apart trying to find it. When I view source and put the outputted code into dreamweaver the space is not there so I don't know where it is coming from.

Here is the code as seen by the browser.

<?xml version="1.0" encoding="iso-8859-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>
<title></title>
<meta http-equiv="Description" content="">
<meta http-equiv="Keywords" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="all">
<meta name="revisit-after" content="10 days">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style_lib/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><div align="center">
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td colspan="2"><p><strong>Press Releases/News Articles<br />
                <br />
                </strong></p>

                </td>
          </tr>
          <tr>
            <td colspan="2"><table width="100%" border="0" cellspacing="2" cellpadding="0">
                <tr>
                  <td background="image_bin/lineacross.gif"><img src="image_bin/lineacross.gif" /></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td colspan="2"><p>In order to read any of the articles, please click
                on its' title below for more detail.</p></td>
          </tr>
          <tr>
            <td colspan="2"><table width="100%" border="0" cellspacing="2" cellpadding="0">
                <tr>
                  <td background="image_bin/lineacross.gif"><img src="image_bin/lineacross.gif" /></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td> <p>Results <b>1 - 5</b> of
                <b>5 </b>links</p></td>
            <td align="right" width="200"> <p align="right">

              </p></td>
          </tr>
          <tr>
            <td colspan="2"><table width="100%" border="0" cellspacing="2" cellpadding="0">
                <tr>
                  <td background="image_bin/lineacross.gif"><img src="image_bin/lineacross.gif" /></td>
                </tr>
              </table></td>
          </tr>
        </table>

      </div></td>
  </tr>
  <br />
  <tr>
    <td valign="top">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr bgcolor="#999999">
          <td width="3%" valign="top"><div align="left"><b>1</b></div></td>
          <td width="42%" valign="top"><b><a href="article.asp?ArticleID=11">NEWLY FORMED PROPERTY INVESTMENT....</a></b></td>
          <td width="20%" valign="top"><div align="left"> Dated:<strong> June 2004</strong></div></td>
          <td width="30%" valign="top"><div align="left">Publication:<strong> Wealth Magazine</strong></div></td>
        </tr>
      </table></td>
  </tr>

      </div></td>
  </tr>
  <br />
  <tr>
    <td valign="top">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr bgcolor="#CCCCCC">
          <td width="3%" valign="top"><div align="left"><b>2</b></div></td>
          <td width="42%" valign="top"><b><a href="article.asp?ArticleID=10">Protego Real Estate Investors</a></b></td>
          <td width="20%" valign="top"><div align="left"> Dated:<strong> June 2004</strong></div></td>
          <td width="30%" valign="top"><div align="left">Publication:<strong> Euro Property</strong></div></td>
        </tr>
      </table></td>
  </tr>

      </div></td>
  </tr>
  <br />
  <tr>
    <td valign="top">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr bgcolor="#999999">
          <td width="3%" valign="top"><div align="left"><b>3</b></div></td>
          <td width="42%" valign="top"><b><a href="article.asp?ArticleID=9">Former API chief and Smedvig launch new manager </a></b></td>
          <td width="20%" valign="top"><div align="left"> Dated:<strong> Summer 2004</strong></div></td>
          <td width="30%" valign="top"><div align="left">Publication:<strong> Investment & Pensions Europe</strong></div></td>
        </tr>
      </table></td>
  </tr>

      </div></td>
  </tr>
  <br />
  <tr>
    <td valign="top">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr bgcolor="#CCCCCC">
          <td width="3%" valign="top"><div align="left"><b>4</b></div></td>
          <td width="42%" valign="top"><b><a href="article.asp?ArticleID=8">Ex Aberdeen chief Reid funds European Investor </a></b></td>
          <td width="20%" valign="top"><div align="left"> Dated:<strong> 17 May 2004</strong></div></td>
          <td width="30%" valign="top"><div align="left">Publication:<strong> Property Week</strong></div></td>
        </tr>
      </table></td>
  </tr>

      </div></td>
  </tr>
  <br />
  <tr>
    <td valign="top">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr bgcolor="#999999">
          <td width="3%" valign="top"><div align="left"><b>5</b></div></td>
          <td width="42%" valign="top"><b><a href="article.asp?ArticleID=7">Protego set up</a></b></td>
          <td width="20%" valign="top"><div align="left"> Dated:<strong> 14 May 2004</strong></div></td>
          <td width="30%" valign="top"><div align="left">Publication:<strong> Estates Gazette</strong></div></td>
        </tr>
      </table></td>
  </tr>

  <tr>
    <td valign="top"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="2"><table width="100%" border="0" cellspacing="2" cellpadding="0">
              <tr>
                <td background="image_bin/lineacross.gif"><img src="image_bin/lineacross.gif" /></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td> <p>Results <b>1 - 5</b> of <b>5
              </b>links</p></td>
          <td align="right" width="200"> <p align="right">

            </p></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td valign="top"><table width="100%" border="0" cellspacing="2" cellpadding="0">
        <tr>
          <td background="image_bin/lineacross.gif"><img src="image_bin/lineacross.gif" /></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td valign="top"><div align="right">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top"><div align="right <br>
       <br>
        <em>Site Design & Development </em> <br>
      </div></td>
  </tr>
</table>

      </div></td>
  </tr>
</table>
</body>
</html>

Snib · June 28th, 2004, 08:40 AM

Can I see your stylesheet? The <body> element has a default margin property, but using CSS you can get rid of it.

Add this to the stylesheet:

body {margin:0px;border:0px;}

Does this fix it?

Snib

<><

Adam H-W · June 28th, 2004, 10:23 AM

Hi Snib

No, I'm afraid it doesn't fix it.

you can check out what I mean if you go to http://80.82.139.234/st-pre/articles.asp

thanks

Adam

richard.york · June 28th, 2004, 09:18 PM

You have tons of errors in your markup. Lot's of tags that don't belong in there. I started reformatting this, and my original intention was to show you how to centralize your presentation using CSS to leave out a lot of the extra markup you have going on. But before I could think of going that far, I have to point out what's wrong with what you already have.

I realize this is difficult to do with a WYSIWYG like Dreamweaver, but in order to be able to troubleshoot your own markup you really need to go through it and indent the tag. This makes the structure easier to troubleshoot. You can see by me doing that I was able to reveal several places where you were inserting tags where they don't belong. Here's a snip of the document you posted with some of these errors highlighted.

Code:

</head>
<body>
<table>
    <tr> 
        <td>
            <div>
                <table>
                    <tr> 
                        <td colspan="2">
                            <p>
                                <strong>Press Releases/News Articles<br /><br /></strong>
                            </p>
                        </td>
                    </tr>
                    <tr> 
                        <td colspan="2">
                            <table>
                                <tr>
                                    <td>
                                        <img src="image_bin/lineacross.gif" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <p>In order to read any of the articles, please click on its' title below for more detail.</p>
                        </td>
                    </tr>
                    <tr> 
                        <td colspan="2">
                            <table>
                                <tr> 
                                    <td>
                                        <img src="image_bin/lineacross.gif" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p>Results <b>1 - 5</b> of <b>5 </b>links</p>
                        </td>
                        <td>
                            <p> 
                            </p>
                        </td>
                    </tr>
                    <tr> 
                        <td colspan="2">
                            <table>
                                <tr>
                                    <td>
                                        <img src="image_bin/lineacross.gif" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
<!--   

Line breaks cannot be inserted between table rows.
<br />  


-->
    <tr> 
        <td>
            <table>
                <tr>
                    <td width="3%" valign="top">
                        <div align="left">
                            <b>1</b>
                        </div>
                    </td>
                    <td width="42%" valign="top">
                        <b><a href="article.asp?ArticleID=11">NEWLY FORMED PROPERTY INVESTMENT....</a></b>
                    </td>
                    <td width="20%" valign="top">
                        <div align="left">
                            &nbsp;Dated:<strong>&nbsp;June 2004</strong>
                        </div>
                    </td>
                    <td width="30%" valign="top">
                        <div align="left">
                            Publication:<strong>&nbsp;Wealth Magazine</strong>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
<!-- 

Div is closed but one is never opened.

</div>

-->
<!--

Table cell is closed, yet one hasn't been opened.
</td>

-->
<!-- 

Table row is closed, but again, hasn't been opened.

  </tr>

-->
<!--

Line break inserted between table rows.
  <br />

-->

    <tr> 
        <td valign="top"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr bgcolor="#CCCCCC"> 
                    <td width="3%" valign="top">
                        <div align="left">
                            <b>2</b>
                        </div>
                    </td>
                    <td width="42%" valign="top">
                        <b><a href="article.asp?ArticleID=10">Protego Real Estate Investors</a></b>
                    </td>
                    <td width="20%" valign="top">

                        <!-- The div tags that you're inserting in the table cells are unnecessary, these 
                             attributes can be put on the cell itself -->

                        <div align="left">
                            &nbsp;Dated:<strong>&nbsp;June 2004</strong>
                        </div>
                    </td>
                    <td width="30%" valign="top">
                        <div align="left">
                            Publication:<strong>&nbsp;Euro Property</strong>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

<!--

Again, a bunch of stuff has been closed, but never opened, 
and another line break between the rows.

      </div></td>
  </tr>
  <br />
-->  


    <tr> 
        <td valign="top"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr bgcolor="#999999"> 
                    <td width="3%" valign="top">
                        <div align="left">
                            <b>3</b>
                        </div>
                    </td>
                    <td width="42%" valign="top">
                        <b><a href="article.asp?ArticleID=9">Former API chief and Smedvig launch new manager </a></b>
                    </td>
                    <td width="20%" valign="top">
                        <div align="left">
                            &nbsp;Dated:<strong>&nbsp;Summer 2004</strong>
                        </div>
                    </td>
                    <td width="30%" valign="top">
                        <div align="left">
                            Publication:<strong>&nbsp;Investment & Pensions Europe</strong>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
 
<!--

More of this gunk.
      </div></td>
  </tr>
  <br />

-->

    <tr> 
        <td valign="top"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr bgcolor="#CCCCCC"> 
                    <td width="3%" valign="top">
                        <div align="left">
                            <b>4</b>

You also have a lot of extra tags that you don't really need, extra divs, extra tables, what you're trying to do here can be accomplished with a lot less. In fact, a single table would give you identical output presentationally than the several you have going in there. Alot of the attributes that you're using can be either merged with another element or taken out all together and replaced with CSS.

For instance:

Code:

                        <td colspan="2">
                            <table>
                                <tr>
                                    <td>
                                        <img src="image_bin/lineacross.gif" />
                                    </td>
                                </tr>
                            </table>
                        </td>

The extra table there isn't needed at all.

Here's another one:

Code:

                    <td width="3%" valign="top">
                        <div align="left">
                            <b>1</b>
                        </div>
                    </td>

The extra <div> here isn't required, in fact all of this can be done with CSS instead.

Here's what the rule looks like:

Code:

td.count {
    font-weight: bold;
    text-align: left;   /* it's left by default */
    width: 3%;
    vertical-align: top;
}

And the cell itself:

Code:

<td class="count">1</td>

Just some suggestions, try the troubleshooting techniques I mentioned and let us know how it turns out.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Imar · June 29th, 2004, 02:06 AM

FWIIW: Dreamweaver *can* create nice looking indented code like this. You can customize your preferences in the, heh, Preferences dialog, and then choose Command | Apply Source Formatting or Command | Apply Source Formatting to Selection.

You can even go as far as configuring for example that you want <tr> on the next line but directly below the <table> tag like this:

<table>
<tr>

</tr>
</table>

This is something I do to save space.

The possibilities are endless; you have quite some control over how you want line breaks to appear, tabs and case of tags.

You'll find it under Preferences | Code Format.

And if you press Shift+F6 in Dreamweaver, it will validate your code and tells you what's wrong with it.....

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

richard.york · June 29th, 2004, 02:16 AM

lol.. I've tried to figure it out but what does FWIIW stand for?

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Imar · June 29th, 2004, 02:35 AM

It's an alternative for FWIW, but with extended spelling ;)

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

richard.york · June 29th, 2004, 02:41 AM

That doesn't tell me anything ;).. Oh I see now (F)or (W)hat (I)t (I)s (W)orth! It all makes sense. Sorry have to keep up with the abbreviations.

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

Adam H-W · June 29th, 2004, 02:54 AM

Hi Rich

I've followed your examples and hey presto - things have turned out well!

Thanks for all that - I realise now that my code should be spaced out better which makes it easier to follow and I've applied some of the css techniques that you mentioned which have worked too. Thanks very much for all that.

While I do use Dreamweaver, I realise that it throws in an awful lot of rubbish, but I do try to remove most of it. However, it seems that it wasn't enough.

thanks very much

Adam

Imar · June 29th, 2004, 02:57 AM

;) Just kidding.

Yes, I meant For What It's Worth.....

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.