Css vary in firefox

• 

  contenterra · Member · Feb 16, 2015 at 9:18 am

  • Copy link
  • Add topic to favorites

  Hi,
  Following link works well in chrome but the alignments distort in firefox.
  https://contenterra.wordpress.com/latest-updates/
  Can anyone please help me out to resolve this issue?

  Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Feb 16, 2015 at 2:34 pm

  • Copy link

  This is not something I can do for you, but I can try to help guide you.

  First, I noticed that even without any CSS applied, you have some formatting problems coming from CSS you have added inline: https://cloudup.com/cv6UXffb8wb

  I would recommend removing any CSS such as “margin-top: -70px” from the page’s HTML because a lot of inline CSS (especially structural) are hard to follow that way and will continue to make it harder and harder for you to troubleshoot your own work, which appears to be happening already. Once you have the HTML cleaned up, you will be in a much better position to edit CSS from the CSS editor and it will also be easier for people to help you with questions. It could take some work to clean up the HTML. You aren’t required to do it, but I would strongly recommend it.

  I’m not sure why Firefox looks so different compared to Chrome—some browsers are more forgiving than others.

  Here are some specific ideas you can try out:

  Try adding a “clear: both;” property to the “WHAT’S NEW IN IMAGE OPTIMIZATION” heading. You could do this in CSS using that “title” class you added instead of putting the style inline (which really do make it a ton harder to work with later, as you can see). Also, I’d recommend using “padding-top” on that instead of the “margin-top” rule you have now. Margins will collapse in interesting ways, which is part of how the box model works.

  Next, try adding a “clear: left;” line to the “.group-left” block in your custom CSS.