Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Can't see image on menu bar with ipad, chrome or IE7


  #1  
Old Aug 6, 2012, 03:27 PM
charleshung
 
4 posts · Aug 2012
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!
  #2  
Old Aug 6, 2012, 08:26 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Aug 7, 2012, 04:46 AM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Aug 10, 2012 at 04:47 AM.
  #4  
Old Aug 9, 2012, 02:34 PM
charleshung
 
4 posts · Aug 2012
Thank you for both of your efforts; however, they are not working.
  #5  
Old Aug 10, 2012, 04:49 AM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
please remove the DIV's and put in the CSS I suggested so I can see the results.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Aug 10, 2012, 11:41 AM
charleshung
 
4 posts · Aug 2012
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?
  #7  
Old Aug 10, 2012, 11:44 AM
charleshung
 
4 posts · Aug 2012
Sorry, the correct url are:--

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

http://www.cccjfl.org/wordpress/Wordpress-after.jpg
  #8  
Old Aug 10, 2012, 11:59 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Aug 10, 2012, 06:32 PM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Aug 10, 2012 at 09:21 PM.

Bookmarks

Tags
background image, chrome, ipad, menu bar

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] image do not show up on iPad (Safari) horus79 Center area post/pages 3 May 15, 2012 12:17 AM
Image size in IE7 and Chrome Len Atahualpa 3 Wordpress theme 4 Jun 11, 2009 04:36 AM


All times are GMT -6. The time now is 11:04 AM.


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