I am having difficulty with my proddetail page layout. I have achieved the look I want and it works perfectly in the Firefox Browser but is spacing between my select size and my custom slider Size calculator I built when viewing in Edge or Chrome browsers. See https://wallwordsdev.visualnetmedia.com/proddetail.asp?prod=CAB-15. I suspect it is because I have some hidden elements in my code and Firefox seems to ignore them but Edge and Chrome seem to see them even though they are hidden and accommodates with a horrible space and then word wraps my height value and Starting Size text. Any CSS gurus out there who might know what is going on here? I keep running in circles and can't seem to find the solution.

Sorry URL is https://wallwordsdev.visualnetmedia.com/proddetail.asp?prod=CAB-15

Hi there
I can't seem to open that URL. Can you double check it is correct?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

The urls is https://wallwordsdev.visualnetmedia.com/proddetail.asp?prod=CAB-15

If you can not open it - let me know you can open the site https://wallwordsdev.visualnetmedia.com - if not we might be blocking you from our firewall as we have geolocation blocking in certain countries. UK is not blocked though.

That could be it as although I'm from the UK originally I've been living in Spain for a while now.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

OK Spain was blocked but I went ahead and opened Spain up now on our Firewall so you should be able to connect now. The Firefox view is perfect, then open in Chrome and/or Edge and you will see the issue. Thanks!

quote:

---

we might be blocking you from our firewall as we have geolocation blocking in certain countries. UK is not blocked though

---

Just been following this posting and your links fail to open. I'm in the UK and have tried via my fixed broadband and two mobile networks with no joy

Steve
Manchester, UK.

Thanks Steve. I have adjusted our Geolocation blocking in our Firewall and it should let all UK and Spain thru. Can you check again ans see if you can connect to url https://wallwordsdev.visualnetmedia.com/proddetail.asp?prod=CAB-15

Much appreciated
Greg

quote:

---

Can you check again ans see if you can connect

---

Greg,
That's sorted !

Steve
Manchester, UK.

Thanks for testing that

Vince can you try again and take a look for me? Thanks

I am no expert on this and there may be a better way of doing it but try adding the following in red to your ectcart.css file around line 22.

I just looked at it in Chrome with additional css and it lines up fine now.

Patrick

.slidersize {
font-size: 19px;
color: forestgreen;
border: 0;
padding-right: 55%;
}

Patrick I made the change

.slidersize {
font-size: 19px;
color: forestgreen;
border: 0;
padding-right: 55%;
}

Adding the padding-right: 55%; as you suggested-However what it did was place the height under the width (which is a bit better in that at least all 3 browsers display almost the same at 1980x1020 resolution) however the main issue is that if you bring it up in Firefox the Slider Tool is directly below the Color option. However if you bring it up in Chrome or Explorer there is a space between the color option and slider tool of about 2 inches. I am trying to figure out how to get rid of that space and why it is so different on Chrome and Edge but works properly in Firefox?

quote:

---

try adding the following in red to your ectcart.css file

---

As I recall Andy advised in the following post in June 2019 that edits of the ectcart.css file shouldn't be done and that any edits are best copied over to the style.css file as the ectcart.css file is updated in updaters and any changes in the ectcart.css file would be lost.
https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=111790

Steve
Manchester, UK.

Good to know thanks Steve

Vince, Can you take another look at this problem? I have the Firewall open now so you can get to it.

Greg

Hi Greg
I've had a look but it's quite a complicated problem really. Who set this up originally? Would they be able to help with this?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Vince

Actually we developed the tool here at Visualnet and my programmers are stumped also as to the browsers reaction when we place the tool in Proddetail.

Hi, I've been playing around with this and its a tricky one, the only solution that I can see via css is going to require edits for all break points. For desktop
these settings place the size slider just under Select Size. Both may need to be adjusted for smaller screens do check for any unwanted affects. I also noticed there are a couple of <br> tags that are also pushing it down.

input#initialsize {
display: none;
}

and
.ui-widget.ui-widget-content {
border: 1px solid #d3d3d3;
margin-top: 80px !important;
}


Winners never quit, quitters never win
CSS and Responsive Designs
User Manual for Ecommerce Templates

Thanks Sinbad - Will try these settings. Much appreciated

Greg

Thanks everyone this issue has now been resolved

Greg