buttons look like steps in IE 1

[officemanager2]

Hello: I use firefox and when I put this together it works fine in fire fox, meaning the button row is vertical across the page. When I open in IE the buttons look like steps falling to the right.

@charset "utf-8";
#navbar {
	width:800px;

}

#navbar #holder  {
	height:40px;
	border-bottom:2px solid #f00; /*you may want to remove this  */
	width:795px;
	padding-left:5px;
}

#navbar #holder ul{
	list-style:none;
	margin:0;
	padding:0;
}

#navbar #holder ul li a {
	text-decoration:none;
	float:left;
	margin-right:1px;
	margin-left:1px;
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:13px;
	color:#FFF;
	border:3px solid #f00;
	border-bottom:none;
	padding:11px;
	width:100px;
	text-align:center;
	display:block;
	background-color:#006;
	-moz-border-radius-topleft:15px;
	-moz-border-radius-topright:15px;
	
}

#navbar #holder ul li a:hover {
	text-shadow:1px 1px 1px #000;
	background-color: #F00;
}

#navbar #holder ul li a.GR:hover{
	text-shadow:1px 1px 1px #000;
	background-color: #093;
}

#holder ul li a#onlink{
	background:#FFF;
	color:#006;
	border-bottom:1px solid #fff;
}

#holder ul li a.GR#onlink{
	background:#093;
	color:#FFF;
	border-bottom:1px solid #093;
}


#holder ul li a#onlink:hover{
	background:#fff;
	color:#FFF;
	text-shadow:2px 2px 2px #00f;
}

There could be numerous other problems in this code as well that I'm not aware of, but it works fine in firefox.

Any suggestions for a fix would be great, as well as any other issues that might prove to be a headache down the road.

thanks.

 

[vacunita]

Float the actual list items <li> rather than the links with in them.

#navbar #holder ul li {
float:left;
}

Also if you are using CSS3 declarations such as text-shadow, why use mozilla only hacks for border radius. Use the border-radius property to assign a rounded border.

I8 and below will most likely ignore the CSS 3 declarations, but they'll be in place for CSS 3 compliant browsers to use.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[officemanager2]

Thanks that did the trick. I'll look further into the border-radius property.