Responsive menu border jumpiness

HTML & CSS
1

Hi, @santafe.

I have an interest in woodworking so I was looking at the site that you are coding and noticed something that you may wish to modify.

When hovering over the responsive menu items, they tend to jump downward about 2px. Tellingly, that is twice the width of the green border.

You may wish to assign a transparent border to the anchor and eliminate that jumpiness, like this:

.primary-nav a {border:1px solid transparent;}

Then your :hover code could simply change the border-color rather than all 3 paramenters, if you like:

.primary-nav a:hover {border-color:#0f0;}

just a thought.

1 Like
2

@ronpat

That’s some awesome feedback that I never expected. I have had two forums and several pc user’s take a look at most of the pages and never once have I heard that comment.

That said - what browser are you using?

My Google Chrome tester said she was seeing the green border but did not mention your observation. Perhaps, if she did she may have thought that behavior was coded in?. I really wish I had my own pc to test on but I do knot, pun intended.

If you prefer - and have the time - drop me an email from the site and we can go from there.

Thanks for that observation.

3

@ronpat

Ok! I just took a look at the menu myself and I do see what you are talking about. Great catch because I never noticed that. I’ll loading your code and will report back.

Thanks again for spotting that.

4

@ronpat
I did as you instructed, but the second code change prevented the green border from appearing when hovering.

Did I overlook something? The changes are online.

Thanks!

5

That :hover line was not specific enough. By bad, sorry.

home.css line 256

.no-touch .primary-nav a:hover {border:1px solid #00ff00;}

You can leave line 256 as it is, OR change it so that only the color is changed when :hovered IF doing so does not interfere with the touch menu.

In any case, adding the 1px transparent border to
home.css line 111

.primary-nav a {border:1px solid transparent;}

is required to stop the jumpiness.

As you can see in the screen shot, the latter is missing at this moment.

1184×1033 165 KB

I’m using Firefox with the FireBug plugin.

6

@ronpat
I changed .primary-nav a: hover {} from .no-touch .primary-nav a: hover {} and did not reflect this change in home.css so this is my error. I have several css stylesheets; home.css styles the home page only: majorStyle.css styles all the major pages (the main menu item pages); and minorStyle.css stylesheet which styles the sub-menu pages. Confusing, I know, but it seems to work generally well.

That said, I have added your changes to the majorStyle.css file and if you view a non-home.page menu, you should see that the green border does not appear. For instance, if you go to the Projects page and open its menu you should see that the green border does not appear on hover. The Projects page style sheet is majorStyle.css.

I have added your code to home.css and the menu jitter is definitely gone from that page. But, for some reason, the code does not work in the majorStyle.css file. Will get back to this tomorrow as it is late here.

Thanks again for your help. I sincerely appreciate it.

7

Same issues. Apply {border:1px solid transparent} to

majorStyle.css (line 490)

.primary-nav a {border: 1px solid transparent;}

and

minorStyle.css (line 496)

.primary-nav a {border: 1px solid transparent;}

At this moment, those styles are missing.

They both work for me when I add them with FireBug.

Which browser do you use? The developer’s tools within your browser (or in my case using a plug-in dev tool) can be quite helpful for tracking down troubles like this and more

Ref: http://www.wwbydesign.com/

8

@ronpat

Ok, I’ve spent quite a bit of time on this issue and all I have to show is that pages styled with the minorStyle.css work with your code. The home.page which is styled with home.css works as well sans menu jitters. The major pages - styled with majorStyles.css - still has the menu jitters even with your code.

I have gone through the majorStyles.css nav code several times comparing it to the same style rules in minorStyles.css and thought they were mirror-images of each other, but reality proves me wrong. I must be overlooking something, but not certain what that may be.

As far as browser plug-ins go, I use none. I have the latest FF on my desktop but have never really been comfortable with it. I also probaby have Firebug installed in it as well. I will look into using it more often.

Thanks for your help.

9

Hi, santafe.

My apology for wasting so much of your time. Looks like I misread the screen and sent you to the wrong line number in majorStyle.css

Try line 460 instead where you can see in the screenshot I have added the transparent border.

10

@ronpat

There is absolutely NO REASON for you to apologize for anything. I have learned quite a bit about all of this, so it really works out in my favor. No problem there at all. I am indebted to you for your help.

Here is a grab of that style from majorStyle.css as it is now:

699×201 40.2 KB

You should see that your code is at the bottom of the style.

Thanks again for your help.

11

A quickie follow-up.

{border-color: 1px solid transparent} as shown in the screen capture is invalid and should not be doing anything. If it is working, it is because the browser is very forgiving.
The correct syntax should be: {border: 1px solid transparent}

The idea is to apply a complete border to the <a> and modify just the color/s of that border through the states of :hover, :active, :visited, etc, as desired.

Once that initial border with width and style have been established on the <a>,
It’s up to you whether to change just the color using a:hover {border-color: red}
or repeat the full shortcut, a:hover {border:1px solid red}. Coder’s choice.

This might help:

12

@ronpat

You have been exceptionally patient with me: border-color: was the whole problem!

To be honest with you I knew that was incorrect, but could not ‘see’ what I was looking at much less what I was coding. I’ve used border: countless times within these pages so I have absolutely no excuse for my ignorance.

That said - where do I send the pizza?

Thanks for your incredible help and the link as well.

13

As I have already demonstrated by giving you an incorrect line number, that is a common phenomenon which I share all too often, I’m afraid.

Save the delivery change and just fax a slice. That’ll be good.

Thanks,
Best2U

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.