css - Black Box around headline not displaying correctly in Firefox -
a while ago asked question how make black box padding around two-lined headline.
i works pretty well, except old ie, but: in firefox, looks ragged. sometimes, mean, every second headline, or if scroll , down. dont know if visible every ff-user, yourself:
http://fabsblog.dev.ka-mediendesign.de/
i tried recreate fiddle, depends on context, have recreate of blog. here css (there few browser hacks, because not every browser displays same.):
#page .headline-black { border:none; /* 2x "padding" left */ border-left: 50px solid #000; } #page .headline-black h1 { display: inline; background-color: #000; padding: 8px 0 9px 0; padding: 8px 0 8px 0\9; font-size: 22px; line-height:44px; } @-moz-document url-prefix() { #page .headline-black h1 { padding: 8px 0 7px 0; } } #page .headline-black h1 .indent { position: relative; /* "padding" left */ left: -25px; } #page .headline-black h1 .heading, #page .headline-black h1 .heading { color: #fff; background: #000; }
i dont know why or how, sollution give half pixel padding, firefox round way wants to.
@-moz-document url-prefix() { #page .headline-black h1 { padding: 7.5px 0 7.5px 0; } } this extremely hacky. have change in future.
Comments
Post a Comment