0

A while ago I asked a question about how to make a black box with padding around a two-lined headline.

I works pretty well, except for old IE, BUT: In Firefox, it sometimes looks ragged. With sometimes, I mean, every second headline, or if you scroll up and down. I dont know if this is visible for every FF-User, just look for yourself:

http://fabsblog.dev.ka-mediendesign.de/

I tried to recreate it as a fiddle, but as it depends on the context, I would have to recreate most of the blog. Here is the CSS (There are a few browser hacks, because not every browser displays it the 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 a {
color: #fff; 
background: #000;
}
Community
  • 1
  • 1
Sebastian Starke
  • 5,198
  • 3
  • 24
  • 35
  • The reason for this behaviour seems to be, that the h1 element has no floating and sometimes sticks out the heading element. But if it had float, the whole trick wouldn't work anymore. – Sebastian Starke Jul 18 '13 at 11:36

1 Answers1

0

I dont know why or how, but the sollution was to give a half pixel padding, so Firefox could round it the way it wants to.

@-moz-document url-prefix() {
    #page .headline-black h1 {
        padding: 7.5px 0 7.5px 0;
    }
}

This is extremely hacky. I will have to change that in the future.

Sebastian Starke
  • 5,198
  • 3
  • 24
  • 35