On Fri, Aug 12, 2016 at 7:52 PM, John J <cr8...@gmail.com> wrote: > At the link below, I'm having trouble getting the hover state to look the > same across browsers. On hover, there should be a red line under the > hovered-over item as wide as the thin gray line below it, as thick as that > line is. > > The thickness seems to match, but the positioning is off, browser to > browser. > > Safari and Firefox show the hover-state line a bit too low; Chrome Canary > shows it exactly where it needs to be. > > Am I working against myself, trying to do something that's too tricky by > trying to get a hover element to line up with, basically the bottom of the > header which is 3 parents up from the nav? > > Thank you for any clues! > > John > > > http://john-a-johnson.com/contact.php
I personally wouldn't use rem's for all of the units involved with that structure. rem is based on the root element's font size, making it - I assume - dependent on how each browser renders a font, which is where your slight differences come from. Also, the border widths you have set are different. -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
