|
|
Posted by Ben C on 10/24/06 16:26
> John wrote:
[snip]
>> The <table> strangely does work
>> here.
>
> Again no not really. What are you expecting that it does, center your
> menu on the page? If so maybe you ought to see what a real web browser
> does with your page and not depend of IE's interpretation.
No this is specified behaviour, and explained in my earlier post in
which I suggested it.
It does centre the menu in conjunction with auto left and right margins.
All the real web browsers I've tried it on (FF, Opera and Konqueror) are
OK with it.
I'm pleasantly surprised to hear that it also works in IE.
It isn't/wasn't working in FF for the OP because of something else
(specifying margins twice in the same selector). Although I am quite
surprised why that wasn't a problem on Opera or Konqueror.
[snip]
> To prove it can be done with valid markup:
>
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
><html>
><head>
>
><title>Valid Template</title>
>
><style type="text/css">
> #navbar { text-align: center; font: 80% sans-serif; }
> #navbar UL { list-style: none; margin: 0; padding: 0; }
> #navbar LI { margin: 0 .05em; padding: 0; display: inline;
> line-height: 2 }
> #navbar A { text-decoration: none; padding: .2em 1em; border: 1px
> solid #aaf; }
> #navbar A:link, #navbar A:visited { color: #fff; background-color:
> #50c; }
> #navbar A:hover, #navbar A:active { color: #50c; background-color:
> #fff; }
></style>
[snip]
Yes, that works too, and is a more natural way of doing it. But the OP
had his <li>s floating, which means he has control over a few more
things-- he can set width on them for example, which you can't do on an
inline box.
text-align: center doesn't centre the floats (as of course it shouldn't)
hence the idea of making the <ul> a shrink-to-fit centered block box.
Navigation:
[Reply to this message]
|