|
Posted by Ben C on February 7, 2008, 3:36 am
Please log in for more thread options
wrote:
> Hello.
>
> I have a problem building an horizontal navlist.
>
> The technique i'm using is very simple: a list with inline LI
> elements. It works fine but Mozilla render it with a gap between the
> LI elements, I can't understand where that gap comes from.
The spec doesn't say exactly how inline boxes are sized-- only that it
should depend on the font in some way.
[...]
> I can fix the problem using float:left in the LI elements but I need
> to understand why is Mozilla drawing it whith that gap.
It looks like it's putting the boxes around the glyphs inside the <li>s,
but around the spaces between them. That's a perfectly reasonable thing
to do.
I would expect the gap, but what IE is doing isn't wrong either.
If you use float, it is well-defined that the boxes should be adjacent.
You can probably get rid of the gap in Firefox if you remove all
whitespace in your source HTML between </li> and <li>.
> This is the code:
>
><html>
><head>
><style>
>
> #menu ul {
> padding: 0px;
> margin: 0px;
> list-style: none;
> font-weight: bold;
> width: 100%;
> background-color:yellow;
> }
>
> #menu ul li {
> display: inline;
> border: 1px solid red;
> margin:0px;
> }
>
></style>
>
>
></head>
><body>
><div id="menu">
><ul>
><li><a href="#">One</a></li>
><li><a href="#">Two</a></li>
><li><a href="#">Three</a></li>
><li><a href="#">Four</a></li>
></ul>
></div>
></body>
>
> ¿Can anybody help me?
>
> Thanks a lot.
| 
XML Sitemap