This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Rendering bug in Firefox

  • 2 replies
  • 1 has this problem
  • 1 view
  • Last reply by bdepaepe

bdepaepe
bdepaepe
more options

I'm developing a (Joomla-)website. It is still in testing stadium, but it can be found on www2.kortrijkserefs.be.

There is a problem in the banner section. Sometimes (approx 20% of the times) one of the banners is moved to the next line, sometimes the banners are shown 2 by 2 (which is the purpose). It seems to happen at random, while the page source is identical.

I assume that the same source code would always render the same page, so I think it must be a bug.

Some extra info:

  • All banners are the same size. The images are 480x80, the Joomla-settings are also all set to 480x80.
  • It just happens with random banners. There isn't a banner which is always involved. (I've tested that extensively.)
  • It seem to happen at random moments. It just never seem to happen on the first page load. (It is just a feeling, no hard proof.)
  • I have tested with another browser (a browser with a blue e-formed logo): no problem, the rendering is perfect.
I'm developing a (Joomla-)website. It is still in testing stadium, but it can be found on www2.kortrijkserefs.be. There is a problem in the banner section. Sometimes (approx 20% of the times) one of the banners is moved to the next line, sometimes the banners are shown 2 by 2 (which is the purpose). It seems to happen at random, while the page source is identical. I assume that the same source code would always render the same page, so I think it must be a bug. Some extra info: *All banners are the same size. The images are 480x80, the Joomla-settings are also all set to 480x80. *It just happens with random banners. There isn't a banner which is always involved. (I've tested that extensively.) *It seem to happen at random moments. It just never seem to happen on the first page load. (It is just a feeling, no hard proof.) *I have tested with another browser (a browser with a blue e-formed logo): no problem, the rendering is perfect.

Chosen solution

Hi bdepaepe, I've had a look and I believe I have experienced the error you mean and solved it.

The reason this occurs some of the time, but not always is because the source code is not the same each time, as the adverts change every refresh. The error only happens when two of the < div> tags of class 'banneritem' which are on top of each other have a height of 84px each as opposed to 80px (although even if this is the case the rendering issue doesn't always happen).

The reason that some of the 'banneritem' < div> tags have a height of 84px is because inside them there is an <a> tag which contains an < img> tag, and the <a> tag has not been set to 'display: block;'. <a> tags are inline elements by default, so shouldn't be used to hold block level elements such as images unless the styles for the <a> tag include 'display: block;'.

Read this answer in context 👍 1

All Replies (2)

WilIP
WilIP
more options

Chosen Solution

Hi bdepaepe, I've had a look and I believe I have experienced the error you mean and solved it.

The reason this occurs some of the time, but not always is because the source code is not the same each time, as the adverts change every refresh. The error only happens when two of the < div> tags of class 'banneritem' which are on top of each other have a height of 84px each as opposed to 80px (although even if this is the case the rendering issue doesn't always happen).

The reason that some of the 'banneritem' < div> tags have a height of 84px is because inside them there is an <a> tag which contains an < img> tag, and the <a> tag has not been set to 'display: block;'. <a> tags are inline elements by default, so shouldn't be used to hold block level elements such as images unless the styles for the <a> tag include 'display: block;'.

bdepaepe
bdepaepe Question owner
more options

Thank you for the answer, WilIP. I adapted it and it seems to work.