?
Solved

Adjusting CSS for noscript

Posted on 2013-06-03
3
Medium Priority
?
240 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 800 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 58

Accepted Solution

by:
Julian Hansen earned 1200 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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

770 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