Solved

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

Posted on 2013-10-30
34
255 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 43

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 43

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 43

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 43

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 43

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How do i set padding within the sidebar? 2 26
Centering a nested div 16 56
CSS Question 9 41
Materializecss - Different Behaviors in Browser's 1 17
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.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

932 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

11 Experts available now in Live!

Get 1:1 Help Now