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
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!
  #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,728 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,728 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?

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 07:39 PM.


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