449911 - Inconsistent rendering of CSS in firefox 3.0

Status: VERIFIED INVALID

(Firefox :: General, defect)

Description

[Jaroslav Tulach]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008080115 Mandriva/1.9.0.1-5mdv2009.0 (2009.0) Firefox/3.0.1
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008080115 Mandriva/1.9.0.1-5mdv2009.0 (2009.0) Firefox/3.0.1

I am no CSS expert, but the behaviour that I am seeing on my site when rendering it with firefox 3.0 makes me believe I am observing some firefox bug. 

My site is regular mediawiki with my custom stylesheet based on original MonoBook. I made it more darker and used some background-images on top of the original CSS files.

The problem I see demonstrates in "navigation" and "toolbox" areas on left of the page. Both these areas shall have yellow background with rounded top right corner. However the actual rendering of firefox 3.0 is often different. Surprisingly depending on the selected element ("main page", "sources", "dear reader...", "types of api", "api design patterns", etc.) the rendered result is different. This "variance" makes me believe this is a bug in firefox, however as I am no expert I am looking forward to your evaluation.

Reproducible: Always

Steps to Reproduce:
1. Go to http://wiki.apidesign.org
2. Click to various links on left "main page", "sources", etc.
3. Observe rendering of the navigation and toolbox area on left
Actual Results:  
I'll attach snaphosts.

Expected Results:  
I'll attach snaphosts.

Firefox 2.0.x rendered the page acceptably.

Comment 1

[Jaroslav Tulach]

Attachment: One example of wrong rendering

Comment 2

[Jaroslav Tulach]

Attachment: Another example of wrong rendering

Comment 3

[Jaroslav Tulach]

Attachment: Rendering that I'd like to achieve

Comment 4

[Mardeg]

So far in Firefox 3, Opera 9.5, IE8, and Hv3, the yellow background is only showing from the bottom of the actual content box. I can attach screenshots showing this in all 4 browsers if you like

Comment 5

[Mardeg]

Attachment: From top to bottom: IE8, Opera 9.5, Hv3, Firefox 3

Screenshots, see where the yellow background starts where it lines up with the bottom of the content?

Comment 6

[Mardeg]

DOMi points to a DIV with the ID column-content being the culprit with a width starting at the left edge that overlays the DIV with ID p-navigation and portlet class. DOMi is at https://addons.mozilla.org/en-US/firefox/addon/6622

http://getfirebug.com/ is also worth mentioning for web development.

Given that this behaviour is consistent across more Acid2 compliant browsers, this should probably be resolved INVALID.

Comment 7

[philippe (part-time)]

(In reply to comment #6)

> Given that this behaviour is consistent across more Acid2 compliant browsers,
> this should probably be resolved INVALID.
>

I think so, yes.
All that negative (left-) margin business on #column-content makes it cover  the background of the div's with .pBody. #column-content is floated, and stacked higher than the left column.

You can do what you want with 
.pBody {position:relative;} 

Comment 8

[Jaroslav Tulach]

Thanks very much for prompt reply and for your hint. Yes, .pBody {position:relative;} helps. Sorry for false report, only the fact that the results are random made me falsely believe that this could be a bug.