Home News Contact Us Forum About Us Demos Products F.A.Q.
ARI Soft









Register   Lost Password?
Featured Demos

ARI Smart Content demo

ARI Quiz demo

WordPress Quiz plugin

WordPress Lightbox plugin







e-mail: info@ari-soft.com
Shopping Cart
You currently have 0 items in your cart.
Show Cart


Recent Events
  • 31/12/2023 New Year SALE

    We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.
    more...

  • 21/11/2023 BLACK FRIDAY 23 is coming

    BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.
    more...


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?
ARI Soft Forum
Joomla components
ARI Ext Menu

Image Buttons Not Showing up on Smart Phone/iPad
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: Image Buttons Not Showing up on Smart Phone/iPad
#44339
Image Buttons Not Showing up on Smart Phone/iPad 10 Years, 7 Months ago Karma: 0
Lovely module very easy to set up. Ive just one small issue. The images I have used for the blue right menu ( Solicitors for....buttons) don't show up on smart phones/ipads. It seems to work fine on my computer browsers.

http://vpmcmullindublin.ie/index.php

Here is the css Ive used in my main template for the 4 blue button on the right that i speak of. Any help greatly appreciated. Thank you.


Code:


ul#ariext90  li#ext-gen7 a#ext-gen3 {
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0;
  float: left;
  width: 305px;
  height: 82px;
  background-image: url(http://vpmcmullindublin.ie/images/buttons/solicitors-for-business.png)!important;
  background-repeat: no-repeat;
}
ul#ariext90  li#ext-gen7 a:hover#ext-gen3 {
  background-color: #002048;
  filter:alpha(opacity=90);
  -moz-opacity:0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}


ul#ariext90  li#ext-gen6 a#ext-gen2 {
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0px;
  float: left;
  width: 305px;
  height: 82px;
    background-image: url(http://vpmcmullindublin.ie/images/buttons/solicitors-for-personal-injury.png)!important;
  background-repeat: no-repeat;
}
ul#ariext90  li#ext-gen6 a:hover#ext-gen2 {
  background-color: #002048;
  filter:alpha(opacity=90);
  -moz-opacity:0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}


ul#ariext90  li#ext-gen8 a#ext-gen4 {
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0px;
  float: left;
  width: 305px;
  height: 82px;
  background-image: url(http://vpmcmullindublin.ie/images/buttons/solicitors-for-you.png)!important;
  background-repeat: no-repeat;
}
ul#ariext90  li#ext-gen8 a:hover#ext-gen4 {
  background-color: #002048;
  filter:alpha(opacity=90);
  -moz-opacity:0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}


ul#ariext90  li#ext-gen9 a#ext-gen5 {
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0px;
  float: left;
  width: 305px;
  height: 82px;
  background-image: url(http://vpmcmullindublin.ie/images/buttons/solicitors-for-public-bodies.png)!important;
  background-repeat: no-repeat;
}
ul#ariext90  li#ext-gen9 a:hover#ext-gen5 {
  background-color: #002048;
  filter:alpha(opacity=90);
  -moz-opacity:0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;

}
ciaran33
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
#44347
Re:Image Buttons Not Showing up on Smart Phone/iPad 10 Years, 7 Months ago Karma: 747
Hello,

At least is not a good approach to use auto-generated ID (like ext-gen9 and etc.) because they is used by ExtJS javascript framework for internal purposes and they can be different.

You can read how to define different width for different menu items here, similar solution can be used in your case to add custom CSS properties for specific menu items.

Regards,
ARI Soft
admin
User Online Now Click here to see the profile of this user
The administrator has disabled public write access.
 
#44358
Re:Image Buttons Not Showing up on Smart Phone/iPad 10 Years, 7 Months ago Karma: 0
Excellent. Thanks for the speedy reply. I don't know why I didn't think of asking here sooner. Below is the code I have now. One final question. What would I need to have an a:hover state? I tried using this:

Code:

UL#{$id} LI.ux-menu-item130 a:hover {
  background-color: #002048;
  filter:alpha(opacity=90);
  -moz-opacity:0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}




Code:
UL#{$id} LI.ux-menu-item129
{
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0;
  float: left;
  width: 305px;
  height: 82px;
  background-image: url("/images/buttons/solicitors-for-business.png")!important;
  background-repeat: no-repeat;
}



UL#{$id} LI.ux-menu--item130
{
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0px;
  float: left;
  width: 305px;
  height: 82px;
  background-image: url("/images/buttons/solicitors-for-personal-injury.png")!important;
  background-repeat: no-repeat;
}




UL#{$id} LI.ux-menu-item131
{
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0px;
  float: left;
  width: 305px;
  height: 82px;
  background-image: url("/images/buttons/solicitors-for-you.png")!important;
  background-repeat: no-repeat;
}



UL#{$id} LI.ux-menu-item132
{
  font-size: 0px;
  color: #002654;
  margin: 0 0 10px 0;
  padding: 0px;
  float: left;
  width: 305px;
  height: 82px;
  background-image: url("/images/buttons/solicitors-for-public-bodies.png")!important;
  background-repeat: no-repeat;
}
ciaran33
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
#44361
Re:Image Buttons Not Showing up on Smart Phone/iPad 10 Years, 7 Months ago Karma: 747
Try the following:

UL#{$id} LI.ux-menu-item130 a.ux-menu-link-hover

Regards,
ARI Soft
admin
User Online Now Click here to see the profile of this user
The administrator has disabled public write access.
 
#44365
Re:Image Buttons Not Showing up on Smart Phone/iPad 10 Years, 7 Months ago Karma: 0
The hover state doesn't seem to work but i happy enough with everything else. Thanks for all you help. I really appreciated it.

Code:
UL#{$id} LI.ux-menu-item130 a.ux-menu-link-hover
{
  background-color: #002048;
  filter:alpha(opacity=90);
  -moz-opacity:0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}
ciaran33
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
Go to topPage: 1
ARI Soft Forum
Joomla components
ARI Ext Menu
Powered by Kunenaget the latest posts directly to your desktop
Useful Links
Products
F.A.Q.
Discount
RSS
Top Products
ARI Data Tables
ARI Sexy Lightbox
ARI Quiz
ARI Stream Quiz - Personal
ARI Smart Content
Help
Forum
F.A.Q.
Home | News | Contact Us | Forum | About Us | Demos | Products | F.A.Q.
ARI Soft
License | Terms and Conditions | Copyright Info | Privacy Policy
 
ARI Soft
Copyright © 2009