Inconsistent rendering of CSS in firefox 3.0

VERIFIED INVALID

Status

()

VERIFIED INVALID
10 years ago
10 years ago

People

(Reporter: jst, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(4 attachments)

(Reporter)

Description

10 years ago
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.
(Reporter)

Comment 1

10 years ago
Created attachment 333055 [details]
One example of wrong rendering
(Reporter)

Comment 2

10 years ago
Created attachment 333056 [details]
Another example of wrong rendering
(Reporter)

Comment 3

10 years ago
Created attachment 333057 [details]
Rendering that I'd like to achieve

Comment 4

10 years ago
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

10 years ago
Created attachment 333060 [details]
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

10 years ago
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

10 years ago
(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;} 

Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → INVALID
(Reporter)

Comment 8

10 years ago
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. 
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.