webref layout improvements for opera and ie6 | WebReference

webref layout improvements for opera and ie6

Webref Layout Improvements for Opera and IE6

The following layouts are further experiments to eliminate the right col spacing problem and Opera problems with our advanced css layouts by Rogelio, Andy, and Kwon. Do not link to, as this directory will move once the improvements are finalized.

Related Links

Here's the thread so far, this is only four our purposes, hope this is ok. Hopefully this will help us debug the layout(s). Will not appear on linked article of course.

Date: Sun, 10 Mar 2002 16:26:58 -0500
To: "Rogelio Vizcaino Lizaola"  (by way of  Andy King)
From: Andy King 
Subject: Re: Opera bug fixed...
Cc: 
Bcc: 
X-Attachments: 
rogelio
fyi here's a version with our colors
http://www.webreference.com/_test/webrefcssopera2.html
Yes, long time. Glad to hear from you again.
Sorry for the delay, I didn't find a way to begin a reply and took a lot of 
time to get this code done.
I have tested this code on IE5.5, IE6 (6.0.2600.0000), Opera5.11, Opera6.01, 
N6.01, N6.2, Mozilla0.98 and partially on IE5win (will test it leater but I'm 
confident that it will hold).
This version uses the same nesting approach but the code it's a little cleaner 
and the id names longer but more self descriptive. I changed the use of margins 
for paddings, so the background colors are stated for the div element that use 
it, not the parent. I find the fix for the Opera 5.11 bug (was so trivial that I 
hope you laugh about it), so we can use floats instead absolute positioning, that 
kills the IE col problem. All this will make it more easy to read and maintain.
I'm using a div with clean:both to force the columns to be the same height that 
the taller one. It works for the Opera and Netscape browsers, but IE family has 
trouble if the right column is taller than the left column, in this case, the center 
column has to be the shortest or the tallest for good rendering. Anyway, this is 
better than the past version, remember that it needs the center column to be the 
tallest to proper rendering, so now it can be the left or center one.
This is all for now, I will send some screen shots when I test it on IE5win.
--- dragle@internet.com says about the green layout ---
> The only problems I noticed were fairly minor. 
> 
> On almost all platforms, there are serious problems when 
> shrinking the display down to small widths; say 400-500
> px wide or smaller. Most platforms tended to crunch all 
> the columns together, throwing the right column beneath 
> the left column and causing the center column to all but 
> disappear. About the only platform I didn't see this on 
> was Netscape 6.0/6.01; which shrunk to a certain point but
> then did not crunch everything together. Two specifics
> on this issue. On IE5.5/Win2000 at about 550-600px wide
> (a guess) the display is pretty much hosed; the left column
> runs over into the center column and the dark green bg 
> disappears in favor of the center column's lighter green. 
> A little smaller (600px) and the problem
> goes away. Also, on IE6/WinNT at a certain point (about 400px
> I think) the entire search and advertisement bar disappears. 
> Again, shrink it a little more and it reappears. 
> 
> Top TOTD has a top border; I'm not sure it should. 
> 
> Without padding, of course, the text in the columns looks a 
> little odd since it is flush with the DIV borders.
> 
---
X-Originating-IP: [200.52.115.247]
Reply-To: "Rogelio Vizcaino Lizaola" 
From: "Rogelio Vizcaino Lizaola" 
To: "Andy King" 
Subject: Re: Opera bug fixed in CSS layout
Date: Wed, 20 Mar 2002 23:10:09 -0600
X-Priority: 3
X-OriginalArrivalTime: 21 Mar 2002 05:01:38.0437 (UTC) FILETIME=[7B891350:01C1D095]
----- Original Message -----
From: "Andy King" 
To: "Rogelio Vizcaino Lizaola" 
Cc: 
Sent: Thursday, March 14, 2002 8:00 AM
Subject: Re: Opera bug fixed in CSS layout
> >So it seems that the beast is under control again.
> >I will be adding some more elements (headers, banner, etc..) and look for
> >bugs to come. Seems that we will have some problem with the banner and
> >leftCol for IE5.5 at least. Also, it would be the greatest thing if we
find
> >a way to force a min-width for IE browsers. I answer some of your questions
> >below.
>
> did u see dan's comments on the problems we found?
> perhaps we should fix the basic layout first, until
> dan is happy (he has a pc/nt etc), the add in other stuff.
>
> or not add anything, keep working on the basic layout.
I'm sure that if we found a method to force a min-width for IE family we
could avoid all those oddities, but won't be easy if possible at all.
Anyway, all Dan's reported problems are reproducible on my available
browsers. Seems that most of them are related to the float behavior and the
management of margins. I have to do a more deep research on this behaviors.
>
> >----- Original Message -----
> >From: "Andy King" 
> >To: "Rogelio Vizcaino Lizaola" ;
> >
> >Sent: Wednesday, March 13, 2002 4:27 PM
> >Subject: Re: Opera bug fixed in CSS layout
> >
> >
> >>  rogelio
> >>
> >>  tx, works fine for me in ie5 mac
> >>  and ns6 mac :)
> >>
> >>  At 12:21 PM -0600 3/13/02, Rogelio Vizcaino Lizaola wrote:
> >>  >Here goes another version. It has a green color schema just to avoid
> >>  >confusions. The code uses margins instead of paddings, so it takes 3
> >>  >div elements to achieve the lateral columns instead of 2, pretty
> >>  >much like in the article version.
> >>
> >>  why margins instead of padding?
> >
> >Is the way we did in the past version. I think that IE tries to put the
> >floats on the side of the padding instead over it, with margins it behaves
> >differently... give me some time to recollect screen shots to try explain it
> >deeply.
>
> what doctype are we using, you know how IE6 changes its box
> model behavior depending on doctype strict/transit?
>
> >  >
> >>  >The columnEqualizer statements are modified, only Netscape and Opera
> >>  >will use the height:1px, this prevents IE6 rendering problems on the
> >>  >center column, so no position:relative statemets are used now.
> >>
> >>  what are the masks for?
> >
> >This divs let the background color render on the margins, I was thinking in
> >mask layers like Photoshop.
>
> cool
>
> >  >
> >>  from the html>body .column... ie6 does not recognize this?
> >
> >No, as far as I know the direct child selector is not supported by any IE
> >family browser.
> >
> >>
> >>  >I think that the two problems are not related, and the use of
> >>  >margins instead of paddings makes it more stable, but it's just my
> >>  >theory, so please give this version a try as you did for the one
> >>  >with the red color scheme.
> >>  >
> >>  >This layout will break for IE family if right height>center
> >>  >height>left height as I told you before. Beside this, only IE6 has
> >>  >trouble at small window sizes, when the tip of the day box displaces
> >>  >all the center column content beneath them, both the search and
> >>  >advertisement bars disappear, this shouldn't be a problem once the
> >>  >Dev The Web header is put in place.
> >>  >
> >>  >  >From: Andy King
> >>  >  >To: "Rogelio Vizcaino Lizaola" ,
> >>  >  >Subject: Re: Opera bug fixed in CSS layout
> >>  >  >Date: Tue, 12 Mar 2002 10:12:09 -0500
> >>  >  >
> >>  >  >damn, thought we had it there
> >>  >  >
> >>  >  >any ideas on how to fix these rendering problems?
> >>  >  >
> >>  >  >there's got to be a simpler way to do a three col layout
> >>  >  >(i've seen a few, but don't know if they'll work for webref's
> >>  >  >layout)
> >>  >  >
> >>  >  >At 1:47 AM -0600 3/12/02, Rogelio Vizcaino Lizaola wrote:
> >>  >  >>Andy, Dan:
> >>  >  >>
> >>  >  >>The problem that Dan is reporting affects also IE5win and IE5.5. As
> >>  >  >>Dan said, is not consistent, actually if I hit reload once the content is
> >>  >  >>properly rendered it may hide it again, resizing the window makes
> >>  >  >>it visible.
> >>  >  >>
> >>  >  >>The version with the original webref colors has some other oddities
> >>  >  >>if the left column content isn't rendered, in IE6 the right color strip
> >>  >  >>doesn't render and in IE5win the right float, and tip of the day are
> >>  >  >>misplaced.
> >>  >  >>
> >>  >  >>Is really strange that this doesn't happen when the file is on the
> >>  >  >>harddrive or floppy disk, this makes me think in a synchrony problem, but
> >>  >  >>on the other hand, IE6 was doing that kind of thing to the center column content
> >>  >  >>(only that it was consistent, no content until resized), that's way I use
> >>  >  >>some position:relative statements, and it seemed to fix it at the time.
> >>  >  >>
> >>  >  >>Now, there is another rendering problem that I had detected before
> >>  >  >>I sent the document, and it affects IE5win, IE5.5 and IE6, but this is very
> >>  >  >>consistent and reproducible, the layout breaks if the center column
> >>  >  >>height is greater than the left column but shorter than the right column
> >>  >  >>(right>center>left). I send some ziped IE5win screen shots of the red scheme
> >>  >  >>doc that show this and some other IE5win specific minor problems (taken
> >>  >  >>before this new bug show up).
> >>  >  >>
> >>  >  >>I don't know if the two problems are related.
> >>  >  >>
> >>  >  >>----- Original Message -----
> >>  >  >>From: "Andy King"
> >>  >  >>To:
> >>  >  >>Cc: "Rogelio Vizcaino Lizaola"
> >>  >  >>Sent: Monday, March 11, 2002 8:50 AM
> >>  >  >>Subject: RE: Opera bug fixed in CSS layout
> >>  >  >>> >
> >>  >  >>> >Re: Opera bug fixed in CSS layoutI only ran it through IE6 and
> >>  >  >>>Opera 6. It looks good; but both sidebars seem
> >>  >  >>> >a little wide. Is this as intended? Enclosing an IE6 GIF.
> >>  >  >>>
> >>  >  >>> yes, 200 pix, just for layout purposes
> >>  >  >>>
> >>  >  >>> >Also, one oddity. The first time I pull up the page in IE6, no text
> >>  >  >>> >appears in the left column. After I reload, the text appears. I can
> >>  >  >>> >recreate the problem by clearing my cache and hitting the page;
> >>  >  >>> >i.e., first time no text, second time with text.
> >>  >  >>>
> >>  >  >>> hmm, the position:relative is supposed to take care of this
> >>  >  >>> rogelio?
> >>  >  >>>
> >>  >  >>> the two versions (orig without prologue and webref-ized
> >>  >  >>>color/width
> >>  >  >>> are at
> >>  >  >>>
> >>  >  >>> http://www.webreference.com/_test/webrefcssopera.html
> >>  >  >>>
> >>  >  >>> http://www.webreference.com/_test/webrefcssopera2.html
> >>  >  >>>