Works great in IE7, not so much in FF/Safari
Sent by Gunlaug_Sørtun on 28 March 2008 08:08
> 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', which means no
other browser - including IE8 - will follow their lead without some
To fix, add a "new box formatting context" generating style, like...
....to keep the margin-top on div.list-menu ul from escaping
div.list-menu and join - "collapsing" 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...
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
Good - it helps :-)
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/