• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

Adjusting CSS for noscript

I have a page which features thumbnail images with captions, at http://mauitradewinds.com/Test/StarWind.htm   A style sheet (attached) called hover.CSS produces popups on mouseover.  With JS disabled, the CSS popup still performs, but the thumbnail captions are displaced far below the thumbnail.  Can you suggest a fix for that?hover.css
2 Solutions
You can tie the captions to the images by putting the images in a <figure> and captioning with <figcaption> Then you apply the hover to the figure instead of directly to the image.

I play with captions here:
Bottom half of the page.

Julian HansenCommented:
The reason is because the <a> inside the <noscript> inherits the style

.links-horiz a {
  display: block;
  height: 120px;
  margin-top: 50px;
  width: 200px;

Which creates a 170px gap due to the height and margin.
ddantesAuthor Commented:
Thank you both.  It seems that .links-horiz a requires a margin-top: -42px in order for the caption to appear appropriately. I'm trying this approach:  loading a stylesheet with margin adjusted for nojs by default.  Using javascript to replace that style with the one which works with js enabled.  So far, I'm happy!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now