Announcement

**NormanRouxel** · 11-Jun-2014, 10:26 AM

I doubt that anyone can help until you post the code or a link to a problem page.

**Matt F** · 11-Jun-2014, 10:59 AM

Thanks,

This is the page:

http://www.cleansmartsupplies.co.uk/...est/index.html

here's the code for the side bar:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="actinic.css">


<link rel="stylesheet" href="font-awesome.min.css">
<body>
<ul class="zetta-menu zm-position-left zm-effect-fade">
<li><a href="index.html" onClick="return true" ><strong>Home</strong></a></li>
<li><a href="Carpet_Cleaning_Chemicals.html">Carpet Cleaning Chemicals ></a>
<ul class="w-250 zetta-menu zm-effect-fade">
<li><a href="Pre-Sprays.html"> Pre-sprays and Boosters </a></li>
<li><a href="professional-carpet-shampoos.html">Extraction products</a></li>
<li><a href="eco-friendly-carpet-cleaning-chemicals.html">Eco-friendly</a></li>
<li><a href="Carpet_Upholstery_Deodoriser.html">Carpet/Fabric Deodorisers</a></li>
<li><a href="Spot_and_Stain_Removers.html">Spot and Stain Removers</a></li>
<li><a href="Carpet_Upholstery_Stain_Protection.html">Stain Protectors</a></li>
<li><a href="Problem_Solvers_Additives.html">Problem Solvers</a></li>
<li><a href="Upholstery_Leather_Cleaning.html">Upholstery Cleaning</a></li>
</ul>
</li>
<li><a href="Carpet-Cleaning-Machines.html">Carpet Cleaning Machines > </a>
<ul class="w-250 zetta-menu zm-effect-fade">
<li><a href="professional-carpet-cleaning-machines.html">Professional Carpet Cleaners </a></li>
<li><a href="Industrial-carpet-cleaners.html">Industrial Carpet Cleaners </a></li>
<li><a href="dry-carpet-cleaning-machines.html">Low Moisture Carpet Cleaning</a></li>
<li><a href="Compact_Spot_Cleaning_HWE_Machines.html">Spot and Stain Machines</a></li>
<li><a href="Upholstery_cleaning_machines_.html">Upholstery Cleaning Machines</a></li>
<li><a href="Used_and_Clearance_machines.html">Recon/Used Machines</a></li>
</ul>
</li>
<li><a href="Carpet_Cleaning_Equipment_.html">Carpet Cleaning Equipment ></a>
<ul class="w-250 zetta-menu zm-effect-fade">
<li><a href="carpet_cleaning_essentials.html">Essentials</a></li>
<li><a href="Carpet_&_Upholstery_Brushes_and_Groomers.html">Brushes and Groomers </a></li>
<li><a href="Magma_Inline_Heater.html">Magma Inline Heater </a></li>
<li><a href="Airflex_Booster_POD-1.html">Airflex Booster POD </a></li>
<li><a href="carpet-agitation-machines.html">Wands, Hand Tools and Hoses </a></li>
<li><a href="carpet-agitation-machines.html">Carpet Agitation Machines </a></li>
<li><a href="Carpet_Cleaning_Machine_Spares.html">Vac Motors and Pumps </a></li>
<li><a href="Turbo_Driers_&_Air_movers.html">Turbo Driers </a></li>
<li><a href="Carpet_&_Upholstery_cleaning_sprayers.html">Sprayers</a></li>
</ul>
</li>
<li><a href="Carpet-cleaning-courses.html">Carpet Cleaning Courses ></a>
<ul class="w-250 zetta-menu zm-effect-fade">
<li><a href="Carpet-cleaning-course.html">Cleansmart Academy</a></li>
<li><a href="carpet-cleaning-training-course.html">Carpet Cleaning Courses</a></li>
<li><a href="Hands-on_upholstery_cleaning_course.html">Upholstery Cleaning Courses</a></li>
<li><a href="Spot_and_Stain_Removal_Curtain_Cleaning.html">Spot and Stain Removal Courses</a></li>
</ul>
</li>
<li><a href="floor-cleaning-equipment.html">Floor Cleaning Equipment ></a>
<ul class="w-250 zetta-menu zm-effect-fade">
<li><a href="scrubber-driers.html">Scrubber Driers</a></li>
<li><a href="rotary-cleaning-machines.html">Rotary Floor Cleaning Machines</a></li>
<li><a href="Hydroforce-SX-15-Hard-Surface-Cleaning-Tool.html">Hard Floor Spinner Tools</a></li>
<li><a href="hard-floor-extraction-wands.html">Hard Floor Wands</a></li>
</ul>
</li>
<li><a href="industrial-steam-cleaners.html">Industrial Steam Cleaners ></a>
<ul class="w-250 zetta-menu zm-effect-fade">
<li><a href="steam-only-industrial-steam-cleaners.html">'Steam Only' Machines</a></li>
<li><a href="industrial-steam-cleaners-for-sale.html">Steam + Vacuum</a></li>
<li><a href="steam-cleaner-industrial.html">Steam + Vacuum + Detergent</a></li>
<li><a href="chewing-gum-removal-machine.html">Steam Gum Removal Machines</a></li>
</ul>
</li>
<li><a href="industrial-vacuum-cleaners.html">Industrial Vacuum Cleaners ></a>
<ul class="w-250 zetta-menu zm-effect-fade">
<li><a href="commercial-vacuum-cleaners.html">Upright Vacuum Cleaners</a></li>
<li><a href="industrial-hoovers.html">Industrial Cylinder Vacs</a></li>
<li><a href="wet-and-dry-vacuum-cleaners.html">Wet and Dry Vacuum Cleaners</a></li>
<li><a href="wet-vacuum-cleaners.html">Wet Vacuum Cleaners</a></li>
<li><a href="hazardous-dust-vacuum-cleaners.html">Hazardous Dust Vacs</a></li>
</ul>
</li>
</ul>

<div class="sidebar">

<div class="sidebar-element">
<actinic:variable name="QuickSearchBar" />
</div>

<div class="sidebar-element">

</div>

I have pasted the code from the Zetta style sheet at the bottom of the Actinic style sheet.

Any help very welcome!

Matt

**NormanRouxel** · 11-Jun-2014, 11:20 AM

This appears to be a pure CSS menu that relies on hover effects to fly-out the sub menus.

Unfortunately most touchscreen devices don't have mice (and thus mouse-over - aka hover) and only know when someone has actually touched the screen which usually generates a click type event.

Best thing is to look wherever you got this menu from and search / ask there about using it on touchscreen devices.

P.S. This can be overcome. On my hover based menus like Mega Menu, I detect if the device is a phone / tablet type touch screen device and switch driving the menu from mouseover events to onclick ones.

**Matt F** · 11-Jun-2014, 12:06 PM

OK, I have asked the menu author and will feed back if useful.

Thanks

**Matt F** · 11-Jun-2014, 05:01 PM

The answer was.....

Add onClick=�� to the main UL tag only

Now working. Also had to remove links from the 1st level categories to force the drop down, but never mind.

**NormanRouxel** · 11-Jun-2014, 05:19 PM

Your pages seem to have at least 3 <body ...> tags. And 2 <html> tags. Only the first one of each is valid.

**Matt F** · 11-Jun-2014, 06:28 PM

Thanks Norman, I must admit - i don't really know much about this. We originally bought into Actinic because we didn't need to be website designers to run the site. How things have changed!

We 'upgraded' to Sellerdeck recently and as a result I have been working literally around the clock for weeks at the expense of my business/family life trying to resolve the mountain of issues this 'upgrading' has caused.

Ironically the support contract I purchased as part of the upgrade has been completely useless, as the problems the upgrade has caused are 'design' related and support doesn't cover 'design' issues. So that's what brings me here with my extra body tags and silly questions.

I could cry, i really could.

**NormanRouxel** · 11-Jun-2014, 09:59 PM

We can fix the extraneous HTML.

In your earlier post you showed your Sidebar code. It started with:

Code:

<!DOCTYPE html>
<html>
<head>
<!-- Zetta Menu -->
<link rel="stylesheet" href="actinic.css">

<!-- Font Awesome -->
<link rel="stylesheet" href="font-awesome.min.css">
<body>

Delete the above code block.
Then locate the </head> tag in your overall layout and above it add:

Code:

<!-- Font Awesome -->
<link rel="stylesheet" href="font-awesome.min.css">

Update and let us know when you've done that so we can check.

**NormanRouxel** · 12-Jun-2014, 07:48 AM

Also: You now have a JavaScript error whenever someone clicks the top menu links. You have:

Code:

<ul class="zetta-menu zm-position-left zm-effect-fade" onClick=�� >

But have used the wrong quote characters (those italic type ones are not valid in HTML or JavaScript). Use standard quote characters:

Code:

<ul class="zetta-menu zm-position-left zm-effect-fade" onclick="">

And, as above, it's best to use onclick instead of onClick.

**Matt F** · 12-Jun-2014, 10:04 AM

Thank you very much Norman,

I have made those changes.

Before we upgraded, text near images used to position itself underneath the image. Post-upgrade text wants to position itself to the right of images. e.g. on this page:

http://www.cleansmartsupplies.co.uk/...lex_Turbo.html

- you can see the problem in the right hand column - if there's a gap to the right of an image the text positions itself there. The only way I've found to stop this is by modifying all the images so that they're the same width.

Is there something on the style-sheet I can modify to prevent this. I pretty well always want captions for images to appear underneath images aligned center?

Thanks again for your help

Matt

**NormanRouxel** · 12-Jun-2014, 05:38 PM

Hi, Matt

It's best not to ask for help on a new issue by someone's name as that might discourage others with better knowledge from responding.

I'm not a web-designer and this is best dealt with by someone who is.

Announcement

CSS Drop Down Menu on Ipad

CSS Drop Down Menu on Ipad

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment