Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Horizontal List Issue (http://www.velocityreviews.com/forums/t391504-horizontal-list-issue.html)

Doug 11-02-2006 09:43 PM

Horizontal List Issue
 
Hi all,
I would like to display the list horizontally. I've learned that the li
style need to be inline.
I have the code as follow but it doesn't work.
Thank you for helping

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<ul>
<li style="display:inline;">
<div>
<table border="1">
<tr>
<td>
<td><input type='text' id="fieldName1" value="Field
1"></input></td>
</td>
</tr>
</table>
</div>
</li>
<li style="display:inline">
<div>
<table border="1">
<tr>
<td>
<td><input type='text' id="fieldName1" value="Field
1"></input></td>
</td>
</tr>
</table>
</div>
</li>
<li style="display:inline">
<div>
<table border="1">
<tr>
<td>
<td><input type='text' id="fieldName1" value="Field
1"></input></td>
</td>
</tr>
</table>
</div>
</li>
</ul>
</body>
</html>


Ben C 11-02-2006 10:13 PM

Re: Horizontal List Issue
 
On 2006-11-02, Doug <dmly.usa@gmail.com> wrote:
> Hi all,
> I would like to display the list horizontally. I've learned that the li
> style need to be inline.
> I have the code as follow but it doesn't work.
> Thank you for helping


Make li float: left and display: block.

You can also make it float: left and display: inline, the effect is the
same. But I think display: block makes more sense. Or just leave it as
the default (display: list-item) and set list-style-type to none.

The reason why what you have isn't working is that your <li>s contain
block level elements. Apart from inline-blocks (which are another
story), inline boxes can't really contain block boxes.

I'm talking about boxes here, in the sense of the CSS box model, not to
be confused with inline vs block _elements_, concerning which the HTML
DTD defines validity requirements. It is perfectly valid CSS to have
display: block elements inside display: inline elements, but the
specification defines that anonymous block boxes are created effectively
in order to keep the inline boxes as leaves in the tree of boxes. You
can read about anonymous block boxes in section 9.2.1.1 of CSS 2.1.

Doug 11-02-2006 10:21 PM

Re: Horizontal List Issue
 
Superb man, really really helpful!!!
Yep I got it into working now.
Thanks lunch on me :-)

Doug

On Nov 2, 4:13 pm, Ben C <spams...@spam.eggs> wrote:
> On 2006-11-02, Doug <dmly....@gmail.com> wrote:
>
> > Hi all,
> > I would like to display the list horizontally. I've learned that the li
> > style need to be inline.
> > I have the code as follow but it doesn't work.
> > Thank you for helpingMake li float: left and display: block.

>
> You can also make it float: left and display: inline, the effect is the
> same. But I think display: block makes more sense. Or just leave it as
> the default (display: list-item) and set list-style-type to none.
>
> The reason why what you have isn't working is that your <li>s contain
> block level elements. Apart from inline-blocks (which are another
> story), inline boxes can't really contain block boxes.
>
> I'm talking about boxes here, in the sense of the CSS box model, not to
> be confused with inline vs block _elements_, concerning which the HTML
> DTD defines validity requirements. It is perfectly valid CSS to have
> display: block elements inside display: inline elements, but the
> specification defines that anonymous block boxes are created effectively
> in order to keep the inline boxes as leaves in the tree of boxes. You
> can read about anonymous block boxes in section 9.2.1.1 of CSS 2.1.



Ben C 11-02-2006 10:25 PM

Re: Horizontal List Issue
 
On 2006-11-02, Ben C <spamspam@spam.eggs> wrote:
[snip]
> ... specification defines that anonymous block boxes are created
> effectively in order to keep the inline boxes as leaves in the tree of
> boxes. You can read about anonymous block boxes in section 9.2.1.1 of
> CSS 2.1.


I was a bit imprecise, well, wrong there. Inline boxes can be nested in
other inline boxes (it's boxes for #text nodes that are leaves).
Anonymous block boxes prevent inline boxes ever being ancestors of block
boxes in the tree of generated boxes.

Ed Seedhouse 11-03-2006 01:32 AM

Re: Horizontal List Issue
 
On Thu, 02 Nov 2006 16:13:56 -0600, Ben C <spamspam@spam.eggs> wrote:

>On 2006-11-02, Doug <dmly.usa@gmail.com> wrote:
>> Hi all,
>> I would like to display the list horizontally. I've learned that the li
>> style need to be inline.
>> I have the code as follow but it doesn't work.
>> Thank you for helping

>
>Make li float: left and display: block.


>You can also make it float: left and display: inline, the effect is the
>same. But I think display: block makes more sense.


The CSS standard requires that any floated element is given
display:block; no matter what your CSS says. All browsers I know of
obey this. Some bugs in IE are fixed with a display:inline; declaration
but IE will still render the element as a block, not inline.

Ben C 11-03-2006 07:38 AM

Re: Horizontal List Issue
 
On 2006-11-03, Ed Seedhouse <eseedhouse@shaw.ca> wrote:
> On Thu, 02 Nov 2006 16:13:56 -0600, Ben C <spamspam@spam.eggs> wrote:
>
>>On 2006-11-02, Doug <dmly.usa@gmail.com> wrote:
>>> Hi all,
>>> I would like to display the list horizontally. I've learned that the li
>>> style need to be inline.
>>> I have the code as follow but it doesn't work.
>>> Thank you for helping

>>
>>Make li float: left and display: block.

>
>>You can also make it float: left and display: inline, the effect is the
>>same. But I think display: block makes more sense.

>
> The CSS standard requires that any floated element is given
> display:block; no matter what your CSS says.


Not exactly, if it's display: list-item, it stays as display: list-item.

But if it's display: inline, that's commuted to display: block.

That's why I think display: block is more logical to use with a floated
list-item. Setting either has the effect of getting rid of the bullets.
The clearest solution is to leave it display: list-item and set
list-style-type: none. But that may not work in IE.


All times are GMT. The time now is 05:52 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.