Bug 13969 – Weird in div collision

• Status: UNCONFIRMED
• Component: Layout and Rendering

[Manoel]

I'm not sure it's really an error, but firefox and "official" stable version of safari/webkit doesn't react the same manner...

So on this webpage, Everything goes well until I try to put the W3C validation logo on the bottom right of the page, the divs became crazy. Even if I resize the webpage, the blue div (of class "micro" want to go out of the page) and the links goes to far on the right side.. and event the W3C logo is out of the page...

And if we remove the css class definition for "valid" everything go back to "normal"... I can't undersand. May be I do something wrong in my CSS, but this page is so simple that I can't understand what I could do wrong..

[Manoel]

Created attachment 14827 [details]
How the page render with official safari

[Manoel]

Created attachment 14828 [details]
How firefox do it

(FF add me a weird border, but it's another story..)

[Manoel]

Created attachment 14829 [details]
How latest webkit (01 june 07) render it...

I think it's the text-shadow on the right-aligned "welcome" text. The shadow is considered as overflow and gives the page a horizontal scrollbar no matter what. I think you can work around it by giving the "welcome" div a right margin of 10px.

[Manoel]

(In reply to comment #4)
> I think it's the text-shadow on the right-aligned "welcome" text. The shadow is
> considered as overflow and gives the page a horizontal scrollbar no matter
> what. I think you can work around it by giving the "welcome" div a right margin
> of 10px.
> 

Yes that's right...

But why safari/webkit 419 don't react the same manner, and why it happen when I add this div ?

(ok for firefox since it doesn't understand the text-shadow property a good example...)

(In reply to comment #5)
> But why safari/webkit 419 don't react the same manner, and why it happen when I
> add this div ?

The shipping version of Safari does not consider text shadow as overflow, so it does not give you a horizontal scrollbar.

[Manoel]

(In reply to comment #6)
> (In reply to comment #5)
> > But why safari/webkit 419 don't react the same manner, and why it happen when I
> > add this div ?
> 
> The shipping version of Safari does not consider text shadow as overflow, so it
> does not give you a horizontal scrollbar.
> 

OK, but it doesn't explain why with 522+ I didn't have without CSS for the "valid" div a scrollbar wihtout adding a right margin for the "welcome" div..

(Maybe this discution should continue somewhere else. I'm not sure here is the best for this even if it's related with this bug report.)

(sorry to bother you with this)

(In reply to comment #7)
> OK, but it doesn't explain why with 522+ I didn't have without CSS for the
> "valid" div a scrollbar wihtout adding a right margin for the "welcome" div..

I'm seeing the scrollbar even without the "valid" div being styled. Anyway, I just wanted to suggest a more complete solution, since just adding a right margin also shifts the text. In order to maintain the original positioning and avoid overflow, you can give the welcome div "position: relative; right: -10px;" which will compensate for the margin.

[James Craig]

Not an AX bug. Reassigning.