CSS Div problem

[Floodster]

I have created my site using CSS (I'm still fairly new to CSS). My page basically contains 4 DIVS in this order;
<Div id="Main_nifty">

div#main_nifty {
	position: relative;
	background-color: #A0D6A4;
	width: 900px;
	height: auto;
	margin: 40px;
}

<Div id="menu">

div#menu{
	position: relative;
	margin: 0;
	background:#A0D6A4;
	float: left;
	overflow: auto;
	height: auto;
}

</Div> 'this closes div#menu

<Div id="container">

div#container{
	position: relative;
	background:#A0D6A4;
	float: left;
	width: 650px;
	height: auto;
	margin: -400px 0px 0px 105px;
	overflow: auto;
}

<Div id="bottom"

div#bottom{
	position: relative;
	background:#A0D6A4;
	margin: 20px 20px 20px 20px;
	color: #A0D6A4;
}

</div> 'close container
</div> 'close bottom
</div> 'close main_nifty

My 2 problems are firstly this doesn't work in Firefox?? & secondly when <div id="container"> height expands it makes <div id="bottom"> disappear???

The site is

http://www.mbgolfsociety.co.uk

if it makes it easier to understand.

Many thanks in advance.

 

[ca8msm]

Am I correct in thinking that I would need to create a .hover element for each menu item?

Nope. You'd just create one hover entry for the anchor tag and then it would be applied to every anchor.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Floodster]

ca8msm;
but each menu item has 2 different images, 1 for onmouseout & 1 for onmouseover. i.e menu1_off.gif, menu1_on.gif, menu2_off.gif, menu2_onn.gif etc, etc.
As I say I need to read up on this so forgive my ignorance on this topic.
Thanks.

 

[ca8msm]

That in itself is over-complicated IMO. There's no reason you couldn't use text instead of an image for each menu item and simply use one hover tag to change the text colour.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Floodster]

Ok so if I use previous suggestions of doing my menu in a list & replace the text images with normal text with the hover tag I might be getting somewhere. There's no problem with keeping the graphics image next to each menu item is there??
thanks.

 

[Vragabond]

Take a look at your rollovers. Only the colour of the text changes and the underline appears. That is not much of an effect. Of course, if you want to keep the image (for the font's sake) and want to do an intelligent rollover, there is a solution. A rollunder. Edit your pictures and make the black text transparent colour. On hover, change the background of the element from black to white. Voila, rollovers like you wanted them with only one set of pictures.

 

[Floodster]

I was referring to the 'golf ball' image. I'm not precious about the font but I do like the suggestion of the 'rollunder', fantastic suggestion.

Thanks.

 

[Vragabond]

Surely the ball can stay. I suggest you visit the site I posted earlier and see all the different list solutions for the menu. There are such that include a picture up front, even such that have a picture changing on rollover. I personally would go for that kind of solution.