The church web address:-- http://www.cccjfl.org/wordpress/?lang=en

Wordpress version:-- 3.3.2

Atahuapla version:-- 3.7.7

Five Custom Links (Home page, English, Simplified Chinese, Traditional Chinese and Facebook) were created on Home menu bar with images; however, they only show on Firefox 3.6.28, Firefox 14.0.1 and IE8. Not on iPad, Chrome and IE7. How can I fix them?


I created the link by log-in to wordpress--> Apprearance --> Menus --> Custom Links and enter the followings to the "Navigation Label" box:--

1. Home Page :--- <div style="background-image: url('http://www.cccjfl.org/wordpress/images/Home.png'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;"></div><!--:en-->My Home<!--:--><!--:zf-->首頁<!--:--><!--:zh-->首页<!--:-->

2. English :-- <div style="background-image: url('http://www.cccjfl.org/wordpress/images/us.jpg'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;"></div>English

3. Simplified Chinese :-- <div style="background-image: url('http://www.cccjfl.org/wordpress/images/cn.png'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;"></div>简体中文

4. Traditional Chinese :-- <div style="background-image: url('http://www.cccjfl.org/wordpress/images/tw.bmp'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;"></div>繁體中文

5. Facebook :-- <div style="background-image: url('http://www.cccjfl.org/wordpress/images/facebook.jpg'); background-repeat:no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;"></div><!--:en-->Facebook<!--:--><!--:zh-->脸书<!--:--><!--:zf-->臉書<!--:-->


Thank you and God Bless!

It seems like you should have the closing </div> after the menu title. As it is now you have an empty div that may not be getting any width in some browsers. That's my guess anyway.

You can't do it that way because you end up with a div inside a span and the browsers are ignoring it. Do this instead, remove the div's and use css like

li.menu-item-1435 span {
background-image: url('http://www.cccjfl.org/wordpress/images/Home.png'); background-repeat: no-repeat; 
display: inline; 
margin: 0; 
padding: 0 0 0 20px;
}

Thank you for both of your efforts; however, they are not working.

please remove the DIV's and put in the CSS I suggested so I can see the results.

I directly input the code into the navigation label under menus in Wordpress tools; please visit www.cccjfl.org/Wordpress.jpg and take a look

Here is the code I input:--

background-image: url('http://www.cccjfl.org/wordpress/images/Home.png'); background-repeat: no-repeat; display: inline; margin: 0; padding: 0 0 0 20px;"><!--:en-->My Home<!--:--><!--:zf-->首頁<!--:--><!--:zh-->首页<!--:-->


The result image is here:-- www.cccjfl.org/Wordpress-after.jpg


I must do it wrong; what is the right way to input the code?