Javascript messing up css?

[morgand377]

hello,
I am doing something on my site where I am trying to make it so when you click on a list item it for a gemstone, it transports you down the page to a detailed description. I also made it so when you click on the description it takes you back to the list. I did this by giving my list item column an id of #amazonitelist and the details card image an id of #amazonitecard. I then applied the following javascript:

jQuery("#amazonitelist").wrap("<a href='#amazonitecard'></a>");
jQuery("#amazonitecard").wrap("<a href='#amazonitelist'></a>");

and I was able to switch back and forth pretty well by clicking the items (example shown below in picture1). It accomplished what I was looking for but somehow it messed up my CSS by removing the margin on my items so they are no longer evenly spaced? When I comment out the javascript everything is fine again but when the JS is functional it messes up my CSS. Does anyone know a way around this? or an alternate way to navigate my sections of the page (I like being able to click an entire section instead of an item in a section).

Much thanks
-Morgan
(login credentials will be in secure note if anyone needs them)

[morgand377]

here is an example of how my CSS was messing up. As you see it should be evenly spaced out (not all grouped together like that).

[morgand377]

update: I found a temporary fix where I remove the ID from the list item column and place it on the list item image. (for some reason using java script with an ID set on a column was giving me problems with my CSS) This would work, but if anyone has any suggestions about this or can explain why it happened it would be helpful.
thanks!

[nico]

Hi @morgand377,

Thanks for writing in

I believe that there is a CSS conflict between the Class of the div and the wrap script…

Upon wrapping the script or the id to the div, the div CSS is broken or not executed properly because the CSS is not correct anymore.

Thanks.