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
ddantesAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
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.
0
 
COBOLdinosaurConnect With a Mentor Commented:
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:
http://coboldinosaur.com/pages/Captions_for_Lists_and_Images.html
Bottom half of the page.

Cd&
0
 
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!
0
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.

All Courses

From novice to tech pro — start learning today.