• [ Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still – use the pastebin ]

    I’m setting up links to our growing gallery at http://www.penuelscouts.org.uk/penuel-pictures/ – as you will see I’ve managed to create a grid so the links are nicely aligned, but what I’d like to do is make the actual gridlines invisible, so all you see are the camera icons and text.

    The code I’ve used for this layout is as follows:

    <table border="2">
    <tbody>
    <tr>
    <td style="text-align: center;"><span class="Apple-style-span" style="color: #78a22f; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 12px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px;"><a title="JOTA 2009" href="http://www.penuelscouts.org.uk/penuel-pictures/jota-2009/" rel="attachment wp-att-653"><img class="size-full wp-image-653 aligncenter" style="border-style: initial; border-color: #78a22f; cursor: default; border-width: 0px;" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon.jpg" alt="" width="28" height="29" /></a></span></td>
    <td style="text-align: center;"><img class="aligncenter" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon.jpg" alt="" width="28" height="29" /></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-3/" rel="attachment wp-att-683"><img class="aligncenter size-full wp-image-683" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon2.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-4/" rel="attachment wp-att-684"><img class="aligncenter size-full wp-image-684" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon3.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-4/" rel="attachment wp-att-684"><img class="aligncenter size-full wp-image-684" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon3.jpg" alt="" width="28" height="29" /></a></td>
    </tr>
    <tr>
    <td style="text-align: center;"><a title="JOTA 2009" href="http://www.penuelscouts.org.uk/penuel-pictures/jota-2009/">Jota 2009</a></td>
    <td style="text-align: center;"><a title="Festival Park Cleanup 2011" href="http://www.penuelscouts.org.uk/penuel-pictures/festival-park-cleanup-2011/">Festival Park
    Cleanup 2011</a></td>
    <td>Awaiting gallery</td>
    <td> Awaiting gallery</td>
    <td> Awaiting gallery</td>
    </tr>
    <tr>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-5/" rel="attachment wp-att-686"><img class="aligncenter size-full wp-image-686" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon4.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-6/" rel="attachment wp-att-687"><img class="aligncenter size-full wp-image-687" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon5.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-7/" rel="attachment wp-att-688"><img class="aligncenter size-full wp-image-688" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon6.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-9/" rel="attachment wp-att-690"><img class="aligncenter size-full wp-image-690" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon8.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-10/" rel="attachment wp-att-691"><img class="aligncenter size-full wp-image-691" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon9.jpg" alt="" width="28" height="29" /></a></td>
    </tr>
    <tr>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    </tr>
    <tr>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-11/" rel="attachment wp-att-692"><img class="aligncenter size-full wp-image-692" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon10.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-12/" rel="attachment wp-att-693"><img class="aligncenter size-full wp-image-693" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon11.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-13/" rel="attachment wp-att-694"><img class="aligncenter size-full wp-image-694" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon12.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-14/" rel="attachment wp-att-695"><img class="aligncenter size-full wp-image-695" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon13.jpg" alt="" width="28" height="29" /></a></td>
    <td style="text-align: center;"><a href="http://www.penuelscouts.org.uk/penuel-pictures/camera-icon-15/" rel="attachment wp-att-696"><img class="aligncenter size-full wp-image-696" title="Camera Icon" src="http://www.penuelscouts.org.uk/wordpress/wp-content/uploads/2012/07/Camera-Icon14.jpg" alt="" width="28" height="29" /></a></td>
    </tr>
    <tr>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    <td style="text-align: center;">Awaiting gallery</td>
    </tr>
    </tbody>
    </table>

    But I cannot see where in the code the actual lines of the grid are defined. Can anyone tell me what I’m missing?

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Invisible Grid’ is closed to new replies.