[sarahk]

I'm trying to convert a table design to CSS because I believe the underlying scripts will be easier to write that way.

I've got a page http://www.apia.org.nz/ivite/css.html with my CSS design at the top and the table design at the bottom. They're close enough to make me happy.

In IE6 it looks great but in Mozilla the tabs on the horizontal menu are very broken. I can't see any obvious workaround so thought I'd ask here.

The relevant parts of the CSS are

body{
	text-align: center;
}

div#ivite{
	width : 700px;
	text-align: left;
}

div#navbar2 {
	background : url(images/navliner.gif) repeat-x bottom;
	height : 30px;
	text-align : right;
}

div#navbar2 li {
	background : url(images/Active.jpg);
	display : inline;
	font-size : 14px;
	font-weight : lighter;
	height : 100%;
	list-style-type : none;
	text-align : center;
	width : 98px;
	xline-height : 30px;
	xvertical-align : middle;
}

div#navbar2 li a {
	background : url(images/Inactive.jpg);
	color : #333333;
	font-weight : bold;
	height : 100%;
	text-decoration : none;
	width : 98px;
}

div#navbar2 li a:hover {
	background : url(images/Active.jpg) no-repeat;
	text-decoration : underline;
	width : 98px;
}

div#navbar2 ul {
	font-family : Arial, Helvetica, sans-serif;
	line-height : 30px;
	margin : 0px;
	padding : 0px;
	white-space : nowrap;
}

Can anyone see what I need to change?

[Stickman]

div#navbar2 li {
background : url(images/Active.jpg);
display : inline;

Should be display:block. The buttons might stack vertically so you'll probably also need to float them.

[Stickman]

http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/

[sarahk]

thanks Stickman

Yes, they stacked vertically! but the float worked it out.

However, only for IE! Mozilla is worse than ever because now they're the wrong size AND they overlap.

Sarah

[sarahk]

That looks cool. thanks

[Static]

you should try making it for mazilla first it been the most pecific browser then it will work in IE =P

[Stickman]

Not sure what you mean as the tabs look alright here (in mozilla firefox).

The simplest method - and best way to learn - is to start with code that works and then edit that to fit your design. Try using something like http://css.maxdesign.com.au/listamatic/horizontal18.htm as a start point.