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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Spacing between table cells with CSS.

    I'm trying to freshen up my homepage with CSS and some javascripts. I've run into problems with spacing between table cells/rows. My menu consists of images only, and there's a gap between them that I can't get rid of. Here's a link to the menu in question:

    http://home.online.no/~molokken/Menynew.htm

    And here's a link to how it really should look like:

    http://home.online.no/~molokken/Meny.htm

    Any help appreciated.

    Vidar
    Norway

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The most likely cause of your problems was the structure of your datacells (TD). You had the content and closing </TD> broken across new lines and this would add line breaks to the data cell itself.

    eg:
    Code:
          <td align=right valign=top cellpadding=0>
            <a href="./Forside.htm" target="_top" 
               onmouseover="Forside.src='Elementer/Meny/KN1H-Forside.jpg';"
               onmouseout="Forside.src='Elementer/Meny/KN1-Forside.jpg';">
              <img name="Forside" src="Elementer/Meny/KN1-Forside.jpg">
            </a>
          </td>
    If you tightened everything up, your current codes would most likely render as you would like. However

    If you are going thru the trouble to update your codes. You should not use TABLES to control the layout of anything but tabular data. In the case of your menu, you should be using DIV's.

    Below is an example of your menu laid out using DIV's.
    This should give you a start in the right direction.


    <html>
    <head>
    <BASE HREF="http://home.online.no/~molokken/">
    <title>Fritt Fall - Norske Landskap</TITLE>
    <style type="text/css">
    <!--

    BODY {
    font-family: Arial;
    font-weight: normal;
    font-size: 24px;
    color: #B2B2B2;
    background-color: #222222;
    }

    A {
    border-style: none;
    }

    IMG {
    border-style: none;
    }

    .MENU {
    border-style: none;
    margin-width: 0px;
    }

    -->
    </style>
    </head>

    <body>
    <div id="openMenuWrapper" style="top:0;float:right">

    <div class="MENU"><img src="Elementer/Meny/Topp.jpg"></div>

    <div class="MENU"><a href="./Forside.htm" target="_top"
    onmouseover="Forside.src='Elementer/Meny/KN1H-Forside.jpg';"
    onmouseout="Forside.src='Elementer/Meny/KN1-Forside.jpg';"><img name="Forside" src="Elementer/Meny/KN1-Forside.jpg"></a></div>

    <div class="MENU"><a href="./Galleri.htm" target="_top"
    onmouseover="Galleri.src='Elementer/Meny/KN2H-Galleri.jpg';"
    onmouseout="Galleri.src='Elementer/Meny/KN2-Galleri.jpg';"><img name="Galleri" src="Elementer/Meny/KN2-Galleri.jpg"></a></div>

    <div class="MENU"><a href="./Turer.htm" target="_top"
    onmouseover="Turer.src='Elementer/Meny/KN3H-Turer.jpg';"
    onmouseout="Turer.src='Elementer/Meny/KN3-Turer.jpg';"><img name="Turer" src="Elementer/Meny/KN3-Turer.jpg"></a></div>

    <div class="MENU"><a href="./Tema.htm" target="_top"
    onmouseover="Tema.src='Elementer/Meny/KN4H-Tema.jpg';"
    onmouseout="Tema.src='Elementer/Meny/KN4-Tema.jpg';"><img name="Tema" src="Elementer/Meny/KN4-Tema.jpg"></a></div>

    <div class="MENU"><a href="./FrittFall.htm" target="_top"
    onmouseover="FrittFall.src='Elementer/Meny/KN5H-FrittFall.jpg';"
    onmouseout="FrittFall.src='Elementer/Meny/KN5-FrittFall.jpg';"><img name="FrittFall" src="Elementer/Meny/KN5-FrittFall.jpg"></a></div>

    <div class="MENU"><img src="Elementer/Meny/Bunn.jpg"></div>

    </div id="closeMenuWrapper">
    </body>
    </html>


    .....Willy

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    ...hmmm... good advice Willy, but I don't think that's the solution (or all of it). My money's on:

    img {border:0; display:block;}

    I've run into this problem a few times, vidarmol... hope this helps.

    -Rich

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes Rich;

    I do think your method would work. (see here)
    But, that is a workaround, and the point I was trying to make
    was that the image(s) do not belong in a TABLE to begin with.

    .....Willy

    BTW: The codes I posted do work.

  • #5
    New to the CF scene
    Join Date
    Feb 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks.

    Thank you so much for all your help. Really appreciated.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Originally posted by Willy Duitt
    But, that is a workaround, and the point I was trying to make
    was that the image(s) do not belong in a TABLE to begin with.

    BTW: The codes I posted do work. [/B]
    Yeah, I figured you and I both knew the problem was with putting an image in a table-cell. And I totally agree those images shouldn't be put in tables. I guess I was trying to prevent yet another one of those, "why can't I use tables for my layout" flame-ridden posts.


  •  

    Posting Permissions

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