229777 - hidef.nl - bad layout

Status: RESOLVED FIXED

(Tech Evangelism Graveyard :: Dutch, defect, P4)

Description

[Tom Vanliefde]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5) Gecko/20031007 Firebird/0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5) Gecko/20031007 Firebird/0.7

Firebird doesn't display the site good.
The site is completely w3c conform aswel as the HTML part as the CSS part.
(See W3C picture on the site)
Internet Explorer does it good. Site uses standards so in theorie it should be
displayed good on Firebird


Reproducible: Always

Steps to Reproduce:
1.go to site with IE and Firebird
2.compare layout of site with IE and Firebird


Actual Results:  
u will see that the layout on Firebird istn't the same as on IE and that it is
displayed wrong

Comment 1

[Bill Mason]

->Layout

Comment 2

[Alfonso Martinez]

could you please create a minimal testcase?

Comment 3

[Christian :Biesinger (don't email me, ping me on IRC)]

could you attach a screenshot of the page as displayed by MSIE (at
http://bugzilla.mozilla.org/attachment.cgi?bugid=229777&action=enter). not
everybody has ie.

Comment 4

[Patrick]

Reporter, some things:

1) please give more details on what's the difference in lay-out, and if possible
narrow the problem down?
2) Using correct syntax in itself says nothing about good lay-out. Also, there
are several examples floating on the web where different browsers give different
results. Even between different versions of IE there are differences in rendering.
Also, a page can contain more than just HTML. So valid HTML doesn't always say
something about valid scripts etc.
3) The site says: under construction....which means it can continuously change
and therefore make reproducing difficult [therefore a narrowed down problem
and/or testcase is useful]

The difference in rendering is that the boxes with text have a scroll bar in IE
and do not have that in Mozilla. To accomodate all text, the text boxes in Moz
are larger and therefore overflow the white background. One of the offending
<div> tags reads:

<DIV id=tekst3>
<P class="style1 style2"><STRONG>Wat is HDTV?</STRONG></P>
<P>In Amerika en japan bestaat het al jaren; HDTV. In de jaren 80 waren er in 
europa al testen mee. Er werden toen al 1250 beeldlijnen behaald. Nu is HDTV 
iets onbekends voor Europeanen. ????.nl brengt u een artikel over wat HDTV nou 
precies is en wanneer HDTV naar Europa komt. <STRONG><A class=zwart 
href="http://members1.chello.nl/~l.goedhart1/website/watishdtv.htm">verder..</A> 
</STRONG></P>
</DIV>

That <div> shows HEIGHT 200px and OVERFLOW set to AUTO, Moz displays them as a
whole, and thus as large as the text needs the <div>'s to be. 

Note: the stylesheet reads
DIV {
	moz-box-sizing: padding-box
}

Anyone else?

Comment 5

[Patrick]

whooops, i think my comments mid-aired with others and ENTER'ed once too often
thus overwroting their changes! 
I promise, it won't happen again this year!

Comment 6

[Patrick]

Attachment: Layout of the page in IE

Comment 7

[Ian Graham]

THe problem is bigger than this (at least on Firebird 0.7 / Mozilla 1.5 /
MOzilla 1.6b.  To reproduce the problem, do the following:

1. Load the page -- 
2. Rezize the page horizontally or vertically. You should see the layout change    
   dramatically -- the 'wat is HDTV' box jumps to the right, and overflows outside 
   the browser window (with no scroll bars). Also, the text in the top box is 
   redrawn on top of itself, displaced to the right. 
   Pressing 'reload' will fix things - at least until you rezie the window.

Likely a float problem -- but the CSS is messy, and I couldn't easily simplify
this to get a decent test case.

I'm attaching a ZIP file with the online example (minus the script components,
which aren't relevant). 

Comment 8

[Ian Graham]

Attachment: document displaying rendering problems

Just resize the window ...

Comment 9

[Hermann Schwab]

I made 2 testcases, removed all images and text and non-related css, added 10 px
border bottom to container.
I compared the webpage and the testcase in Opera7.23 and a current nightly,
top is rather similar, difference is seen at the bottom.
I´ll attach a screenshot of the testcase as seen in opera.

<div id="container">  has an insufficient heigth of 600 to hold all the others.

originally margin of this is set to "auto", if I change set to 0px or 10 px,
Mozilla shows artifacts, something like raw videomemory, when scrolling, as seen
in other bugs.

Comment 10

[Hermann Schwab]

Attachment: 4kb screenshot testcase seen with opera 7.23

screenshot of testcase as seen with opera

Comment 11

[Hermann Schwab]

Attachment: testcase with margin auto like in the website 5 kb html

original code without text, images, and non-related css

Comment 12

[Hermann Schwab]

Attachment: testcase with MARGIN: 0px showing random pixels when scrolling

Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7a) Gecko/20031231

there are some random pixels rendered in the left part of div 'text',
with of that area is about the width of the div left of it, 'tracker'
Scroll, and they are changing, coming, going, just random uninitialized memory,

as seen in some other bugs.
I don´t know if MARGIN: 0px is correct, or MARGIN: #000 10px solid; 
but it is working on Opera, no difference seen to MARGIN: auto
(but I´m very short-sighted ;-)

changed MARGIN: auto to MARGIN: 0 pix

div{
-moz-box-sizing:padding-box; 
}
#container {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN: 0px;
BORDER-LEFT: #000 1px solid; WIDTH: 778px; BORDER-BOTTOM: #000 10px solid;
HEIGHT: 600px; BACKGROUND-COLOR: #fff

Comment 13

[Boris Zbarsky [:bzbarsky]]

So which of the many testcases here actually shows the original problem?  Is the
problem depenendent on -moz-box-sizing:padding?

Comment 14

[Andrew Schultz]

> <div id="container">  has an insufficient heigth of 600 to hold all the others.

exactly!  so this bug belongs in Tech Evang, right?

Comment 15

[Boris Zbarsky [:bzbarsky]]

Oh, I missed that part.  Yeah, IE's implementation of "height" is totally
broken, unlike Mozilla's.

Comment 16

[Hermann Schwab]

Attachment: 28 kb screenshot bug seen with attachment 138239 and win98

Did anybody look at attachment 138239 [details]: testcase with MARGIN: 0px showing random
pixels when scrolling?

Have a look at the screenshot to see what Mozilla/Win98 produces.
Because of margin 0 the layout is totally broken, but I´m seeing a scrolling
error in the div 'tekst' in the middle.
When I switch to the tab, the text 'tekst' is shown twice. left aligned, as it
should be, and estimated 150 pixels to the right.
When I´m scrolling up and down, a random pattern is coming into the window,
estimated about the width of div 'tracker', 140 pixels.
Don´t know to which bug this belongs, and didn´t have time to make a better
testcase.

Comment 17

[Patrick]

The URL now redirects to http://www.hidef.nl/

1) Added URL to summary
2) P=P4 [new and incomplete site, only visual problem, no functional problem]
3) severity=normal
4) i sent an e-mail to [e-mail]

Comment 18

[Tom Vanliefde]

Attachment: how firebird displays the page

Comment 19

[Tom Vanliefde]

Attachment: how IE displays the layout

Comment 20

[Patrick]

Tom: what's the difference between the two IE shots? 
mine:
http://bugzilla.mozilla.org/attachment.cgi?id=138209&action=view
yours
http://bugzilla.mozilla.org/attachment.cgi?id=138373&action=view

Mine shows scroll bars on the divs and doesn't have the w3c logo on it?
Apparently the source is still changing. I guess as i mentioned in comment 4 we
should create and use some of the testcases rather than the site itself, as that
one is still under construction.

Comment 21

[Tom Vanliefde]

patrick for your first post

1)check the new uploads i made of the layout problem
2)it's not my site but the guy who made it tolled me that he let several people
look at the code and they couldn't find anything strange.
3) Well if it's nececary i could ask the guy to give me his site and then i can
upload it to a new place where it won't change. I don't get it why your's is
differend i took this shot now, but it still the same layout (whitouth the
scrollbars, ...) as it was when i submitted the bug.

Comment 22

[Patrick]

Got feedback from webmaster:

"Hi again.
I succeeded in making a page that looks good in mozilla and IE
First I tried to replace 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

With
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This gave good improvements in mozilla. But then IE made a complete mess of
it. So I changed it back and started to play with the code some more.
I changed the heights like you said.. but that didn't change much.

Then I made a CONTENT div around the tekst1, tekst2, tekst 3 and advert div.
This gave an improvement in IE and Mozilla. Then I removed one Float somewhere.
I also removed some LEFT: 5px; codes.

Conclusion: I changed a whole bunch of things that were not logical and I
just kept changing things till it was correct in IE and mozilla.

There are still some minor differences.. for example the IE page is now
longer then the Mozilla page. And the pictures in the mozilla page are
placed higher.

Please tell me if the index page looks ok in netscape 6 and 7, AOl, galleon
etc etc now too.

Greetings,
Martin"

The boxes in the center now seem to fit, there's still an issue with the box on
the right though.

Comment 23

[Andrew Schultz]

> Did anybody look at attachment 138239 [details]: testcase with MARGIN: 0px showing random
> pixels when scrolling?

yup.  but it's not this bug.  I filed bug 230036 for what I saw.

Comment 24

[Martin Goedhart]

Hi

I am the webmaster of this site.
I just fixed all the problems on the index page. Will fix the rest of the 
pages later todat.

Main problems were mozilla having trouble dealing with OVERFLOW: auto;
After a few changes mozilla rendered the page correctly with no problems. But 
if you changed anything like the windowsize or add a toolbar then the text 
would jump out. After hitting refresh it is correct again but it was annoying. 
I changed OVERFLOW: auto; with OVERFLOW: visible; and now that problem is gone

Furthermore I changed all height settings, deleted unnecessary code and a lot 
more (bout 40 to 50 things) 

The page is good now with both mozilla and IE. Only minor things that arent 
correct with mozilla.

Ok i'm off. Gotta have to do this 50 changes for 18 pages.. didnt use a extern 
style sheet.

Comment 25

[Patrick]

Marking fixed per webmaster's comment.
Martin: i added your name to the CC list of this bug, so you'll be able to
monitor any further correspondence about your web site.

Thanks for your fast cooperation!