Solved

Adjusting CSS for noscript

Posted on 2013-06-03
3
230 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 57

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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
html5 1 44
Form submit takes only for one form 23 51
How to strip HTML from this JS code using regex 29 44
Submit button if clicked twice submits twice 1 24
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

739 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