Solved

I need to fix default padding and/or line height on hover

Posted on 2013-10-30
34
251 Views
Last Modified: 2013-11-04
Hello CSS Experts

I have tried to use firebug to fix this but am not having much luck.

I am finding that I am often having to specify line height and/or padding in almost every css because I don't think I have properly set a default setting.

I will give the link to the site in question in my next comment.

The issue appears only to be showing in firefox.  But who knows it might be showing in other browsers so it needs to be fixed!

I am ready for your suggestions and perhaps a lecture.

Thanks
0
Comment
Question by:Rowby Goren
  • 15
  • 11
  • 5
34 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39613122
Okay,

Here’s the link to the development site:Dev site

Regarding line height and or padding.   I am having either padding or line height issues when hovering over certain links.  I think there is a default css rule setting that I am missing that is adding either padding or line height to hover.

These issues are noticeable in FIREFOX.  I’m not seeing them in my copy of Chrome.

For example on the main menu of this page if you hover over any top menu item, it causes the area below to “shift down” a few pixels.   The same happens with the Calendar on the right.  If you HOVER over any date in firefox some padding or line height is added and the calendar “shifts down” a few pixels.

And if you scroll down to "Share this" you will see the same issue when you hover over one of the social media icons.

The bottom text links are behaving that way in hover -- again apparently only in firefox.

I think somewhere there is some css that is globally adding the padding and/or line height  to hover – forcing me to specify every hover in css -- and not always successfully.

BTW I tried using firebug to troubleshoot this but tracing hover issues on firebug is a bit of a challenge because when I move the mouse away from the hover to look a the code the hover css goes away.  

Rowby
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39613150
custom.css line 488 - remove line-height
div.moduletable._GalaxiesEtc, p a:link, a:visited, a:active {}

line 414 - remove line-height
div#OurGalaxiesHASOMMobile h3 h1, a:active {}

line 370 - remove line-height
div.moduletable._GalaxiesEtc, p a:link, a:visited, a:active {}
0
 
LVL 58

Expert Comment

by:Gary
ID: 39613152
When you have the element selected click the Style tab on the right window (the one with the dropdown arrow) and click :hover, :active and :focus
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39613154
custom.css line 97, you have this:

div.moduletable_bigMenu li > a:link, a:visited, a:hover, a:active {
    line-height: 34px;
    list-style-type: none;
}

Open in new window

This is applying the line-height to the visited, hover and active links - all of them! If you only want to target the bigMenu li a then you need that in each part of the rule:

div.moduletable_bigMenu li > a:link,
div.moduletable_bigMenu li > a:visited,
div.moduletable_bigMenu li > a:hover,
div.moduletable_bigMenu li > a:active {
    line-height: 34px;
    list-style-type: none;
}

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39613158
Gary's found some more samples - basically when you style element specific links, you need the element selector for each pseudo link, so something like this:

#element a:link, #element a:hover, #element a:visited {}

If you do this;

#element a:link, a:hover, a:visited it will apply to:

#element a:link (links within #element)
a:hover (all links)
a:visited (all links)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39613162
I thought he was talking about the jumping menu, didn't even see the big line-height on hover.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39613163
Big problem here is multitudes of style sheets and lots (and I mean lots) of redundant CSS which will never make it easy to debug your styles.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39613169
Thanks Gary123

I removed those height styles -- still seeing the same or similar issue.

I guess there is some line height or padding somewhere still taking control of the height/padding?

Seeing it mainly in firefox.

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39613177
I would personally remove all line-heights completely.
For the bottom social links I would put on hover a negative top margin - that would stop the jumping

(and I see you are correcting the css for the calendar Chris so still the line-height on the dropdown menu exists)
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39613183
HI

Missed the other comments.  Let me check them out.  

ROwby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39613188
I think you would save a lot of time if you just removed all line-heights and only applied them to the bits where you need to change the default line-height.
It is not normal to change line-height on hover, active etc.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39613193
Hee heee

I think the calendar hovering is fixed.

Can you take a fresh look a the page again to see current status.  I won't change anything until I get your comments.

For now I am "stuck" with the multiple style sheets -- they are put there by various modules etc that I have added, and would rather not remove them at this time.

:)

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39613198
BODY line 54 remove line-height

LI line 649 remove line-height
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39613200
The problem is you're setting line height for ALL links in lots of different places. All of these rules are setting styles for A tags without selectors. The select you're using at the start is not being passed to the A styling.

div.moduletable_bigMenu li > a:link, a:visited, a:hover, a:active {} div.moduletable._GalaxiesEtc, p a:link, a:visited, a:active {}
div#OurGalaxiesHASOMMobile h3 h1, a:active {}
div.moduletable._GalaxiesEtc, p a:link, a:visited, a:active {}
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39613212
The footer links are jumping because this rule is being applied:

div#OurGalaxiesHASOMMobile h3 h1 a:link, a:visited, a:hover, a:active { font-size: 32px; }

When a link is hovered over, it's having it's font-size set to 32px! It doesn't actually increase the font size because you then reset the span insider the A, so when you have this.

You seem to have a lot of rules throughout your CSS where you are not targeting the correct elements!
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39613213
Hi

I did this fix and I think the top menu is behaving ok now  (there is a hover issue in the the drop down menu but I think I can fix that via some menu module settings -- after we clean up the other hover issues....)

BODY line 54 remove line-height

LI line 649 remove line-height 

Open in new window


The social buttons are still dancing around, as is the bottom text menu.  

I could remove ALL line heights that I previously added (prior to my question on EE) added (in an attempt to fix this issue on my own).  

Maybe that would be a good thing to do.

I have to be gone for awhile, so I will try to check later.

Thanks for your help -- and patience!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39613273
I removed all line heights.  !!!
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39613277
Hi, ChrisStanyon

Regarding

div#OurGalaxiesHASOMMobile h3 h1 a:link, a:visited, a:hover, a:active { font-size: 32px; }

I only want that to apply to OurGalaxiesHASOMMobile.   Nothing else.  What in the above is causing it to apply to the bottom menu?

Can I remove something in the above  Or add something.  I think you indicated that the basic "a" is missing.    To make it specific only to the div#OurGalaxiesHASOMMobile and nothing else.

That style seems to be causing much of my headache.  I see it apparently in the social buttons when I hover over them.

:)

Rowby
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39613820
Hey Rowby. If you only want the font-size to be specific to OurGalaxiesHASOMMobile then you have to specify that for each part of the rule:

div#OurGalaxiesHASOMMobile h3 h1 a:link,
div#OurGalaxiesHASOMMobile h3 h1 a:visited,
div#OurGalaxiesHASOMMobile h3 h1 a:hover,
div#OurGalaxiesHASOMMobile h3 h1 a:active { font-size: 32px; }

When setting rules like this, the list of elements are separated by commas and dealt with individually. Your rule is currently this:

div#OurGalaxiesHASOMMobile h3 h1 a:link, a:visited, a:hover, a:active { font-size: 32px; }

Because of the commas, it will set the font size to 32px for 4 different elements:

div#OurGalaxiesHASOMMobile h3 h1 a:link
a:visited
a:hover
a:active

You'll notice that only the 1st element in the list is targeting the OurGalaxiesHASOMMobile DIV - the other 3 rules are just targeting all A tags on your page - ALL of them because there is no limiting selector.

Hope that makes sense. You have this same problem throughout your site
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39614244
Hi : ChrisStanyon,

Looks like your code took care of the culprit.  I will check where else I did this, but for now it is looking good.

Give me some time to review some other pages and css.  And thanks GaryC123 too.  

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39614835
All is looking fine -- I made changes on my other development site which is not reflected here.

So unless you have additional I will be splitting the points shortly.  

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39617558
Thanks everyone!!!!

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39617572
umph no points for me.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39617617
Gary that was an error.   I am asking the moderator to reopen the question.

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39618782
Thanks Moderator

And thanks Gary and  ChrisStanyon  

I wish I could have split "best answer".  

I had meant to split the points this way originally.  

I think I am now better educated on link styling!

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39618804
lol still no points - I'm not bothered.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39618807
What!!!!  I split them!   Nope I am going to have moderator open the question again
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39618814
I will try again.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39618818
Don't worry about it, it's fine.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39618821
Ok  I gave Gary the "Best Solution" award to make up for my ignoring him.

THanks!  This better be right.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39618842
Thanks ;o)
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

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

13 Experts available now in Live!

Get 1:1 Help Now