I keep noticing that our top tabs do not always display correctly. There’s exactly three situations I notice:
- The top tabs display correctly, they’re attached to the top border like they should be.
- The top tabs are 1 pixel below where they should be, you can see this even if you’re not zoomed in.
- The top tabs are 1 pixel above where they should be. Selected tabs don’t look selected. The tabs look detached.
Here’s an example of where they’re correct:
They’re sitting right on the line. Perfect.
Here is where they are wrong:
Hard to see, but there’s a very slight dip.
You can see the edge of the tab crosses the border of the content area.
And here’s where they bother me the most:
Totally wrong. The strange thing is that I’ve dug into this a little bit and I could not use the page inspector to get it to work correctly. Even if you position the tab farther down, it simply just goes behind the content area. It doesn’t matter if the z-index is one million. Nothing will put the tab on top. I’ve also ruled-out it being a Chrome bug. It happens in Firefox too.
The first two examples are confusing because both pages where it’s correct and incorrect use the same exact styles. The last example is confusing because there are no custom styles, it’s the default EWL theme. But this doesn’t happen in Health Alliance or BookMarshal. Especially since I couldn’t get page inspector to get it to be correct, I’m out of ideas of what this could be.