Just so frustrating

It's

text-align:center;

Why is there a gap at the top of the div in ff ?

try changing the declared margins to margin: 0 auto; instead of auto only. this shorthand will replace both of the margin-left and margin-right in your code. It is the same as saying:

margin-top:0;
margin-right: auto;
margin-bottom:0;
margin-left:auto;

or
body{margin:0;}

Hi DAnA,

Thanks for that, it centers ok now. That puts the div right at the top. I still have a space inside the div between the top margin and the text, only in firefox does this gap appear. Is there someway to loose the gap ?

You might want to get a doctype, get all browsers rendering the same

Thanks everyone. Cracked it now. But immediataly met by another problem. This css thing isnt easy is it !!!!!!

What's the next problem?

Ok.

As long as you dont mind , I know you guys get frustrated when we ask too many questions without trying to find the answers ourselves, but I can honestly say I have tried.

I am just learning about div instead of table for design.. My site using tables currently looks like this :

http://homepage.ntlworld.com/lisa.broadley/Fishing%20club%20website/_private/index.htm

I would like to do that without the tables and have got this far

http://homepage.ntlworld.com/lisa.broadley/Fishing%20club%20website/_private/divattempt.htm

I would like to give the menu a navy background but I am struggling.
So far I have styled the li background to navy but that puts background on all the li even the dropdown ones. I then gave the first level li a class of blue with a navy background. This did the trick just about but I had a gap at the end of the menu which stayed white and a small gap at the top between menu and the picture (only in internet explorer).

So I guess my question is :

Is there an easy way to give the first level of the menu a navy background for most browsers as it has in my version using tables.

Thanks in advance

background-color: blue

where ???

on the li or the #centercontent or somewhere else entirely.

If I do the #centerpoint it turns the whole div blue.

Do you think it would be less painful to remove your own eyeballs ?

Ive been trying for 2 hours non stop. I had what I thought was a really good idea of having 2 divs one to hold the topimage and the menu and one to hold the text area. It looks just as desired in IE but when I go to ff its nothing like. Has anyone any spare valium ??? or a few words of encouragement.

Is css really worth the effort or would you just stick with tables ?

http://homepage.ntlworld.com/lisa.broadley/Fishing%20club%20website/_private/divattempt.htm

1. Yes CSS is really worth the effort
2. Don't design in IE... design in FF
3. Validate your CSS

check this for a drop down menu
http://www.cssplay.co.uk/menus/final_drop.html

Hi try

li {
  float: left;
  position: relative;
  width: 5em;
  background:#000080;
  }

Is that what you wanted?

EDIT OOps just re-read, you tried that already.

Add

#nav {
   height:1.2em;
	background:#000080;
	}

Thanks that about does it. It looks right now in FF but in IE there is a tiny whitespace between the menu and picture. From what ive read so far it is better to have it wrong in IE than in ff.

Hi,

I got some help in another forum and appear to have solved the problem.

The answer was

#centercontent img {
display:block;
}

and this article explains simply what the problem was

http://devedge-temp.mozilla.org/viewsource/2002/img-table/

I just love simple articles without too much jargon.

Thanks to you all for your help. Im sure I'll be back again soon .