Table conversion problem

dartiss · #1 (**permalink**) Jul 26th, 2006, 13:10

Hi,

I'm attempting to replace tables in my site (bmtg.org.uk) with CSS.

Most of this I've worked out how to do, with the exception of the menu at the top of the screen (take a look at http://www.bmtg.org.uk/index.php as an example).

I thought that converting the table to a DIV and the menu elements within to SPANs would work, but the block-style anchor tags are causing display problems.

Any thoughts on the best way to convert this?

David.

dartiss · #2 (**permalink**) Jul 26th, 2006, 13:42

Ok. Worked it out now - the clue was in my own question

The block anchor tag was the fault.

Anyway, quick question - if you display two items, each within a SPAN tag, they appear with a gap between them. Is there anyway of getting rid of this gap?

David.

moojoo · #3 (**permalink**) Jul 26th, 2006, 13:58

span.foo { margin:0; padding:0;}

<span class="foo">Foo Foo Foo</span>

Or something. I need coffee.

moojoo · #4 (**permalink**) Jul 26th, 2006, 14:00

Or if the spans are in another div you could do #foo span {} and have it automatically apply to every <span> element contained within #foo without having to add a class or id to each span.

dartiss · #5 (**permalink**) Jul 26th, 2006, 14:20

Ok, here's a simple example of what I mean:

HTML: Select all

<a href="#">Test 1</a>
<a href="#">Test 2</a>

This will display the two pieces of text, one after another, but with a gap between them. Because of this gap, when the anchor changes the background colour, it's not doing it for entire box, which I've drawn a border around.

David.

moojoo · #6 (**permalink**) Jul 26th, 2006, 14:23

<a href="#">Test 1</a><a href="#">Test 2</a>

remove the space.

dartiss · #7 (**permalink**) Jul 26th, 2006, 14:39

Ok that was my fault in the cut and paste procedure. Yes I put a space, by accident, between the tags.

Okay, ignore that space and you will still get a gap between the words "Test 1" and "Test 2". This is the gap I'm trying to illiminate.

David.

moojoo · #8 (**permalink**) Jul 26th, 2006, 14:43

When I just put <a href="#">Test 1</a><a href="#">Test 2</a> in the HTML it has no gap in IE or FF. Not sure what to tell you. Can you show me the complete source?

dartiss · #9 (**permalink**) Jul 26th, 2006, 14:48

HTML: Select all

<html>
<head>
<style type="text/css">
A    {color: #ffffff; background-color: #000000;}
A:Hover {color: #000000; background-color: #ffffff;}
</style>
</head>

<body>
<a href="#">Test 1</a>
<a href="#">Test 2</a>

</body></html>

Running this should produce two links, with a white font and black background. Between them is a space - evident because of the gap in the black backgrounds. It's this space I'm trying to get rid of.

David.

dartiss · #10 (**permalink**) Jul 26th, 2006, 17:42

I don't think I've explained this very well so I've knocked something up to do it a bit better. Everything is in-line, so the source is easy to follow (although it is a quick knock-up, so don't expect it to run through a validator first time

).

It can be found here:

http://www.bmtg.org.uk/test.html

Any assistance with this will be appreciated.

David.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Iframe / Table Problem.... help me!!!	bigbluesky2006	Web Page Design	4	Dec 16th, 2006 10:59
Table Problem?	ivan	Web Page Design	8	Mar 1st, 2006 09:31
Table sizing problem	Jaken Veina	Web Page Design	1	Jan 6th, 2006 22:06
CSS and Table problem	lisnalinchy	Web Page Design	10	Aug 3rd, 2005 09:54
Expandable Table Problem	legomaniac	Web Page Design	3	Jul 15th, 2005 14:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Table conversion problem