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
______________________________________________________________________
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/
