Helen wrote: > 1. On this page, in IE6, > http://www.bennett.picturethis4u.com/resources-tools.html > the <div id="re-max"> and <div id="footer"> fall into place properly but in > Firefox & > Opera, the same divs refuse to drop down on all pages except the home page. > > 2. On this page, same site, http://www.bennett.picturethis4u.com/index.html I > can't > seem to find the reason for the wide blue band across the middle of the page > in > Firefox and Opera. The page renders properly in IE6. > > Any suggestions would be welcome! > > Thanks, > Helen
Hi Helen In all variations Firefox and Opera are rendering correctly. The whole layout is over constrained with to many elements with absolute heights in pixels and this cause certain elements to expand out of their parents since they are higher than there parents. Since height is also a hasLayout [1] trigger, IE7 and IE6 shows it bugs with auto containment of floats, and IE6 shows also it bugs with expanding boxes. Take a look at this demo of all the major elements on your index page. http://css-class.com/x/water.htm Please look in Firefox first. I have shown your #middle and #bottom divs and your floated right #home-text div and the #footer div. The blue band background which you have mentioned on your index page I have as gray in my demo. This is just the background color of the #middle div. On your index page the top part of it is covered by the #top-nav-a, #top-nav and #bottom divs. The footer is clearing the floats within the #bottom div. Looking in IE7 and IE6 we see something different. The #bottom div is auto containing the float since it has hasLayout so the background of this div is covering the #middle div and the blue band is hidden. IE7 however honors the height of the #middle div where IE6 expands it. This test [2] by Bruno Fassino shows this clearly. Removing the height and the background color from the #middle div fixes this page. #middle{ background-color: #5769AB;/* delete */ width: 100%; height: 306px;/* delete */ margin: 30px 0 0 0; padding: 0; } http://www.bennett.picturethis4u.com/my-listings-judy-davey.html On this page Firefox shows the footer above the iframe with the table. Removing the height from the #middle-2 fixes this page in Firefox. #middle-2{ background-color: #fff; width: 100%; height: 241px;/* delete */ margin: 20px 0 0 0; padding: 0; text-align: center; } The problems grow worse now since removing the height from the #middle div on this page causes the floated image to stick out the bottom of this div. Yes fixing one page wrecks the next page. The solution for both pages would then be this. #middle{ background-color: #5769AB;/* delete */ width: 100%; height: 306px;/* delete */ margin: 30px 0 0 0; padding: 0; overflow:hidden;/* add */ } Giving overflow hidden to this div causes Firefox to contain floats. This triggers hasLayout in IE7 thus it auto contain floats. IE6 has it expanding box bug so it is somewhat fine. Now the footer will just sit underneath the #middle div and no clearing is needed. I do not know what will happen on any other page. As the layout is slightly different on each any thing can happen. What I do recommend is to start back to basics and do the following. 1) Remove all <br/> elements from the source that are adding height. 2) Validate your html [3] for each page. 3) Comment out all widths of 100% from all divs. A static div is a block element so it will always be 100% in width. 4) Comment out all heights from all divs. #middle{ /*width: 100%;*/ /*height: 306px;*/ } 5) Give each major div a border and color. 6) Examine the results in Firefox. 7) Consider what divs are needed. Any page with a different layout should have different divs with there own ID, an example would be the pages with the #agents div. Is the #middle div needed and should the #bottom div instead be containing the floats or visa verso? 8) Now begin to contain the floats that are needed to be contained by giving the element overflow hidden or auto until things look right on each page in Firefox. Do a stress test by text and viewpoint resizing. 9) With finger crossed now check in IE7. Hopefully things should be right. If elements are overlapping or out of place it's back to step 7 since there are problems in the layout. 10) When Firefox and IE7 are looking fine have a look in Opera to see if the pages are fine and then finally check in IE6. Where you have given and element overflow hidden #middle {overflow:hidden;} give IE6 this hasLayout trigger * html #middle {height:1%} Please don't hesitate to ask for more help. Good luck. [1] <http://www.satzansatz.de/cssd/onhavinglayout.html> [2] <http://www.brunildo.org/test/fenc7.html> [3] <http://validator.w3.org/> Kind Regards, Alan <http://css-class.com/> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
