Help with part of my CSS design

[7724]

Hi Guys,

I’m having a few problems with my CSS site that I would be very greatful for help on.

The site can be found http://www.thisisslough.com/stfc/index.html. The problem I have is with Firefox. The site displays correctly apart from two things:

1) In the content boxes that read: ‘Slough Town Manager Eddie Denton will be’ the text displays with huge gaps between the lines
2) The ‘Read More’ button does not appear directly below the text – it appears half way down the page (note – both of these work fine in IE).

Also finally for my site I want to display the site in a rounded box around the outside – ie the current content fitted into in a rounded box like http://www.thisisslough.com/corners/index.html:

1) But I’ve looked at several tutorials and I can’t understand how this works incorporated with the current CSS design.
2) The corners if saved as transparent gif’s appear distorted against the background.

Can anyone please advise?

Many Thanks

Chris

[drhowarddrfine]

You have 33 html errors. Most are just alt tags but you are missing several end tags.

[7724]

Thanks - I am aware of this, but this is not my live website. I just want to get the viewing layout right first.

Before the site goes live i'll be making sure it meets w3c standards. But anyone got any suggestions for my problems above?

[KiwiJohn]

I think what drhowarddrfine is trying to say is that the missing end tags may be what is causing your problem. Fix them first and then, if the problem still exists, ask again.

[7724]

Thanks John,

But none of these errors have anything to do with the layout problems I have.

As drhowarddrfine rightly says nearly of them are missing Alt tags. I want to get the layout right (the difficult bit) correct first then I can do the validation before my site goes live. Getting the site W3C'd is the easy bit!

So any ideas?

[Tyssen]

The read more button is getting cut off because you've set a height on those boxes and because the text is spaced out it's pushing the button down too far. I haven't looked at what's causing the extra space yet because you really should be formatting that text better. The headline should go in a h1-h6 tag and the text should go in a <p>, not a span. Then, I'd think it would just be a matter of setting the line-height on .middlebox p. Also, you don't really need a left and right middlebox class - just apply the same class to all of them and float them all left.