Rendering bug in Firefox
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;'.
Ler a resposta no contexto 👍 1All Replies (2)
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;'.
Thank you for the answer, WilIP. I adapted it and it seems to work.