Navigation background color on one link

HTML & CSS
1

URL: http://goo.gl/r4BHKa

In Chrome and Safari, the green background behind “Private Care” extends all the way to the end of the nav bar. In Firefox and Internet Explorer, it does not. I’ve been trying to adjust it so the green extends all the way to the end in all browsers, but I’m not having luck. Do you think there’s a way to do it?

2

At a window width greater than 1200 px, FF behaves as desired (the green background stretches to the edge of the menubar). Chrome will misbehave as the window narrows to less than 1200px, too.
This seems to be what is happening.

style.css (Line 1306)


.nav-primary .genesis-nav-menu > .last > a {
	padding: 8px 45px;
	padding: 0.8rem 4.45rem;
}

Is being replace by this segment of code within this media query:
style.css (Line 1892)


@media only screen and (max-width: 1200px) {

	.nav-primary .genesis-nav-menu > .last > a {
		padding: 8px;
	}

}
3

Thanks so much for taking a look. I’m viewing it from my laptop and my screen is larger than 1200 yet in Firefox, I see the issue. I don’t mind that it happens on the smaller screens, but the full size view should have the green tab all the way to the end.

4

URL: http://goo.gl/r4BHKa

Is there a way to make the padding on this navigation menu display the same on all browsers. It displays correctly in Chrome and Safari, but in Internet Explorer and Firefox, the green tab on the right does not extend all the way to the end of the bar. My client wants it all the way to the end in all browsers. I’m not sure it’s possible. What do you think?

5

Hi,

The menu item is only at the right when the browsers is maximised. At other widths there is a gap in all browsers.

You could do something like this for modern browers.


@media screen and (min-width:934px){
#menu-primary-menu{display:table;width:100%}
#menu-primary-menu li{display:table-cell}
}
6

Hi Paul,

Actually, we’re noticing the issue when viewing at full size - browser maximized. Here are screenshots to show you what we’re seeing.

The gap is fine when the browser is smaller, but she wants it like the Chrome view in all browsers when viewing full size.

Are you not seeing the gap on the full size view?

7

This is a repeat of this thread:

8

That’s true. Sorry about that. I thought it might help to use a different name for the thread. I would still appreciate any help. Thanks! :slight_smile:

9

Actually, we’re noticing the issue when viewing at full size - browser maximized. Here are screenshots to show you what we’re seeing.

Err… that’s what I said :slight_smile:

Threads merged.

I gave the solution above. Was there something else you wanted? :slight_smile:

The solution will work in IE9+ and IE8+ if you have media query support added.


<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
10

Thanks for your help, Paul. I guess I misunderstood before.

It works, but in IE I’m noticing that the text shifts down and then side to side when you first hover over it. Do you know of a fix for that?

Thanks again. :slight_smile:

11

HI,

Looks fine to me in latest versions of IE. Did you mean a specific version?

If you are talking about IE8 then I see you didn’t add the media query support that I posted. IE8 doesn’t understand media queries so you need a polyfill such as the link I gave.

12

No, I’m using IE 11 and I notice the text shifting down and then side to side. Once I’ve hovered over the links, it doesn’t happen again. It’s just happening upon page load. I’m on a Windows 7 machine if that makes a difference.

I added the media query support to the head.

Thanks, Paul. :slight_smile:

13

Hi,

Ok I can see the slight jump on the nav in IE11 but unfortunately I can’t duplicate locally for testing as it appears to work fine locally. I think the issue is another with the custom font you are using upsetting the line-height calculations because the font is changed after everything has loaded.

The first thing I would try is to fix the line-height as exact pixels as at the moment the 1.5 equates to 22.5px and browsers can’t really handle half pixels so have too round up or down or do sub pixel anti aliasing. I would try this first:


.genesis-nav-menu a,.genesis-nav-menu{line-height:23px}

If that has no effect then the next step would be to also change the rem top and bottom padding to fixed pixel height padding on the nav elements as rems are also rounded up and down and could also be upset when the custom font is added. It will have little detriment to the menu to change to pixel padding for that small element and is the first thing I would try.

If that doesn’t solve the issue then remove the custom font and see if that’s the trigger or not which may help in knowing where else to look if that does not solve the issue.

These are all the usual things I would do locally when trying to debug a problem but as I can’t replicate the problem locally you will have to go through this process yourself with your online version I’m afraid.

14

Paul, I cannot thank you enough. The custom font is definitely causing the shifting because falling back to using just Open Sans makes it work just fine. Thank you again!!

15