Webmaster Forum / HTML, CSS, Scripts / CSS / June 2003

I've pinched a CSS-P layout from the web (from glish, bluerobot or
suchlike), and I'm customising the basic layout.

I'm developing it on IE6, but testing with Opera 6.04 and Netscape
6.2.3.

The URL is www.aif-advocacy.org.uk/new/index.asp

The CSS is www.aif-advocacy.org.uk/new/aif.css

The first problem is with the header; in IE6, there is a gap beneath
the two images which I dont want to see. If I remove the tags that
centre the text image, the gap disappears, but obviously the image
isnt displayed right.

This same design shows differently in the other two browsers: in
Opera, the gap is above the images, and in NS, it appears to be as
intended.

In NS & Opera, there appears to be a 15-20px gap between the
horizontal menu and the central content area, but not in IE6

And finally, in NS & IE6, the first logo has a border (presumably due
to the surrounding <a> tag), but opera doesnt. Which is the correct
behaviour? I can change this in a number of ways, eg add
'img{border:0;}' to the CSS, but what is the preferred approach.

My design goals are to produce a standards compliant, CSS-positioned,
Accessible site or as near to it as possible, but I'm continually
stumbling over problems and I'm never quite sure if my approach is
wrong or if the browsers are simply misbehaving...

Thanks in advance