css navigation bar

It looks like contrasthost.com uses background-images for the anchor tags. When hovering over the links, the background-image and the border color are changed using the a:hover pseudo class.

This site has some CSS sample code that you might want to look at. Some of them are doing exactly what you're describing.

I have now got the basics of what I need...
I've got a mock page working on my own computer

I just need to come up with some decent background images, and other graphics.

Ok... I have a test layout working (one page only)
http://www.getyouhosting.com/newdesign/

I still need to work on the graphics side of it. ie make it more a proper scheme. I will do once I have the layout working properly

I am stuck on getting it to lay out correctly cross-browser.
it looks different in internet explorer, than in firefox.

The 2 things that are wrong are the positioning of:
The area directly under the top navigation bar.
The bottom right rounded corner of the white background.

The images are here:
http://www.getyouhosting.com/newdesign/images/

The css file is here:
http://www.getyouhosting.com/newdesign/style.css

nobody able to help?

I looked at it and saw the differences.
Then I tested it locally and it seems that the divs with the classname 'clear' take up the space in IE.

That has sorted the top content section under the nav bar.
I have drawn a green border on the graphics to make it more obvious if it is fitting, which it does now fit.

The 2 other problems that still remain are:
spacing above the text 'welcome to our site' , is missing in firefox but correctly shown in internet explorer. (they are 2 tags)

The rounded corners of the white background, are aligned with the top of the bottom navigation bar in firefox, but are in the correct place with internet explorer.

I've uploaded the changes.

About the spacing above the welcome, I'd define a top margin or padding in the div that has id 'main_content'.

And now onto the menu bar : I see that you have the same id for both the top and bottom menu bar. Since id's should to be unique, I'd suggest you might want to rename one of them or change the id attribute into a class. Although I don't think that's causing the misplacement of the menu bar, I'd still change it. I'm not sure what the real cause is for the misplacement, but I've played around with the padding in #container and that changed the appereance in FF.

Furthermore, in IE I see a very small 'Logo goes here', that doesn't show up in FF.

I'll make the id's unique... the bottom will have different graphics than the top anyway.

will try changing the padding in #container and see what happens.

i've noticed that the 'logo goes herel' text appears in ie. I don't know why it does.

I will remove the tags and replace them with some padding or margin etc. for the div they are in.

I cannot do any work on it at the moment as i'm at work, posting this using my XDA Exec. I will work on it tonight or in the morning.

I've sorted the logo text.

I still get the same outcome for the space above the 'welcome to our site' text if it is either padding margin or tags.

The bottom will work if I put some text in the page directly under it, but I cant get it to work without it.

Anyone have any further suggestions?

Thought i'd change how things are constructed...
I have changed the white rounded box. it is now seperate top and bottom parts.
The cyan background is there to show where the #content section is getting put.

I still have layout problems

Perhaps put the bottom navbar inside the content area?
Just guessing...

tried that a good number of times.
doesn't work.

changed it to be with the content area, but still does not work.

The only way to get it to be right, is to put some text under the bottom navbar...
So I have put copywrite message and terms links etc under it.
I have modified the graphics too (they still need some work) and I have added a couple of other things too.

getyouhosting.com/newdesign