So far, this problem only happens in Firefox. This centered image instead gets floated to the right (and off the screen). Here's the relevant code I grabbed with Firebug:

<p style="text-align: center;">
<img width="880" height="191" alt="" src="http://tedxhonolulu.org/wp-content/uploads/2011/01/111111.png" title="Join Us on November 11th, 2011" class="aligncenter size-full wp-image-361">
</p>

The actual image:

This problem was reported by one of my users, who just got a new Macbook Pro. He said that the site renders fine in Safari. The image with the "11.11.11" date is centered below the intro video, as my team had intended.

But in Firefox, the centered image gets floated to the right instead. The website URL is http://tedxhonolulu.org/.

Any suggestions of how to fix this? Since the site looks okay in other browsers, it might just need a workaround for Firefox. Thanks!

1 answer

2
points

I'm not entirely sure why, but Firefox seems to be treating the banner as if it is floated to the left (and the video as if it's floated to the left as well). If you set the p that contains the image to clear: both; that fixes it and shouldn't cause any issues in other browsers.

Answered about 8 years ago by Michael Martin-Smucker
  • Michael, thanks for your answer. So you're saying the code should be changed to this? <p style="clear: both;"> <img width="880" height="191" alt="" src="http://tedxhonolulu.org/wp-content/uploads/2011/01/111111.png" title="Join Us on November 11th, 2011" class="aligncenter size-full wp-image-361"> </p> I'm new to all this, so would I have to go into the theme files in WordPress to change this? Or just go to the relevant page and change the code in the "HTML" tab? Marcus about 8 years ago
  • Hmm, it's been a little while since I've used WordPress. I would guess that you can get to it from the "HTML" tab on the relevant page, but I'm not sure. Hopefully from there you can set it to something like this: `<p style="text-align: center; clear: both;"><img... /></p>`. Michael Martin-Smucker about 8 years ago
  • Michael, that code fix worked in Firefox! You were right, I just had to open the relevant page and add "clear: both;" in the "HTML" tab. The site was unaffected in the other browsers. You were a big help, thanks! Marcus about 8 years ago