Main navigation rollover and white border

[jknetdesign]

When you squeeze this listing template to iPad width you’ll see two rows of navigation. How can I fix the Photo tab? When you roll over it pushes the other tabs out of line.

Also, on mouse out there’s a white border that appears. My thought is that it’s on focus?

I’ve Firebugged the best I could and need with the proper selectors.

http://www.catherinemcinnis.com/listings/7285-osprey-circle/

[jkinney768]

Hello,

To fix your layout issue on hover you need to change:

.postid-2113 .entry-content a:link:hover {
    color: #726258 !important;
    border-bottom: none !important;
}

To…

.postid-2113 .entry-content a:link:hover {
    color: #726258 !important;
    border-bottom: 1px solid transparent !important;
}

Or whatever kind of border you want. The issue was you were taking away the border when hovering which affected the layout.

You can easier detect those kind of issues by forcing hover states in your web tools (I use Chrome dev tools). Here are some instructions on how to do that, in case you’re unfamiliar: https://developer.chrome.com/devtools/docs/dom-and-styles#trigger-pseudo-classes-on-element

[jknetdesign]

That works thank you.

[Author]

Posts