Gaps & Positioning Issues.

[SimonWray]

Hi

I have two CSS issues that I can't resolve as I can't see what is causing the problems. Help & advise much appreciated.

My site is here: http://www.simonwray.dsl.pipex.com/ and it's the index page I'm having a problem with when viewed in both FF & IE.

The CSS is here: http://www.simonwray.dsl.pipex.com/css/style.css.

The page is valid XHTML and the CSS is almost valid apart from a clientwidth expression (as an aside; anyone know how to get this to validate? "width: expression(this.clientWidth > 969? "569px": "auto");")

1. There is a 4px gap between the banner image and the navigation list. The nav is a suckerfish unordered list type and works fine. The image is a straightforward jpg. Neither should have any padding or margins, but I just can't workout what is causing the gap. I can close it by positioning the UL relatively and moving it's top -4px. This then causes issues with the list items in the suckerfish dropdown positioning if a user increases/decreases text size.

2. (Hopefully an easier one) Why is the 'Welcome!' text in line with the navbar? It's in a paragraph of it's own and I can't identify what is causing this flow.

Thanks
Simon

[timdenty]

Hi - as far as the positioning gap goes, I think removing the line break in your code would fix this and remove any spacing in between (like this... <img alt="banner.jpg" title="Site Banner" src="images/banner.jpg" width="880" height="127" /><ul id="nav">)

Looking at the Welcome text, you could start by removing it from within the header element, and you could also try making it a <h1> also.

Hope this helps

[drhowarddrfine]

The expression will never validate because it is not standard code.
EDIT: The header image is aligned along the baseline, which is correct. To get it to align along the bottom of the header you need img{vertical-align:bottom}

[timdenty]

True - the css will not validate with a js expression in there, but it shouldn't affect your website achieving level 1-3 though. If you can find another way of doing the css without an expression, you probably should

[drhowarddrfine]

Your "welcome" is where it is because the nav is floated left allowing enough space for that <p> on the right.

[SimonWray]

All sorted now - thanks for the help.

Simon