CSS Button Layout not working in Firefox

some notes:
cursor: hand -> cursor: pointer
background-position: 0px top -> background-position: 0px 0px

onmouseover="this.src='bla'" -> onmouseover="this.style.backgroundImage='url(images/button_bla)';"

with the display: none; at the end of the style you hide the P-elements within the buttondivs.

check these things first.

Thanks Desdinova for those items.

Firefox still doesn't show though.

You, er, might want to get a doctype?

/awaits "what's a doctype"

I have added a doctype of ...
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

I tried a doctype of -- !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" --
and both IE and Firefox acted the same at that point, where neither showed the buttons.

I will admit that I don't know too much about doctype. I think it tells the browser what version of HTML to use when rendering, though I really don't understand all the differences.

I have added the above suggestions to get the following code so far ...

Buttons

This is not a complete doctype. It isn't good enough.

And this one is valid and full. Check the link in my sig.

i tried your code on my computer. does not work in ie7 or firefox.

you have your "buttons" display: inline; yet you dont have any content in them, so they collapse.

take out display: inline;

your javascript works.

so to get your buttons to be next to each other use "float"

I was just at A List Apart reading about doctypes

I have changed the doctype to -- !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" --

Now both IE and FF work in the same way, where they don't show the buttons at all, but at least they are consistent in what they are doing.

Again, I appreciate all the help and all the steps to get through to the solution.

This is why it's so important for you to have one

Thanks vinhboy !!!!

I removed the display: inline and used floats.
** The buttons are now appearing in both IE and FF !!!!

I had to create a containing div to float it the way I wanted (in order from left to right: previous button, spacer, next button, spacer, cancel button) while keeping the button divs in place.

Thank you all for all your help in fixing this, you are the best!!!

Below is the updated and final code for reference...

Buttons

That code is awfully bloated, and you shouldn't really be using spacers

thepineapplehead, I will take your advice and remove those spacers. I am accepting that I can do more and more with CSS and I thank you for reminding me of it

I removed the spacers and the spacer style, and added margins of 5 to the button styles to give me the space I need.

This code below seems to work and I think it is better like this... I would say this section is probably resolved.

Thanks again !!

Buttons

You can get rid of the javascript mouseovers entirely, too.

Look on www.alistapart.com for the "Sliding Doors of CSS" article, see if that gives you some pointers

I am trying to do them without anchor tags, and mouseovers are the only way I know how to do it.

I searched for different ways within css, such as ":hover" but I read that IE doesn't support hover for elements other than anchors.

exactly, that's why you use anchors.

an anchor has display: inline; by default. setting it to display: block; will give you all the freedom of the world for styling it. however, block will also cause the elements to be dropped underneath each other, which isn't always what you want. that's why you use float. float always makes the element block-level, giving you the ability to style it as you see fit.

this way you can use the :hover pseudo, _and_ you can style it exactly the same way as you did with the div's right now.

remove the P elements within (since P may not be within A) and set something like text-indent or font-indent (I can't remember) to -100px;, add overflow: hidden;. this should remove the text when the CSS is active, and should leave the text neatly within the anchor when CSS is disabled.

Why? It's a link to the previous page, that's what anchors are for.

can you guys have a look at www.atdeganwy.com? It works fine in IE but the buttons flicker like made and you have to click several times in Firefox to get the links to work