We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Sök i support

Akta dig för supportbedrägerier: Vi kommer aldrig att be dig att ringa eller skicka ett sms till ett telefonnummer eller dela personlig information. Rapportera misstänkt aktivitet med alternativet "Rapportera missbruk".

Läs mer

Denna tråd har arkiverats. Ställ en ny fråga om du behöver hjälp.

Rendering bug in Firefox

  • 2 svar
  • 1 har detta problem
  • 1 visning
  • Senaste svar av 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.

Vald lösning

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;'.

Läs svaret i sitt sammanhang 👍 1

Alla svar (2)

WilIP
WilIP
more options

Vald lösning

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 Frågans ägare
more options

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