Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I created a ribbon for a H1 title tag. Everything seems to work fine in Chrome, Safari, and IE9, but for some reason it breaks in Firefox.

Here's a screenshot of how it looks in Firefox:

enter image description here

Here's my CSS for the H1 tag:

#home .content h1 {
text-align: left;
position: relative;
color: #fff;    
margin: 0 -25px 20px -30px;
padding: 5px 0; 
background: #939393;
text-indent: 30px;
font: 1.3em 'Oswald', sans-serif;
}

#home .content h1:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
border-width: 0px 10px 10px 0px;
border-right-color: #464646;
left: 0px;  
}

I've tried

overflow: hidden;

But that doesn't seem to work.

I've also tried

-moz-box-sizing: border-box;

But that didn't seem to resolve anything either

I've messed around with some of the margins and padding as well, but nothing seems to make it change in FF.

Here's a link to the site (currently as a demo): http://dev.boostmktg.com/oas

Any suggestions?

share|improve this question
could you provide html as well please – Eric Lemos Feb 12 at 19:32
@EricLemos Post edited to include URL to site. Thanks! – ultraloveninja Feb 12 at 19:35
what browser are you using? – Eric Lemos Feb 12 at 19:36
can you remove the h1 from .entry? – Eric Lemos Feb 12 at 19:43

1 Answer

up vote 1 down vote accepted

It looks like text-indent is pushing your ribbon 'shadow' 30 pixels to the right.

I managed to get it working in firefox by removing text-indent and giving h1 left padding of 30px

final css looks like this:

#home .content h1 {
text-align: left;
position: relative;
color: #fff;    
margin: 0 -25px 20px -30px;
   /* add left padding of 30 pixels */ 
padding: 5px 0 5px 30px; 
background: #939393;
   /* no need for this text-indent: 30px; */
font: 1.3em 'Oswald', sans-serif;
}

#home .content h1:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
border-width: 0px 10px 10px 0px;
border-right-color: #464646;
left: 0px;  
}
share|improve this answer
Awesome, thanks! That did the trick. Don't know why I had the text-indent in there in the first place, but thanks again! – ultraloveninja Feb 12 at 19:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.