Re: CSS gap between inline elements

DrPanic <MiNick (AT) ese_mail_del_buscador_que_todo_lo_encuentra (DOT) com> wrote in
news:nldlq355kq2je42pfi8b6j3rreuvllt4fm (AT) 4ax (DOT) com:

[snip]

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. IE7 doen't
render it whith that space between inline LI elements.
[snip]

It sounds like what you really want is display:table-cell;. No need to
muck about with floats or removing the white-space from the html, the
draw back is it will not wrap.

<style type="text/css">
#menu ul li {
border: 1px solid rgb(255, 0, 0);
display: table-cell;
}
#menu ul,
#menu ul li {
background: rgb(255, 255, 0);
color: rgb(0, 0, 0);
font-weight: bold;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#menu ul {
padding: 1px 0;
zoom: 1;
}
#menu ul li {
display: inline;
}
</style>
<![endif]-->

--
BootNic Saturday February 9, 2008 12:43 AM
There is no such thing as an underestimate of average intelligence.
*Henry Adams*