> On Aug 13, 2016, at 8:52 AM, 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.
As Tom notes, you specify two different values for border-width. That matters as this affects where the border is positioned (as the computed value is a non-integer). Browsers ‘pixel-snap’ borders to the nearest pixel, to make sure the border looks crisp. > Safari and Firefox show the hover-state line a bit too low; Chrome Canary > shows it exactly where it needs to be. It could be that Chrome takes a different decision where to snap the border then Safari / Firefox. There are multiple things that will affect this. For one, you don’t specify a `line-height`, the default value will be normal. Depending on the font-family in use (and the availability of that font on any platform) this can be quite different (the difference at our font-size can 1 or 2 pixels). Second, again, that value almost certainly competes to a non-integer, that will contribute to the overall height of the box(es) and affect the position of the border. Other factors that may affect this: you specify height for multiple boxes. Does this compute to an integer ? Ditto for your use of padding-top. > 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! There is nothing inherently wrong with what you are attempting, but you are up to the limits of display technology. If you compare carefully, you’ll probably notice small differences between a retina and a non-retina display. Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ 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/
