Solved

Adjusting CSS for noscript

Posted on 2013-06-03
3
221 Views
Last Modified: 2013-06-03
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
0
Comment
Question by:ddantes
3 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 200 total points
ID: 39216812
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 300 total points
ID: 39216859
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
 

Author Comment

by:ddantes
ID: 39217374
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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now