0

I am working on a redesign of my website and I've run into a strange problem. I have a simple paragraph that is align: center. It's displaying perfectly in Chrome, but the text is shifted to the right in Firefox and IE.

I have all paragraph tags set to margin: 0px as a baseline. I noticed that when I remove this, Firefox adds its standard 1em margin to top and bottom and the text becomes centered. However, I need the margins at zero for my layout.

Here is my HTML:

<div id="headline">
<p>It’s <span>easy</span> to get a great website, when you know how.</p>
<div>

Here is the relevant CSS:

p {
  margin: 0px;
  padding: 0px;
}

#stage #headline p {
  font: bold 3em/1.2em Montserrat,Helvetica,Arial,sans-serif;
  padding: .2em 6%;
}

#stage #headline p {
  text-align: center;
}
1
  • Add clear:both; to the #stage #headline p statement (either one).
    – MyStream
    May 10, 2015 at 23:05

2 Answers 2

0

There is an element in your header content that is pushing down into the area to the left of your paragraph.

Add clear:both; to the #stage #headline p statement (either one) to resolve the issue, visually.

1
  • Thanks! - see another note below about using :after{}, in case that's a better fix if Chrome is already playing nicely.
    – MyStream
    May 10, 2015 at 23:17
0

Inside #smallMenu > .small-inner there are uncleared floating elements. They push the text in the paragraph to the right.

You can use

#smallMenu > .small-inner {
    overflow: hidden;
}
1
  • As an alternative, you could use :after{content:"";height:0;clear:both;} ?
    – MyStream
    May 10, 2015 at 23:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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