Bruno Fassino wrote: > Lori Lay wrote: > > >> Here's a mock-up of a page showing the problem: >> >> http://www.goethebooks.com/gentest/unordered_list_test.html >> >> This seems to work ok in most browsers (FF, Safari, Opera), >> including IE 6! >> However in IE 7, the list is not centred in the blue area but is >> skewed to the right. I have tried removing the width declaration but >> that doesn't correct the problem and makes the anchor borders expand >> past the width of the container. >> > > > If you remove text-align:center on #left-bar the problem seems to go away. > (you lose centering on the h4, but you can restore it with > h4 { text-align: center; } > ) > > The reason is more or less the following: > > IE7 is (wrongly) centering the ul block element (with width 180px) inside > the 200px left-bar, giving to it 10px margin at the left (and at the right). > Your links inside the li are so shifted to the right by an extra 10px (and > the centering looks incorrect.) > > IE6 is saved by the fact that he assigns to the list an expanded width of > 200px (because of the contained anchors having 100% width plus 20px > margins.) So in IE6 the centering doesn't have any effect. > IE7 has no more the box auto-expansion bug, but still centers block elements > when text-align:center is in effect. > > > Now, the way I would really solve this is avoiding the need of anchors > overflowing the list (having 100% width plus margins.) You can surely > rearrange things in order to avoid this and put IE under less stress :-) > > hth, > Bruno > > -- > Bruno Fassino http://www.brunildo.org/test > > Yes Bruno, that works. Thanks. I'd love to remove the 100% width on the anchor, but if I do this, the list no longer appears centred. I was working from some examples on Listamatic (http://css.maxdesign.com.au/listamatic/) and many of them set the width to 100%. Quite frankly I didn't want to mess with a design that seemed to work :-)
The current design also grows fairly well with font scaling. I wasn't sure if this would be the case if I started using padding or margins to do the centering. Thanks again for your help. Lori ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
