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?

Sorry, the correct url are:--

http://www.cccjfl.org/wordpress/Wordpress.jpg

http://www.cccjfl.org/wordpress/Wordpress-after.jpg

How about turning on classes for the menu via "Screen Options" at the top of the menu page and then use the CSS code in CSS Inserts. That may not fix the issue but would make the menu a bit easier to handle.

change your code from

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-->首页<!--:-->

to

<!--:en-->My Home<!--:--><!--:zf-->首頁<!--:--><!--:zh-->首页<!--:-->

and add the CSS I suggested you to add and see what happens