CSS for the top menu button.

Hi,

I have a website using css. But it seems cannot display in the same format in IE and FF. Hope someone can help me. My site: http://www.cabin.com.my/

The top menu is correctly display in IE. But the top menu in FF doesn't.
Part of my CSS as below:

#menuTop {
	/*float: left;*/
	/*list-style: none;*/
	margin: 0;
	padding: 0;
	background-image:url(./images/menu_line.jpg);
	background-repeat:repeat-x;
	width:100%;
	
}

#menuTop ul {

}

#menuTop li {
	/*display:inline-table;*/
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	
	width:119px;
	height:39px;
	
	/*margin: 0;
	padding: 0;*/
	text-align:center;
	
	display:inline;
	
	
}
#menuTop li a {
	background-image:url(./images/bg_menu.jpg);
	background-repeat:no-repeat;
	color: #FFFFFF;
	font-size:12px;
	margin: 0;
	text-decoration: none;
	width:119px;
	height:39px;
	font-weight:bold;
	padding-top:15px;
}

#menuTop a:hover {
	background-image:url(./images/bg_menu.jpg);
	background-repeat:no-repeat;
	color:#347AAE;
	text-decoration:underline;
}	

PHP:

Below is my php file:

<div class="leftText">

<ul>
	<li><a href="./cabin_office.php">Office/Worker Cabin</a></li>
	<li><a href="./cabin_guardhouse.php">Guard House Cabin</a></li>
	<li><a href="./cabin_toilet.php">Toilet Cabin</a></li>
	<li><a href="./cabin_store.php">Store Cabin</a></li>
</ul>
</div>

PHP:

Hope someone can show me the way to correct it.
You help would be appreciated.

 

try using ../ instead of ./

 

Doesn't work.
I try background-image:url(../images/bg_menu.jpg);
It's still the same.

If you open the site in FF. You will notice the button background is actually came out. But no align nicely.

 

hey there, I use a mac so I cant test the site in IE but I think you problem is the padding in the #menuTop li a ------ Try to paste in what i have below

#menuTop li a {
	background-image:url(../images/bg_menu.jpg);
	background-repeat:no-repeat;
	color: #FFFFFF;
	font-size:12px;
	margin: 0;
	text-decoration: none;
	width:119px;
	height:39px;
	font-weight:bold;
	padding-top:4px;
}

Code (markup):

-Pilot

 

Nope.. It doesn't help.

No idea how can i solve it. It have problem in FF, but not IE.
Anything to do with the display attributes?

 

I got the solution already. And it worked! Css as below:

#menuTop {
margin: 0;
padding: 0;
width:100%;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

#menuTop ul {

}

#menuTop ul, #menuTop li {
display:inline;
}

#menuTop a:link, #menuTop a:visited {
background-image:url(./images/bg_menu.jpg);
background-repeat:no-repeat;
float:left;
font-size:12px;
text-decoration:none;
color:#FFFFFF;
margin:0px;
padding:13px 0px 13px 0px;
width:119px;
text-align:center;
}

#menuTop a:hover {
color:#347AAE;
text-decoration:underline;
}

 

Cool, glad you got it