You are missing some ‘ <===apostaphe’s in your styles
(‘img/BRNSTRMRCBR1.jpg’) = ok
(img/cansoblister4.jpg) = not
(img/LancasterRadio1.jpg) = not
(img/prop.jpg) = not
Also check the source code of the page and see if the HTML for it is there. If it is, and the item is not displayed where desired, that may be an associated CSS issue (size of main container width or height, perhaps a stack up of the inner elements each needing to be less wide).
Edit: see site now..
The other two items also are 3910 and 3312 (left to right), 816,817,818,3910,3312
#menu-footer-navigation li.menu-item-816 a{background:url('img/BRNSTRMRCBR1.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-817 a{background:url('img/cansoblister4.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-818 a{background:url('img/LancasterRadio1.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-3910 a{background:url('img/fix_this_one_file_name.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-3312 a{background:url('img/prop.jpg') no-repeat top center;}
The fourth item needs a file defined, the 5th item is way too big, it is 1105px x 997px http://pbycatalina.com/wp-content/themes/Catalina_twentytwelve/img/prop.jpg
Thread Starter
der1
(@der1)
Thanks Folks…. I have applied the suggested changes above but still no joy…. I do not understand your comment…. “Also check the source code of the page and see if the HTML for it is there. If it is, and the item is not displayed where desired, that may be an associated CSS issue (size of main container width or height, perhaps a stack up of the inner elements each needing to be less wide)”…..
I would have no idea what should be in the HTML or what a CSS issue might be and as to the stack up of elements .. well now. Ask me about ADF’s, VOR’s and a ils approach and I’m your man but I am not so clever when it comes to this apparently. But then..I once was because I got the first three to place and show properly in the footer.
I am open to suggestions and help as to where else I may not be looking that I should be.
Oh and I have dropped the prop.jpg file size to 50×42 (maybe to small)
Gets off his bicycle and tries to help some more…
You cannot style content that is not output, that is available to be rendered with CSS.
Here is the current HTML:
<nav id="site-footer-navigation">
<div class="menu-footer-navigation-container"><ul class="nav-menu footer-menu" id="menu-footer-navigation"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-816" id="menu-item-816"><a href="http://pbycatalina.com/project-acknowledgments/">Credits</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-817" id="menu-item-817"><a href="http://pbycatalina.com/tcps-copyright-permissions/">Copyright</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-818" id="menu-item-818"><a href="http://pbycatalina.com/contact-us/">Contact</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3910" id="menu-item-3910"><a href="http://pbycatalina.com/tcps-faq/">FAQ</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3312" id="menu-item-3312"><a href="http://pbycatalina.com/login/">Log In</a></li>
</ul></div> </nav>
So all 5 items are being output in HTML (review how we post here, it is often to also help others with similar issues, so we may include clarifications).
Now, this is what is currently is CSS:
#menu-footer-navigation li.menu-item-816 a{background:url('img/BRNSTRMRCBR1.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-817 a{background:url('img/cansoblister4.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-818 a{background:url('img/LancasterRadio1.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-3910 a{background:url('img/prop.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-3921 a{background:url('img/prop.jpg') no-repeat top center;}
Please compare to above.
img/prop.jpg also is still same dimensions.
Thread Starter
der1
(@der1)
My bicycle has training wheels. Thanks your for your infinite patients and great coding advice. I have reduced the icon picture and can actually see the top of it colouring the words TCPS FAQ in the footer using the code below. But somewhere a year or so ago in all the code etc I placed a ref to resizing each icon photo to fit the word space in the footer. http://www.pbycatalina.com
The HTML now reads
http://pastebin.com/iZ8UZaWX
which I believe matches my Styles CSS below now
I do not have a icon photo for the log out as yet, hence the empty spot.
#site-footer-navigation{background:#ccc;}
#site-footer-navigation li{display:inline;}
#pmpro_levels_table thead tr th:nth-child(4){display:none;}
body.home .entry-header{display:none;}
ul#menu-footer-navigation{width:100%;height:85px;}
#menu-footer-navigation li{min-width:50px;height:50px;margin:10px;position:relative;top:55px;}
#menu-footer-navigation a{width:100%;padding-top:50px;}
#menu-footer-navigation li.menu-item-816 a{background:url('img/BRNSTRMRCBR1.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-817 a{background:url('img/cansoblister4.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-818 a{background:url('img/LancasterRadio1.jpg') no-repeat top center;}
#menu-footer-navigation li.menu-item-3910 a{background:url('img/prop2.jpg') no-repeat top center;}
I seem to be forgetting one or more other locations that input is required to re-size the image. The other three icon images are roughly the same size as the prop2.jpg photo and I think are re-sized through code to fit.
Any idea’s?
BRNSTRMRCBR1.jpg
Dimensions 34 × 43
cansoblister4.jpg
Dimensions 45 × 34
LancasterRadio1.jpg
Dimensions 52 × 37
prop2.jpg
Dimensions 415 × 367
Can’t you just scale the image with your desktop image software to about 50px square? Wait, I already did : http://pioneervalleywebdesign.com/images/prop2.jpg
Right click the image, download it, then FTP it up to site to same folder as is now and overwrite:
/wp-content/themes/Catalina_twentytwelve/img/prop2.jpg
When I replace that image with anyone of the others the issue goes away:
http://pioneervalleywebdesign.com/images/capture.png
Thread Starter
der1
(@der1)
I will leave my training wheels on but again thank you. I figured my mistake when I read your FTP suggestion. Yes it works wonderful now.
Many Thanks
