Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Can't see image on menu bar with ipad, chrome or IE7 (http://forum.bytesforall.com/showthread.php?t=18127)

charleshung Aug 6, 2012 03:27 PM

Can't see image on menu bar with ipad, chrome or IE7
 
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!

lmilesw Aug 6, 2012 08:26 PM

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.

juggledad Aug 7, 2012 04:46 AM

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
HTML Code:

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;
}


charleshung Aug 9, 2012 02:34 PM

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

juggledad Aug 10, 2012 04:49 AM

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

charleshung Aug 10, 2012 11:41 AM

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?

charleshung Aug 10, 2012 11:44 AM

Sorry, the correct url are:--

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

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

lmilesw Aug 10, 2012 11:59 AM

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.

juggledad Aug 10, 2012 06:32 PM

change your code from
HTML Code:

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
HTML Code:

<!--:en-->My Home<!--:--><!--:zf-->首頁<!--:--><!--:zh-->首页<!--:-->
and add the CSS I suggested you to add and see what happens


All times are GMT -6. The time now is 02:09 PM.

Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.