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

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -