Firefox 1.5.0.1 CSS2 Rendering Bug

Discussion of bugs in Mozilla Firefox
Post Reply
Shining Arcanine
Posts: 18
Joined: December 6th, 2004, 5:19 pm

Firefox 1.5.0.1 CSS2 Rendering Bug

Post by Shining Arcanine »

http://www.positioniseverything.net/exp ... ndent.html

The bug is evident in example 11, as the only difference between example 1 and example 11 is "display: inline;" and the specification specifically says to ignore display with the exception of "display: none;." It is quoted on that webpage as saying so. Ironically the only browser that renders this correctly is IE7 as upon seeing Firefox and Opera render it one way and IE7 render it another way, I reported it as an IE7 bug, was asked for more feedback and then went and did my homework. Pretty funny eh?

Anyway, if this has not already been reported, would someone be so kind as to report it in Bugzilla? I would but the last I checked Bugzilla made email addresses public and I am trying to avoid placing my email on the internet without some sort of protection from spambots.
old np
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old np »

Code: Select all

Did it work in 1.5?
|-Yes: File it as a bug.
|-No: Try a trunk nightly. Is it a problem with a trunk nightly?
   |- Yes: Search for it on Bugzilla. Did you find it on Bugzilla?
       |- Yes: CC yourself and wait.
       |- No: File a new bug.
   |- No: It's fixed already.
User avatar
Grist
Posts: 836
Joined: January 27th, 2006, 9:20 pm

Post by Grist »

Example 1 and Example 11 display the same for me in 1.5.0.1. Despite the fact that the div in 11 is set to display: inline, Firefox still generates a block box for that element. This can be verified with the DOM inspector.

The example states that the floated div should butt up against the right edge of the background image. The containing div has a padding of 1em, however, and it seems that the floated div is against the left padding edge of the containing div + its left margin.

I'm not sure what the bug here is supposed to be.
Shining Arcanine
Posts: 18
Joined: December 6th, 2004, 5:19 pm

Post by Shining Arcanine »

This is what I am seeing in both Opera and Firefox:

http://img344.imageshack.us/my.php?imag ... ing7nk.png

Grist, is your version of Firefox the following:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
User avatar
Grist
Posts: 836
Joined: January 27th, 2006, 9:20 pm

Post by Grist »

Yes, I'm using Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

Hmm, div.box has a width of 80%. You seem to be using a higher screen resolution. I'm at 1024x786. If I increase the width of div.box, then div.sidebar does overflow the bottom of div.box. Example 1 remains unaffected. It stays that way even after removing display:inline. Don't know what to make of that.
User avatar
Grist
Posts: 836
Joined: January 27th, 2006, 9:20 pm

Post by Grist »

I saved the page locally to test. At first, example 1 and example 11 appeared identical. Upon closer inspection, I did find a difference between the two adside from <code>display: inline</code>.

Example 1:

Code: Select all

<div style="background-color: rgb(230, 230, 230) ! important;" class="box">
 <div class="sidebar" style="float: left; background-color: rgb(223, 213, 181) ! important;">
   This div is floated left with a left margin of 75px. It should butt up
   against the 75 pixel wide background image, but as you can see (if
   you're looking in IE), the actual margin rendered is twice what is set
   in the CSS.
 </div>
 Floating a box so that a section of text will wrap
 around it is a fairly common technique in Web design. We use it to
 place images on a page as well as to create sidebars, like this one,
 which work well for testimonials and similar pieces of information.
 <span class="caption">Example 1</span>
 <div style="clear: both;"></div>
</div>

Example 2:

Code: Select all

<div style="background-color: rgb(230, 230, 230) ! important;" class="box">
 <div class="sidebar" style="float: left; display: inline; background-color: rgb(223, 213, 181) ! important;">
  This div is floated left with a left margin of 75px. It should butt up
  against the 75 pixel wide background image, but as you can see (if
  you're looking in IE), the actual margin rendered is twice what is set
  in the CSS.
 </div>
 Floating a box so that a section of text will wrap
 around it is a fairly common technique in Web design. We use it to
 place images on a page as well as to create sidebars, like this one,
 which work well for testimonials and similar pieces of information.
 <span class="caption">Example 11</span>
</div>

The difference is the extra div element in example 1: <code><div style="clear: both;"></div></code>
When I add that extra div, they both display the same regardless of width.
Shining Arcanine
Posts: 18
Joined: December 6th, 2004, 5:19 pm

Post by Shining Arcanine »

So I guess displaying them identically without <div style="clear: both;"></div> would be a bug in IE7, right?
User avatar
Grist
Posts: 836
Joined: January 27th, 2006, 9:20 pm

Post by Grist »

I'm not sure about that. I'm just saying that display: inline doesn't change how example 11 is rendered in Firefox.

That page is for demonstrating how one IE bug can be used to work around another. It's not really a good test case for anything other than that.

Maybe someone more knowledgeable will comment.
Post Reply