New to CSS - Help Please

[Leitchy]

Hello all o/

I am one of these old table layout users that hasn't done a website for 2/3 years, and just nipping back into the game to help a friend. I've researched a lot into CSS and began the build of the website. Though I'm coming into a few problems that my head can't quite sort out yet, and those croos browsers woes that I'm sure you have heard many a time before (My website looks fine in Firefox, but not IE6).

The website is being hosted at http://www.leitch-designs.co.uk/airinflatables, and I have validated the CSS and XHTML so hopefully that won't be the cause.

The Problems:

I can't seem to get the layout to start at the very top of the browser window, so there is no gap at the top where the image starts. Also, I want the bottom of the site to stick to the bottom of the browser window so there is also no gap, just constant white. Any idea's?

The navigation bar I have tried to position 10px from the edge of the layout (margin-left:10px) though IE6 wants to put it further away that Firefox does. This positioning error also happes on that Sales information text, where Firefox displays it correctly, though ie6 positions it higher.



My CSS will no doubt be a bit messy with this being my first time round, and what I think is a moderatly difficult layout to style though any help is appreciated!!!!

p.s. the header image is just a placeholder for the final artwork, the dimensions are correct though!

 

[furnace]

Hello all o/

Hi

I am one of these old table layout users that hasn't done a website for 2/3 years, and just nipping back into the game to help a friend. I've researched a lot into CSS and began the build of the website. Though I'm coming into a few problems that my head can't quite sort out yet, and those croos browsers woes that I'm sure you have heard many a time before (My website looks fine in Firefox, but not IE6).

They both look pretty similar to me in IE6 and FF? Only differences are text positions?

The website is being hosted at http://www.leitch-designs.co.uk/airinflatables, and I have validated the CSS and XHTML so hopefully that won't be the cause.

Good stuff, always the first place to start

I can't seem to get the layout to start at the very top of the browser window, so there is no gap at the top where the image starts.

In CSS you can modify actual HTML tags. I see you've done that, actually. Anyway, the body {} bit, set margin to zero - the page by default will have a margin so your text isn't right against the sides of the viewport. So yeah, margin: 0px; will get rid of the margin

Also, I want the bottom of the site to stick to the bottom of the browser window so there is also no gap, just constant white. Any idea's?

This is a tricky problem, I find. I've solved it before now by having a white background image repeating vertically, centrally. But now I've come to the conclusion that you shouldn't force a complete verticle column - I think it looks better if you dont If you have a tall screen, it could look silly ...

The navigation bar I have tried to position 10px from the edge of the layout (margin-left:10px) though IE6 wants to put it further away that Firefox does. This positioning error also happes on that Sales information text, where Firefox displays it correctly, though ie6 positions it higher.

Try, in #header ul, setting padding: 0px and margin: 0px; ... if they're not manually set, firefox and IE6 may have different default values.

Sometimes though, it's simply that IE6 is bad at rendering things!

Give that lot a go and see if it fixes anything