Need a little help with Text Settings in .Css...

Hello Again,

My new site design for www.everything.ie is finally coming together mostly due to the great help I've been getting here.

The next little problem I need help with is this.

Have a look here first:

http://www.grahamvard.com/everything.html

Look at the headings for the catagories (grey background with red writing).

I'm trying to replicate them on my test site but can't quite get it right.

Look here to see my attempts:

http://www.eveythingfree.buildtolea...fieds/index.php

It's basically alright but I want to make the grey headings boxes bigger so they occupy almost the full width of the 3 columns just like in the example page.

Because this part of the page is controled by a php script which generates the text and layout, the only thing I can alter is the style sheet in this case the heading font, .cfmaincat

Here's the piece of the .css that controls the heading:





I can't work out what I need to change to fix this, I really hope some of you can. I'm sure it's fairly straightforward, I just don't know what to do.

I tried increasing the padding but because the length of words of the heading vary, so too do the grey boxes generated this way. I need them to be all the same size, like in the design example.


Many Thanks,
Robert

Hi

i have just had a look at your site, i think the problem maybe that you are using tables, try using lists instead.

look at this example, this works best in ie6 but should be ok in most browsers.

URL

the css is in

URL

this was only something i did for college but it might help.

Nelson

No, while tables are the devil, they aren't causing the problem. You shouldn't be able to resize a <span></span> like that. You'd probably get better results wrapping them in div's. Also, I'd suggest making your columns a set width, since the rest of the main content area is a set width as well.

What I mean is, your main content area is set to 706px wide. So, you can work within this range. Fo rthe three columns, just make each 200px wide. That way, you have 106px to play with for padding, etc. Center those columns, and you're good to go.

I'd make a new table, center it in your content area, and then make your three columns and just play with the cell-spacing until you're happy. Once you have a set width for your columns, you can set the width for the .cfmaincat divs, making your job a whole lot easier.

Hope this helps!

P.S. you can get rid of the <b></b> from your category headers by adding "font-weight: bold;" to you .cfmaincat class. Also, making the <span> AND the <a> tag have the same class is redundant.