On 6/7/2006 5:11 PM, Kieron McIntyre wrote:
> Brett wrote:
>
>> I'm looking to center two horizontal boxes (simple enough task). It
>> looks fine in Mozilla, while IE 7 staggers the two boxes so
>> one is lower
>> than the other.
>
> Hi Brett,
>
> Try adding the following rule:
>
> #container UL LI {
> display:inline;
> }
>
> This should solve the issue I think.
This works as well. Floating both the <a>'s and the <li>'s might be
redundant. But I also put the margin-left on the second <li> and
centered the <ul>. Now that the <a> no longer has a margin-left defined,
it seems that the float has to be on the <li> (otherwise, the two boxes
touch).
If you'll allow me to extend this example: what is the best way to give
the heading (h1) a top margin, but to keep the container div flowing to
the top of the viewport? It seems that if I do a margin- or padding-top
for h1, the whole container scoots away from the top. If I give the
container padding-top, then a scroll bar appears for the page. Any
ideas? The current page now has padding-top applied to the container.
Thanks,
Brett
http://www.andrew.cmu.edu/user/bleber/css/test.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
