Very interesting. The first fix made the site work in all the browsers, but boy, did it break the rendering in the DW! Now my main content and the donate button are hanging off the right edge of my content box and kind of off the edge of the DW window. Could the float:left on the div#nav AND the float:left on div.list-menu be causing that? The div#nav wraps the div.list-menu and div.donate.
On the donate button sitch. Sorry I wasn't clearer. I don't want the donate button to be part of the navigation box. I want it to be below it and centered underneath it. The version you gave me a link to was totally broken, because the box for the navigation is a background image that is only 230px high and should only have navigation in it. Your fix caused the background box to start doing some sort of tiling. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 1:49 AM, Gunlaug Sørtun wrote: > tmesa.mesadesignhouse wrote: >> In IE7 (I haven't checked IE6 yet), the navigation centers vertically >> perfectly. In FF (on PC and Mac) and Safari, the navigation is going >> to the top of the box that is a background image. I can't for the >> life of me figure out why. > > IE6 and IE7 are cheating - the effect of 'hasLayout'[1], which means > no > other browser - including IE8 - will follow their lead without some > proper styling. > > To fix, add a "new box formatting context"[2] generating style, > like... > > div.list-menu { > float: left; > width: 100%; > } > > ...to keep the margin-top on div.list-menu ul from escaping > div.list-menu and join - "collapsing"[3] into - its margin-top. > > I used that particular styling with 'float', to avoid problems with > some > of the alternatives in even older IE/win versions. > >> Then I need to put the donation box (in its own div) in the >> horizontal center of that 250px width of the nav box that wraps >> both the list- menu div and the donation div, not flush left. Have >> a feeling this may be a parent-child or ancestor thing that I can't >> figure out. I can't get that to work on any of the browsers I've >> checked today. > > Not sure if I understand how you want that to appear visually, so > here's > a partial and pretty rough example on how I would do it... > <http://www.gunlaug.no/tos/alien/tm/test_08_0328.html> > CSS: > <http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/ierc0000.css> > > Some cross-browser tuning still needed to make it appear the same > everywhere, I think, but the basic markup and CSS changes are there. > > You need two - different - background-images for it to make it look > right. I just reused the single one you have in there, so the upper > corners show up for the lower one. You'll get the idea. > > Note: make those background-images tall enough and allow the container > to stretch in height, to allow for some font-resizing. Fixed height > means it'll break under stress, so I've commented that height out > for now. > >> I was able to validate the CSS and HTML on this. :-) You guys have me >> trained. > > Good - it helps :-) > >> http://mdh-test.com/ieresidential/index.shtml >> http://mdh-test.com/ieresidential/ierc.css > > regards > Georg > > [1]http://www.satzansatz.de/cssd/onhavinglayout.html > [2]http://www.w3.org/TR/CSS21/visuren.html#block-formatting > [3]http://www.w3.org/TR/CSS21/box.html#collapsing-margins > -- > http://www.gunlaug.no ______________________________________________________________________ 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/
