CSS Compatibility Problem

[theX]

The menu here [home.iprimus.com.au] doesn't display correctly in Netscape or FireFox? Can anyone please suggest alternatives to this issue or any links that might help me.

Thanks in advance ;)

[grahamstewart]

Welcome to WebmasterWorld theX

Please do not post links to test sites or mock-ups. It is against the TOS for this board.

If you post a link and then subsequently fix the problem then no one can benefit from this thread in the future. Instead we prefer to describe the problem and if appropriate post small code excerpts to illustrate it.

Anyways...

A few tips when designing cross-browser CSS:

use a full doctype - one that includes the URL. See the w3c lst of valid doctypes [w3.org]. This will place the browser in 'Standards Compliant' which will make your life much easier. I suggest the HTML4.01 Strict doctype.

always validate your HTML with the W3C HTML Validator [validator.w3.org] and likewise check your CSS with the W3C CSS Validator [jigsaw.w3.org]

develop in a modern standards-compliant browser (Opera 7, Netscape 7, Firefox, IE6 etc) and then worry about older broken browsers (IE5.5)

[theX]

heres the CSS for the menu

#menu {
padding: 0px;
width: 715px;
}
#menu ul {
border-width: 0px;
list-style-type: none;
margin: 0px;
}
#menu ul li {
float: left;
}
#menu ul li a {
border: #ccc 1px solid;
background-color: #fff;
width: 101px;
border-right-style: none;
text-decoration: none;
}
#menu ul li a:hover {
border: #ccc 1px solid;
color: #fff;
background-color: #9cf;
width: 101px;
border-right-style: none;
text-decoration: none;
}

and for the layout

body {
margin: 0px;
}
#page {
padding: 0px;
text-align: center;
}
#header {
padding-top: 10px;
}

[grahamstewart]

And what specifically is the problem you are having?

[theX]

problem solved, got a friend to help :)

[grahamstewart]

Looking at your page it looks like you were having difficulty centering the menu. The correct way to center things in CSS is to use

auto

for the left and right margins.

margin: 0 auto;

Many people mistakenly use

text-align:center

which is only intended to control the position of text, not divs.

Others try the

align="center"

attribute, which will work but it has been deprecated and should not really be used.