Another lines problem

Associate
Joined
5 Mar 2007
Posts
649
Location
London
I can't be bothered to do it myself (though the problem seems trivial enough [margin and padding issues,]) but learning to debug CSS layouts is an invaluable skill. Install the Firefox Web Developer Toolbar extension (if you haven't already) and use its CSS controls to find the offending elements.

Code:
* { border: 1px solid #f00; }

is also a good start.
 
Soldato
Joined
18 Oct 2002
Posts
5,464
Location
London Town
psyr33n said:
Code:
* { border: 1px solid #f00; }
is also a good start.
That's likely to cause more problems than solutions since it increases box dimensions and so, particularly for new users, it'll make debugging positioning issues much more confusing. Though, indeed, the Web Developer extension's Outline functions are a much better option as they don't affect dimensions.

As to the issue at hand:
Code:
#left img { display: block;}
However, you should really be adding layout graphics with CSS i.e. as background images. Try and keep presentational elements out of your markup, and use CSS for all your layout and style.

I'd also recommend cleaning up your code, as there are a few spurious elements that may bring up problems further down the road - such as the multiple doctype declarations throughout the first page.
 
Associate
OP
Joined
1 May 2006
Posts
810
Location
Bristol, UK
Thanks guys, I installed the FF Web Developer ext. fantastic!
Augmented, thanks a bundle for your help there mate. That worked a treat

What you said about including layout images in the CSS makes sense. Do you have any links to tutorials that would enable me to do this?
Edit: obviously one would use the background-image property. But for this particular site the site needs to take up the whole width of the browser window. Therefore I cannot create an image 600x600 for example to stick behind the 'content' div, hence all the images scattered all over the place lol.

Cheers
 
Last edited:
Associate
Joined
5 Mar 2007
Posts
649
Location
London
Naturally I tested the rule before recommending it. :p

But for quick help on diagnosing a problematic area, it usually suffices quite well (especially seeing as IE doesn't have an equivalent to the web dev toolbar.)
 
Back
Top Bottom