• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

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

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
Rowby Goren
Asked:
Rowby Goren
  • 15
  • 11
  • 5
2 Solutions
 
Rowby GorenAuthor Commented:
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
 
GaryCommented:
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
 
GaryCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Chris StanyonCommented:
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
 
Chris StanyonCommented:
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
 
GaryCommented:
I thought he was talking about the jumping menu, didn't even see the big line-height on hover.
0
 
GaryCommented:
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
 
Rowby GorenAuthor Commented:
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
 
GaryCommented:
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
 
Rowby GorenAuthor Commented:
HI

Missed the other comments.  Let me check them out.  

ROwby
0
 
GaryCommented:
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
 
Rowby GorenAuthor Commented:
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
 
GaryCommented:
BODY line 54 remove line-height

LI line 649 remove line-height
0
 
Chris StanyonCommented:
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
 
Chris StanyonCommented:
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
 
Rowby GorenAuthor Commented:
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
 
Rowby GorenAuthor Commented:
I removed all line heights.  !!!
0
 
Rowby GorenAuthor Commented:
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
 
Chris StanyonCommented:
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
 
Rowby GorenAuthor Commented:
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
 
Rowby GorenAuthor Commented:
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
 
Rowby GorenAuthor Commented:
Thanks everyone!!!!

Rowby
0
 
GaryCommented:
umph no points for me.
0
 
Rowby GorenAuthor Commented:
Gary that was an error.   I am asking the moderator to reopen the question.

Rowby
0
 
Rowby GorenAuthor Commented:
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
 
GaryCommented:
lol still no points - I'm not bothered.
0
 
Rowby GorenAuthor Commented:
What!!!!  I split them!   Nope I am going to have moderator open the question again
0
 
Rowby GorenAuthor Commented:
I will try again.
0
 
GaryCommented:
Don't worry about it, it's fine.
0
 
Rowby GorenAuthor Commented:
Ok  I gave Gary the "Best Solution" award to make up for my ignoring him.

THanks!  This better be right.
0
 
GaryCommented:
Thanks ;o)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 15
  • 11
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now