This has been driving me crazy all morning, and throws away everything I thought I know about CSS.
I am using this following page to assist me in designing an accordion-menu;
Problem is, when I save that entire page, along with the associated .css and .js files, the menu displays differently. I uploaded the resulting display here; http://www.soflorealty.com/css/
I have no idea why (1) the arrows are doubled up, and (2) why the Heading are padded withing an already padded box.
What could be causing this even when the page is being saved completely as is, with no changes?
What can I do to correct the display?
The images are doubled
The images are doubled because you use two times a div every time.
This will result in a doubled image (double button and double red icon)
Look at this (this seems to be one button)
<div class="heading"> <div class="arrowImage"></div> <div class="heading"> <div class="arrowImage"></div> Horizontal Menus </div> </div>
How would this look?
<div class="heading"> <div class"arrowImage"></div> Horizontal Menus </div>
Remember this is just one button, you have to do the rest the same way.