Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Aia
    Aia is offline
    Junior Member Aia's Avatar
    Join Date
    Aug 2003
    Posts
    3
    Member #
    2895
    Alright, well I'm building a page, but having difficulties with my co-designer: the guy who commissioned this website is trying to do some of the coding himself, which is screwing things up.
    The biggest thing he wants done is to have the space between table rows reduced, but I just can't find any way to do it myself. He tried using Span tags, which kinda worked, but it's messing up the images. Take a look at the sidebar at the bottom left of the page:
    http://www.animeleague.net/momentum
    Can anyone figure out what may be causing the problem, or a better way to reduce the width between rows? I'm competent with HTML and CSS: anything else is kinda out of my grasp. Thanks in advance!

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Whoa.... not sure what you guys are trying to do there, but the code is a bit of a jumble.

    Dump the spans between table elements. That's not valid code, and it will only cause problems with you between browsers.

    Also, I see that you're using both the <span> and the <font> elements... these are essentially the same thing, only for different HTML specs. You might consider eliminating all the <font> tags and creating a stylesheet, replacing your span size values with <span class="big"> or <span class="nav"> with defined classes.

    As for the space between rows, I can't say what's causing it because I don't quite see what you're talking about. If you could post your original file without all the spans, I'll take another look at it. I'd say it's likely an easy fix, though.

    Also, change this: <td width="30"></td> for this: <td width="30">&nbsp;</td> Without the space character in the middle, different browsers will render it differently.

    All in all that's a decent lookin site you've got there. Keep up the good work !!!

  4. #3
    Aia
    Aia is offline
    Junior Member Aia's Avatar
    Join Date
    Aug 2003
    Posts
    3
    Member #
    2895
    Hrmm... I was thinking those SPAN tags weren't right and proper.

    And here's an example of the page before the spans. http://www.animeleague.net/momentum/index2.htm
    See the sidebar on the left? All the links are now spaced further apart while they need to be closer. I *know* the fix has to be really simple...

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I see your problem... it's this:
    Code:
    <td background="images/sidemenu_left.gif">&amp;nbsp;</td>
    Never use spaces as a horizontal spacer... they're inexact and have vertical space too. Change it to this:
    Code:
    <td background="images/sidemenu_left.gif"><img src="images/spacer.gif" width="5" height="1"></td>
    Where "spacer.gif" is a 1x1 transparent gif (example attached).
    Attached Images Attached Images

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Oh, btw... you could actually change your menus around a lot to simplify the source, for instance, change this:
    Code:
          <table width="270" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td><img src="images/1_mainbutton_1.gif" width="270"></td>
            </tr>
          </table>
          <table width="226" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td width="35">&amp;nbsp;</td>
              <td background="images/sidemenu_left.gif" width="6">&amp;nbsp;</td>
              <td background="images/sidemenu_central.gif" class="hoverlinks"> 
                <div align="left"><font face="Arial Narrow, Arial, Times New Roman" size="1" >&amp;gt; 
                  <a class="hoverlink" href="index.shtml"><font size="1">News</font></a></font></div>
              </td>
            </tr>
            <tr> 
              <td width="35">&amp;nbsp;</td>
              <td background="images/sidemenu_left.gif">&amp;nbsp;</td>
              <td background="images/sidemenu_central.gif" class="hoverlinks"><font face="Arial Narrow, Arial, Times New Roman" size="1">&amp;gt; 
                <a class="hoverlink" href="about.htm"><font size="1">About</font></a></font></td>
            </tr>
            <tr> 
              <td width="35">&amp;nbsp;</td>
              <td background="images/sidemenu_left.gif">&amp;nbsp;</td>
              <td background="images/sidemenu_central.gif" class="hoverlinks"><font face="Arial Narrow, Arial, Helvetica, Times New Roman" size="1">&amp;gt; 
                <a class="hoverlink" href="staff.htm"><font size="1">Staff</font></a></font></td>
            </tr>
            <tr> 
              <td width="35">&amp;nbsp;</td>
              <td background="images/sidemenu_left.gif">&nbsp;</td>
              <td background="images/sidemenu_central.gif" class="hoverlinks"><font face="Arial Narrow, Arial, Times New Roman" size="1">&amp;gt; 
                <a class="hoverlink" href="links.htm"><font size="1">Links</font></a></font></td>
            </tr>
          </table>
    To something like this:
    Code:
    <table border="0" cellspacing="0" cellpadding="0">
        <tr> 
            <td colspan="4"><img src="images/1_mainbutton_1.gif" width="270"></td>
        </tr>
        <tr> 
            <td><img src="images/spacer.gif" width="35" height="1"></td>
            <td background="images/sidemenu_left.gif"><img src="images/spacer.gif" width="6" height="1"></td>
            <td background="images/sidemenu_central.gif" class="hoverlinks"> 
                <font face="Arial Narrow, Arial, sans-serif" size="1" >
                &amp;gt; <a class="hoverlink" href="index.shtml">News</a><br>
                &amp;gt; <a class="hoverlink" href="about.htm">About</a><br>
                &amp;gt; <a class="hoverlink" href="staff.htm">Staff</a><br>
                &amp;gt; <a class="hoverlink" href="links.htm">Links</a><br>
                </font>
                <img src="images/spacer.gif" width="185" height="1"><br>
            </td>
            <td><img src="images/spacer.gif" width="44" height="1"></td>
        </tr>
    </table>

  7. #6
    Senior Member
    Join Date
    Aug 2003
    Location
    Melbourne, Australia
    Posts
    162
    Member #
    2563
    &gt; ?????

    What is that?

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    &amp;gt; is HTML special chars representation of greater than (>)

  9. #8
    Aia
    Aia is offline
    Junior Member Aia's Avatar
    Join Date
    Aug 2003
    Posts
    3
    Member #
    2895
    Thanks for the help guys! Helped me get rid of those nasty span tags and squeeze together those rows without that image duplication problem. You were right Transio: it was that spacing.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:07 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com