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.

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

Similar Messages

Spry Menu rendering improperly in Firefox - PLEASE HELP

Hello:
I have searched the forums and the web and can't find the
solution to the following problem.
I have a vertical spray menu with flyouts (CS3). Works great
in IE, in Firefox, the flyouts go to the far right of the page.
They used to be OFF the page, but I fixed that, I just can't figure
out the final fix.
Can someone please help? TIA!
URL:
http://www.yourhonor.com
Code for Menu bar:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 85%;
cursor: default;
width: 130px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-weight: bold;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
background-image: url(../images/Images/ButtonMaroon.png);
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 130px;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 85%;
position: absolute;
z-index: 1020;
cursor: default;
width: 130px;
font-family: Arial, Helvetica, sans-serif;
left: -1000em;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.5em;
color: #000000;
text-decoration: none;
background-image: url(../images/ButtonGold.png);
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
color: #663300;
background-image: url(../images/ButtonBronze.png);
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
color: #660000;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(../images/ButtonGold.png);
background-repeat: repeat-y;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(../images/ButtonBronze.png);
background-repeat: repeat-y;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
f\loat: left;
display: inline;
width: 130px;

Hi,
You have made too many changes to the original stylesheet.
Please have a look at my remarks here.
I hope this helps.
Ben

Illustrator CS5 rendering Bug?

Hi All,
This is my first post in this forum.
Recently I found this shared PDF rendering bug
by both Adobe products: Illustrator CS5 and
Adobe Reader X.
Look at the attached images.
Although these screenshots are from
Adobe Reader X and Nitro PDF Reader,
these shows exactly the rendering differences
between Illustrator Cs5 and Cs4.
The same PDF file opened fine in Illustrator CS4
and 8 different PDF viewers. It does not shows
these square clipping boxes around the words
"La Tormenta".
Why Adobe changed the way its products interpret
pdf files?
If you want, you could download the pdf file:
http://dl.dropbox.com/u/3834621/La_Tormenta_for_PDF_export.pdf
(77k)
Thanks in advance!
Alejandro

Hi Scott,
Just exported the file in different PDF versions
1.3 / 1.4 / 1.5 / 1.6
Tell us which version(s) does not invoke
clipping masks in your different Illustrator's
versions:
http://dl.dropbox.com/u/3834621/La_Tormenta_for_PDF_export_v13.pdf
http://dl.dropbox.com/u/3834621/La_Tormenta_for_PDF_export_v14.pdf
http://dl.dropbox.com/u/3834621/La_Tormenta_for_PDF_export_v15.pdf
http://dl.dropbox.com/u/3834621/La_Tormenta_for_PDF_export_v16.pdf
Thanks in advance!
Alejandro

How much money i will get, if i tell you a new bug in Firefox 8

how much money i will get, if i tell you a new bug in Firefox 8, i found a new bug in Firefox 8, i tested this bug on chrome but their is no issue with this .

About the only way you could get money is by reporting a serious or critical security vulnerability that has not been reported before.
http://www.mozilla.org/security/bug-bounty.html
http://www.mozilla.org/security/bug-bounty-faq.html

Small screen rendering bug

There is a very subtle rendering bug when overlapping text.
I'm not sure if this bug is worth fixing, as depending on how
Mars rendering is implemented, it could be very difficult to fix.
When overlapping to sections of text, the anti-aliased pixels
will compound between overlapping lapping lines. This leads to a
slightly "heavy" look at the point of overlap. This most affects
double-layered / slightly-offset text used for shadowing, as the
outlines of the two text areas match closely. It affects screen
presentation and not print.
The easiest way to demonstrate this bug is to copy and paste
a text node multiple times into the SVG document. The rendered text
will darken each time, until eventually, the text has a hard,
jagged outline. The affect is easiest perceived with smaller font
text because the ratio of anti-aliased pixels to 100% "solid"
pixels is greater.
The preferred behavior in this case would be to pick the
darkest color point for that pixel from among all the overlapping
anti-aliased pixels for each channel of color. The resulting
anti-aliased pixel layer would then need to be blended as normal
with any other overlapping layers... This could be tricky, but I
think it would increase the overall quality of screen
rendering.

Unfortunately, this bug is pretty much beyond our control.
Pixel-level rendering issues like this are handled entirely within
the Acrobat core -- our plugin parses Mars SVG, converts it into
Acrobat-friendly data structures, and then hands everything 'over
the wall' for the Acrobat core to render.
We have some control over the renderer's low-level settings,
and I hope to exploit that in the next major release of the Mars
plugin to take care of some other pixel-level rough-rendering bugs
we've been seeing. However, this particular bug looks way too
subtle for us to address with the level of renderer access we're
given ...

Finder column view rendering bug

See attached image.
Quite often I get this rendering bug. It has been around since Mac OS X Lion and is still occuring in Mountain Lion.
The only way to fix the rendering bug is to switch to another type of view and them back to the columns view.
Can anybody confirm this bug?

I've never noticed this before. Here is another discussion on the same topic--no solution there either:
http://forums.macrumors.com/showthread.php?t=1530290

NavigateToURL bug in FireFox?

Hi all,
I'm expreiencing a strange bug with FireFox... I have the
following example application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
private function onClick():void {
navigateToURL(new URLRequest("abc.html"));
]]>
</mx:Script>
<mx:Button label="test" click="onClick()"/>
</mx:Application>
So, basically, when I click the "test" button, the browser
should go to "abc.html".
Now, if I run the application locally, it works perfectly as
expected in both IE and FF. But, if I run the application off my
webserver (Apache2), then IE still works perfectly, but FF doesn't.
The behaviour I get in FF is as follows: when I click on the
button, roughly half of the time it will work as expected (ie opens
"abc.html" in a new tab), and the other half of the time FF
displays a "FireFox prevented this site from opening a popup
window" message.
Now the fact that this only occurs when the application is
served remotely is obviously due to FF's security model. But the
weird part (bug?) is that the "blocking" occurs randomly. If I just
click the "test" button a dozen times (slow or fast) the result
will be around half a dozen new windows, with the other half a
dozen blocked :(
So, has anyone experienced this problem before? Can you spot
anything wrong with the code in my example above? I've tried the
example on another PC, and it has exactly the same problem - both
PC's are running FireFox 1.5.
Any thoughts would be really appreciated.
Paul.

Hi leotemp, thanks for you reply. I've had a play with the
IFrame approach in the past, and it introduces some other problems
for the type of app I'm writing (can't really say what that app is
yet).
I've done some more playing with the problem, and how's this
for wierd mis-behaviour? ... I wrote an openNewWindow() JavaScript
function and placed it into the HTML wrapper that loads the swf
file. Then, if I call that function using navigateToURL, the same
problem occurs. But if I call that function using
ExternalInterface.call("openNewWindow","abc.html") then it *almost*
works... you see, the ExternalInterface version works well if the
call is made from a click handler (like the example above), but
unfortunately, I need it to work in the result handler of a SOAP
service call... and there, it is blocked again! Though this time
the blocking is a lot more consistant... ie it blocks about 9 out
of 10 tries :(
I'm assuming that the problem is due to FF trying to
differentiate between popups that are the direct result of user
clicks, versus popups that result from automatic scripts - blocking
the latter, but not the former.
Any other ideas?!
Paul.

How long till you slackers fix the clipboard bug in firefox?

seriously im ditching firefox as of now for opera cuz no one seems to be interested in fixing the virtual private clipboard bug in firefox.
It is nothing short of infuriating & frustrating!!!!!!!! CMON U SLACKERS!!!!

Delete a possible user.js file and numbered prefs-##.js files and rename (or delete) the prefs.js file to reset all prefs to the default value including prefs set via user.js and prefs that are no longer supported in the current Firefox release.
*http://kb.mozillazine.org/Preferences_not_saved
*Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)

Shared rendering bug between Reader X and Cs5?

Hi All,
This is my first post in this forum.
Recently I found this shared PDF rendering bug
by both Adobe products: Illustrator CS5 and
Adobe Reader X.
Look at the attached images.
The same PDF file opened in Illustrator CS4
or 8 different PDF viewers does not shows
these square clipping boxes around the words
"La Tormenta".
Why Adobe changed the way its products interpret
pdf files?
If you want, you could download the pdf file:
http://dl.dropbox.com/u/3834621/La_Tormenta_for_PDF_export.pdf
(77k)
Thanks in advance!
Alejandro

Post your question in the forum for Acrobat SDK.

Ios7 rendering bug

I am having the same problems as outlined in this post (basically that ios7 has a rendering bug and flickering 'borders' appear around some objects), but i can not get the posted solution (2nd post from the bottom) to work for me.
I put this in the <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />, and it gets rid of the squiggly render bug, but the animation plays at 100%, the size at which i designed it in edge, instead of resizing to fit the frame like it usually does. if i resize the animatinon, setting the scale= values to .25, so it fits entirely in the iphone window, the outlines reappear.
Any help would be much appreciated!

I was having the same problems then I found some other answers to a similar problem here. Restarting the iPad did not solve the issue, but "resetting all settings" did. Go to Settings>General>Reset>Reset all settings. After this, you'll have to re-register your wi-fi, iMessage, FaceTime accounts, as well as set your wallpaper back to whatever it was before - resetting all settings changes the wallpaper to one of the newer wallpapers.
Hope this helps!

IE vs Firefox - Popup rendering bug

I have a Flex app that uses the PopupManager class to display
various objects as popups. When I run the app in IE the popups
display just fine. However, running it in Firefox causes the popups
not to render fully. I have Flash Player 9 installed on both
browsers. My code looks something like this:
PopUpManager.addPopUp(my_component, this, modal);
PopUpManager.centerPopUp(my_component);
In IE the popup renders and centers. In Firefox the
background of the popup renders, sized correctly, but in the upper
left corner of the browser. None of the rest of the component or
its contents (children) render at all either. The component happens
to be a TitleWindow which has an X in the upper right for closing
the popup, but in FF that of course isn't there so there is no way
for the user to close the popup without reloading the app.
I'm not sure if there's a bug with Player 9 or not, but if
anyone has run across this problem or knows something I can try,
please do share. Thanks.

Hi Blarman74,
I have found in IE that to use the page-break-before or page-break-after css the item needs to be at the outermost level.
as you have 3 tables inside a table, it won't work as you expect.
It works fine if you close all tags back to the body tag and then reopen them.
TABLE - TR - TD
TABLE - TR - TD
/TD - /TR - /TABLE
/TD - /TR - /TABLE
TABLE - TR - TD
TABLE - TR - TD
/TD - /TR - /TABLE
/TD - /TR - /TABLE
TABLE - TR - TD
TABLE - TR - TD
/TD - /TR - /TABLE
/TD - /TR - /TABLE
rather than
TABLE - TR - TD
TABLE - TR - TD
/TD - /TR - /TABLE
TABLE - TR - TD
/TD - /TR - /TABLE
TABLE - TR - TD
/TD - /TR - /TABLE
/TD - /TR - /TABLE
You will need to alter your template to accommodate this.
Hope this helps
Regards Michael

Flex 3 locale swf loading bug on firefox

Hi all
I REALLY need your help here
if anyone knows this bug or have any idea how to deal with it, it would really mean a lot to me
i've been tring everything
description:
i'm building an application using flex 3, where all texts are being localized via the locale loaded at runtime
i suspect that for some reason the locale swf i'm loading isn't updating elements of the page
as you can see in the image below, texts appear cut off.
this happens to me only in firefox, no matter which page of the app is being displayed
any ideas?
appreciate your time in answering
Yariv Gilad

Hello and thank you for your quick answer
the text is indeed right, and what you say make sense to me
how can i proceed from here though?
how can i fix the "sizing and positioning problem" ?
the UI components are there and are being populated dynamically through the locale
is there a way to force them to update?
is this the right direction at all?
any other ideas?
just to note that if i hard-code the text into the components they are rendered perfectly
so i don't see a reason to change their position or size...
thank you for your time
Yariv Gilad

Rendering errors with firefox and chromium SPECIFIC to Arch LInux

Guys - can someone please browse to https://www.americanexpress.com and click on "User ID" using whatever browser? For me under both Firefox and Chromium, there is some sort of rendering error that prevents me from doing so. In the screenshot you can see how there is a "phantom menu" that appears above the login dialog:
I booted into a live ubuntu 11.10 CD and tried from there using firefox - no such error. Now I'm asking myself if this is somehow related to Arch and if so which package should I use in a bug report... thanks for the interest.
EDIT: x86_64 and nvidia drivers.
EDIT2: x86_64 and nouveau have the same result.
Last edited by graysky (2012-01-02 13:37:03)

Hi,
I see errors too on www.youtube.com/charts after enter some text in the search box, the page dont render correctly.
This is happening in both 32 and 64 bit Arch with firefox 9.0.1 and Nvidia, chromium render is fine.
If someone need some more info, please tell me , I dont know where to start.
Firefox on ubuntu render correctly.

CSS/HTML rendering bug

I created an HTML/CSS code for rendering some shapes. No Javascript. No images. Just plain HTML/CSS. The result displays a bug in an element, compared with Chrome. This is not the first time I'm getting this kind of errors in Firefox browsers. Other HTML/CSS elements created previously have rendering issues, but they seem fine in other browsers.
You can verify it here: http://codepen.io/doublecaffe/pen/QwmZJB
Image attached. I'm using Firebox v36, Firefox Developer Edition 37.0a2 and Chrome 40.0.2214.115 m.
Any clue about this or fix in a future update?
Thx!

Looks fine here in Firefox 36.
You can try to disable OMTC and leave hardware acceleration in Firefox enabled.
*<b>about:config</b> page: <b>layers.offmainthreadcomposition.enabled</b> = false
You can try to disable hardware acceleration in Firefox.
*Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"
You need to close and restart Firefox after toggling this setting.
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
*https://support.mozilla.org/kb/upgrade-graphics-drivers-use-hardware-acceleration

Rendering bug?

Can someone reassure me that I'm not crazy?
When I visit http://thaddeusrex.com/presskit.html using Safari [Version 2.0.4 (419.3)] and reload the page a couple times, the content in the left column is doubled (even tripled) and seems to redraw incorrectly. This happens on a MacBook, a PowerMac G4, and a PowerMac G5.
This doesn't seem to happen in any other browsers (IE 6 or 7 Win, Firefox Mac). Even the WebKit nightly renders it fine, and the code looks good to me.
Can anyone reproduce and/or explain? Is this a logged bug?
Thx
Matt

well, this is what I did
I previewed the online and offline pages in safari, and then viewed the source for each page.
I copied the source into new text docs and ran BBEdit's "find differences..." function.
No difference, but Safari displays the one from the server differently.
There must be something in the way it's pulling everything over that's confusing it. (Like it's drawing before it has all of the css info it needs, and is then redrawing, but not cleanly, or not completely, or something.)
I will continue to test...

Rendering bug in Firefox

Similar Messages

Maybe you are looking for