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).
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.
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!
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.