Den här webbplatsen har begränsad funktionalitet medan vi utför underhåll för att förbättra din upplevelse. Om en artikel inte löser ditt problem och du vill ställa en fråga har vi vår gemenskap som väntar på att hjälpa dig på @FirefoxSupport på Twitter, /r/firefox på Reddit.

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

Rendering bug in Firefox

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

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

more options

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