Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 909
Thanks: 3 times Was thanked: 15 time(s) in 15 post(s)
|
This really has me stumped, maybe someone can shed some light here. Please look at the two pictures in this post, on the "no sale" (Left), everything looks fine, but look what happens on "sale picture"(Right). I am required to hide certain pricing by certain vendors that might cause pricing to be below their map pricing. This is not an issue, since I'm able to hide the price on any product that I choose, but when a product is on sale, and you click to view the price, you can see that the background image repeats. I have tried every way to prevent this, but cannot come with a solution, any ideas, besides displaying the picture below the box? Many thanks, -Ray CSS Code for this effect .pricePopup .price { color:#000; font-size:15px; line-height:22px; background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; } No Sale.jpg (97kb) downloaded 1 time(s). On Sale.jpg (123kb) downloaded 0 time(s).Edited by user Monday, September 14, 2020 12:50:15 AM(UTC)
| Reason: Not specified
|
|
|
|
Rank: Advanced Member
Groups: Admin, Developers, Registered, HelpDesk, Authorized User Joined: 10/5/2018(UTC) Posts: 704
Thanks: 5 times Was thanked: 113 time(s) in 112 post(s)
|
Each line of price display have the class 'price' and you are applying the styles on every element using the 'price' class. So there are three lines of price display and you are getting the image for each line. Please try to update your style from Code:.pricePopup .price {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }
to Code:.pricePopup {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 909
Thanks: 3 times Was thanked: 15 time(s) in 15 post(s)
|
Hi Shari,
Unfortunately .pricePopup will not work because it puts it below the box. Things would be a lot easier if each "price element" had a specific ID. is there anything else you can think of?
Thanks
|
|
|
|
Rank: Advanced Member
Groups: Admin, Developers, Registered, HelpDesk, Authorized User Joined: 10/5/2018(UTC) Posts: 704
Thanks: 5 times Was thanked: 113 time(s) in 112 post(s)
|
Please try this again. Try adding .box class after .pricePopUp Update your style from Code: Code:.pricePopup .price {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }
to Code: Code:.pricePopup .box {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers Joined: 2/17/2019(UTC) Posts: 909
Thanks: 3 times Was thanked: 15 time(s) in 15 post(s)
|
YES, YES, YES - That will work - many thanks Shari
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Important Information:
The AbleCommerce Forums uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.
More Details
Close