How to display table and select next to each other

08/09/2008, 03h01

How to display table and select next to each other?

<html>
<body>
<table border=1 style="display:inline-table">
<tr><td>Hello1</td></tr>
<tr><td>Hello2</td></tr>
<tr><td>Hello3</td></tr>
<tr><td>Hello4</td></tr>
<tr><td>Hello5</td></tr>
</table>
<select size="3">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
</body>
</html>

In Mozilla 3.0.1, the table is on the left with 5 rows of data. The
select of size 3 is next to it, thanks to the inline-table, which is
fine. However, the bottom of the select aligns with the bottom on the
first table cell. What I want is the top of the select to align with
the top of the table.

IE 7 displays the select below the table, ignoring the inline-table
directive.

So the question is how to get it to align the top of the select with
the top of the table in Mozilla and IE.

Thanks.

08/09/2008, 05h09

On Sun, 7 Sep 2008 18:01:04 -0700 (PDT)
"removeps-groups@yahoo.com" <removeps-groups@yahoo.com> wrote in:
<ae34e738-5ed5-4393-9c6e-8e6ee03f558e@r15g2000prh.googlegroups.com>

> How to display table and select next to each other?
>
[snip]
> So the question is how to get it to align the top of the select with
> the top of the table in Mozilla and IE.

Consider supporting just a few more browsers.

The following URL may display as desired. It does use a wee bit of
invalid CSS in an attempt to support more Mozilla browsers.

http://tinyurl.com/5fmn8o

--

BootNic Sun Sep 7, 2008 11:09 pm
Humor is emotional chaos remembered in tranquility.
*James Thurber*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.9 (GNU/Linux)

iEYEARECAAYFAkjEl3YACgkQylMUzZO6jeLIJwCggrP+do9ah9 wp3v6AUVOTx+/J
ZJMAoK4YiZwVZthuUYaVVdKsdzrJHAEX
=/u7g
-----END PGP SIGNATURE-----

08/09/2008, 09h21

On 2008-09-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote:
> How to display table and select next to each other?
>
><html>
><body>
><table border=1 style="display:inline-table">
> <tr><td>Hello1</td></tr>
> <tr><td>Hello2</td></tr>
> <tr><td>Hello3</td></tr>
> <tr><td>Hello4</td></tr>
> <tr><td>Hello5</td></tr>
></table>
><select size="3">
> <option value="1">1</option>
> <option value="1">2</option>
> <option value="1">3</option>
></select>
></body>
></html>
>
> In Mozilla 3.0.1, the table is on the left with 5 rows of data. The
> select of size 3 is next to it, thanks to the inline-table, which is
> fine. However, the bottom of the select aligns with the bottom on the
> first table cell. What I want is the top of the select to align with
> the top of the table.

> IE 7 displays the select below the table, ignoring the inline-table
> directive.
>
> So the question is how to get it to align the top of the select with
> the top of the table in Mozilla and IE.

vertical-align: top on the inline table should do the trick, but not in
browsers that don't support inline-table.

You may have more luck in IE by just floating the table left instead.

By the way your markup is not valid. Check it at http://validator.w3.org
(or with nsgmls).

08/09/2008, 10h45

On 8 Sep, 03:01, "removeps-gro...@yahoo.com" <removeps-
gro...@yahoo.com> wrote:
> How to display table and select next to each other?
> <html>

Don't you have a DOCTYPE declaration?

> <body>

The document should at least have a title.

> <table border=1 style="display:inline-table">
> <tr><td>Hello1</td></tr>
> <tr><td>Hello2</td></tr>
> <tr><td>Hello3</td></tr>
> <tr><td>Hello4</td></tr>
> <tr><td>Hello5</td></tr>
> </table>
> <select size="3">
> <option value="1">1</option>
> <option value="1">2</option>
> <option value="1">3</option>
> </select>
> </body>
> </html>
>
> In Mozilla 3.0.1, the table is on the left with 5 rows of data. The
> select of size 3 is next to it, thanks to the inline-table, which is
> fine. However, the bottom of the select aligns with the bottom on the
> first table cell. What I want is the top of the select to align with
> the top of the table.
>
> IE 7 displays the select below the table, ignoring the inline-table
> directive.

So is FF2, too.

> So the question is how to get it to align the top of the select with
> the top of the table in Mozilla and IE.

<table border=1 style="float: left; margin-right: 1em">

08/09/2008, 17h18

On Sep 8, 12:21am, Ben C <spams...@spam.eggs> wrote:

> By the way your markup is not valid. Check it at http://validator.w3.org
> (or with nsgmls).

Thanks. Is there a way to validate a file? In the URL there I
entered

file:///C:/Documents%20and%20Settings/whatever

and it says that type of URL is not supported.

I know I didn't have a DOCTYPE.

Dreamweaver has a function to validate markup, and it only says that
my select tag is missing the name value. Strange.

http://www.validome.org/ lets you upload a file to validate, and it
errors out that DOCTYPE is missing. After I enter the DOCTYPE, an
empty head section, I get several errors.

08/09/2008, 17h24

removeps-groups@yahoo.com wrote:
> On Sep 8, 12:21 am, Ben C <spams...@spam.eggs> wrote:
>
>> By the way your markup is not valid. Check it at http://validator.w3.org
>> (or with nsgmls).
>
> Thanks. Is there a way to validate a file? In the URL there I
> entered
>
> file:///C:/Documents%20and%20Settings/whatever
>
> and it says that type of URL is not supported.

You can't check a local file on your hard drive using the "Validate by
URI" tab.

First add a valid doctype:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Then go to the validator page and click the "Validate by file upload"
tab. Browse to the file you want to check.

--
Ed Mullen
http://edmullen.net
Why do banks charge you a non-sufficient funds fee on money they already
know you don't have?

08/09/2008, 17h35

On 2008-09-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote:
> On Sep 8, 12:21am, Ben C <spams...@spam.eggs> wrote:
>
>> By the way your markup is not valid. Check it at http://validator.w3.org
>> (or with nsgmls).
>
> Thanks. Is there a way to validate a file? In the URL there I
> entered
>
> file:///C:/Documents%20and%20Settings/whatever
>
> and it says that type of URL is not supported.

That's because the website can't read a file from your local disk. In
general that's a good thing-- you don't want just any website you visit
to be able to read your personal files.

You can use the "Direct Input" option and just paste your markup into
the box.

> I know I didn't have a DOCTYPE.
>
> Dreamweaver has a function to validate markup, and it only says that
> my select tag is missing the name value. Strange.

You have to have a DOCTYPE to validate properly, and you should use one
anyway to avoid the unpredictability of quirks mode.

Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

> http://www.validome.org/ lets you upload a file to validate, and it
> errors out that DOCTYPE is missing. After I enter the DOCTYPE, an
> empty head section, I get several errors.

Yes that sounds like it's doing something.

08/09/2008, 17h57

Ben C schrieb:
> On 2008-09-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote:
>> On Sep 8, 12:21 am, Ben C <spams...@spam.eggs> wrote:
>>
>>> By the way your markup is not valid. Check it at http://validator.w3.org
>>> (or with nsgmls).
>> Thanks. Is there a way to validate a file? In the URL there I
>> entered
>>
>> file:///C:/Documents%20and%20Settings/whatever
>>
>> and it says that type of URL is not supported.
>
> That's because the website can't read a file from your local disk.

You would request a file "/C:/Documents%20and%20Settings/whatever" on
the _W3C's validator web server_. This may not exist. And, of course,
they don't want anybody to read files on _their_ server.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

08/09/2008, 22h36

BootNic wrote:
>
> The following URL may display as desired. It does use a wee bit of
> invalid CSS in an attempt to support more Mozilla browsers.
>
> http://tinyurl.com/5fmn8o

Forget the invalid CSS... I thought surely this is invalid HTML - a
select element that is *not* inside a form element - yet it passes HTML
4.01 Strict validation.

Curious.

--
Berg

09/09/2008, 01h40

On 8 Sep, 22:36, Bergamot <berga...@visi.com> wrote:
> BootNic wrote:
>
> > The following URL may display as desired. It does use a wee bit of
> > invalid CSS in an attempt to support more Mozilla browsers.
>
> > http://tinyurl.com/5fmn8o
>
> Forget the invalid CSS... I thought surely this is invalid HTML - a
> select element that is *not* inside a form element - yet it passes HTML
> 4.01 Strict validation.
>
> Curious.

The HTML is valid. A div element can contain a flow entity (block or
inline).
A form control, like select, is an inline element:

<!ELEMENT DIV - - (%flow

* -- generic language/style
container -->
<!ENTITY % flow "%block; | %inline;">
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; |
%formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

http://www.w3.org/TR/REC-html40/sgml/dtd.html

"The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration
when they are used to build user interfaces."
<http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1>

09/09/2008, 17h29

Roy A. wrote:

> "The elements used to create controls generally appear inside a FORM
> element, but may also appear outside of a FORM element declaration
> when they are used to build user interfaces."

The "but" part really means that the authors of HTML specifications wanted
to allow, at the syntax level, the use of <input> elements and other form
fields elements so that they are handled completely via client-side
scripting (read: JavaScript).

As a side effect, the syntax also allows <textarea> to be used just to
create a scrollable text box - which is almost always a foolish idea.

ObCSS: You can use CSS to make a <div> element (or e.g. <p> element)
scrollable.

Yucca

08/09/2008, 03h01	#1
removeps-groups@yahoo.com Messages: n/a Hébergeur:	How to display table and select next to each other How to display table and select next to each other? <html> <body> <table border=1 style="display:inline-table"> <tr><td>Hello1</td></tr> <tr><td>Hello2</td></tr> <tr><td>Hello3</td></tr> <tr><td>Hello4</td></tr> <tr><td>Hello5</td></tr> </table> <select size="3"> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> </select> </body> </html> In Mozilla 3.0.1, the table is on the left with 5 rows of data. The select of size 3 is next to it, thanks to the inline-table, which is fine. However, the bottom of the select aligns with the bottom on the first table cell. What I want is the top of the select to align with the top of the table. IE 7 displays the select below the table, ignoring the inline-table directive. So the question is how to get it to align the top of the select with the top of the table in Mozilla and IE. Thanks.

08/09/2008, 05h09	#2
BootNic Messages: n/a Hébergeur:	Re: How to display table and select next to each other On Sun, 7 Sep 2008 18:01:04 -0700 (PDT) "removeps-groups@yahoo.com" <removeps-groups@yahoo.com> wrote in: <ae34e738-5ed5-4393-9c6e-8e6ee03f558e@r15g2000prh.googlegroups.com> > How to display table and select next to each other? > [snip] > So the question is how to get it to align the top of the select with > the top of the table in Mozilla and IE. Consider supporting just a few more browsers. The following URL may display as desired. It does use a wee bit of invalid CSS in an attempt to support more Mozilla browsers. http://tinyurl.com/5fmn8o -- BootNic Sun Sep 7, 2008 11:09 pm Humor is emotional chaos remembered in tranquility. James Thurber -----BEGIN PGP SIGNATURE----- Version: GnuPG v2.0.9 (GNU/Linux) iEYEARECAAYFAkjEl3YACgkQylMUzZO6jeLIJwCggrP+do9ah9 wp3v6AUVOTx+/J ZJMAoK4YiZwVZthuUYaVVdKsdzrJHAEX =/u7g -----END PGP SIGNATURE-----

08/09/2008, 09h21	#3
Ben C Messages: n/a Hébergeur:	Re: How to display table and select next to each other On 2008-09-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote: > How to display table and select next to each other? > ><html> ><body> ><table border=1 style="display:inline-table"> > <tr><td>Hello1</td></tr> > <tr><td>Hello2</td></tr> > <tr><td>Hello3</td></tr> > <tr><td>Hello4</td></tr> > <tr><td>Hello5</td></tr> ></table> ><select size="3"> > <option value="1">1</option> > <option value="1">2</option> > <option value="1">3</option> ></select> ></body> ></html> > > In Mozilla 3.0.1, the table is on the left with 5 rows of data. The > select of size 3 is next to it, thanks to the inline-table, which is > fine. However, the bottom of the select aligns with the bottom on the > first table cell. What I want is the top of the select to align with > the top of the table. > IE 7 displays the select below the table, ignoring the inline-table > directive. > > So the question is how to get it to align the top of the select with > the top of the table in Mozilla and IE. vertical-align: top on the inline table should do the trick, but not in browsers that don't support inline-table. You may have more luck in IE by just floating the table left instead. By the way your markup is not valid. Check it at http://validator.w3.org (or with nsgmls).

08/09/2008, 10h45	#4
Roy A. Messages: n/a Hébergeur:	Re: How to display table and select next to each other On 8 Sep, 03:01, "removeps-gro...@yahoo.com" <removeps- gro...@yahoo.com> wrote: > How to display table and select next to each other? > <html> Don't you have a DOCTYPE declaration? > <body> The document should at least have a title. > <table border=1 style="display:inline-table"> > <tr><td>Hello1</td></tr> > <tr><td>Hello2</td></tr> > <tr><td>Hello3</td></tr> > <tr><td>Hello4</td></tr> > <tr><td>Hello5</td></tr> > </table> > <select size="3"> > <option value="1">1</option> > <option value="1">2</option> > <option value="1">3</option> > </select> > </body> > </html> > > In Mozilla 3.0.1, the table is on the left with 5 rows of data. The > select of size 3 is next to it, thanks to the inline-table, which is > fine. However, the bottom of the select aligns with the bottom on the > first table cell. What I want is the top of the select to align with > the top of the table. > > IE 7 displays the select below the table, ignoring the inline-table > directive. So is FF2, too. > So the question is how to get it to align the top of the select with > the top of the table in Mozilla and IE. <table border=1 style="float: left; margin-right: 1em">

08/09/2008, 17h18	#5
removeps-groups@yahoo.com Messages: n/a Hébergeur:	Re: How to display table and select next to each other On Sep 8, 12:21am, Ben C <spams...@spam.eggs> wrote: > By the way your markup is not valid. Check it at http://validator.w3.org > (or with nsgmls). Thanks. Is there a way to validate a file? In the URL there I entered file:///C:/Documents%20and%20Settings/whatever and it says that type of URL is not supported. I know I didn't have a DOCTYPE. Dreamweaver has a function to validate markup, and it only says that my select tag is missing the name value. Strange. http://www.validome.org/ lets you upload a file to validate, and it errors out that DOCTYPE is missing. After I enter the DOCTYPE, an empty head section, I get several errors.

08/09/2008, 17h24	#6
Ed Mullen Messages: n/a Hébergeur:	Re: How to display table and select next to each other removeps-groups@yahoo.com wrote: > On Sep 8, 12:21 am, Ben C <spams...@spam.eggs> wrote: > >> By the way your markup is not valid. Check it at http://validator.w3.org >> (or with nsgmls). > > Thanks. Is there a way to validate a file? In the URL there I > entered > > file:///C:/Documents%20and%20Settings/whatever > > and it says that type of URL is not supported. You can't check a local file on your hard drive using the "Validate by URI" tab. First add a valid doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html Then go to the validator page and click the "Validate by file upload" tab. Browse to the file you want to check. -- Ed Mullen http://edmullen.net Why do banks charge you a non-sufficient funds fee on money they already know you don't have?

08/09/2008, 17h35	#7
Ben C Messages: n/a Hébergeur:	Re: How to display table and select next to each other On 2008-09-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote: > On Sep 8, 12:21am, Ben C <spams...@spam.eggs> wrote: > >> By the way your markup is not valid. Check it at http://validator.w3.org >> (or with nsgmls). > > Thanks. Is there a way to validate a file? In the URL there I > entered > > file:///C:/Documents%20and%20Settings/whatever > > and it says that type of URL is not supported. That's because the website can't read a file from your local disk. In general that's a good thing-- you don't want just any website you visit to be able to read your personal files. You can use the "Direct Input" option and just paste your markup into the box. > I know I didn't have a DOCTYPE. > > Dreamweaver has a function to validate markup, and it only says that > my select tag is missing the name value. Strange. You have to have a DOCTYPE to validate properly, and you should use one anyway to avoid the unpredictability of quirks mode. Use this one: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> > http://www.validome.org/ lets you upload a file to validate, and it > errors out that DOCTYPE is missing. After I enter the DOCTYPE, an > empty head section, I get several errors. Yes that sounds like it's doing something.

08/09/2008, 17h57	#8
Johannes Koch Messages: n/a Hébergeur:	Re: How to display table and select next to each other Ben C schrieb: > On 2008-09-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote: >> On Sep 8, 12:21 am, Ben C <spams...@spam.eggs> wrote: >> >>> By the way your markup is not valid. Check it at http://validator.w3.org >>> (or with nsgmls). >> Thanks. Is there a way to validate a file? In the URL there I >> entered >> >> file:///C:/Documents%20and%20Settings/whatever >> >> and it says that type of URL is not supported. > > That's because the website can't read a file from your local disk. You would request a file "/C:/Documents%20and%20Settings/whatever" on the _W3C's validator web server_. This may not exist. And, of course, they don't want anybody to read files on _their_ server. -- Johannes Koch In te domine speravi; non confundar in aeternum. (Te Deum, 4th cent.)

08/09/2008, 22h36	#9
Bergamot Messages: n/a Hébergeur:	Re: How to display table and select next to each other BootNic wrote: > > The following URL may display as desired. It does use a wee bit of > invalid CSS in an attempt to support more Mozilla browsers. > > http://tinyurl.com/5fmn8o Forget the invalid CSS... I thought surely this is invalid HTML - a select element that is not inside a form element - yet it passes HTML 4.01 Strict validation. Curious. -- Berg

09/09/2008, 01h40	#10
Roy A. Messages: n/a Hébergeur:	Re: How to display table and select next to each other On 8 Sep, 22:36, Bergamot <berga...@visi.com> wrote: > BootNic wrote: > > > The following URL may display as desired. It does use a wee bit of > > invalid CSS in an attempt to support more Mozilla browsers. > > > http://tinyurl.com/5fmn8o > > Forget the invalid CSS... I thought surely this is invalid HTML - a > select element that is not inside a form element - yet it passes HTML > 4.01 Strict validation. > > Curious. The HTML is valid. A div element can contain a flow entity (block or inline). A form control, like select, is an inline element: <!ELEMENT DIV - - (%flow* -- generic language/style container --> <!ENTITY % flow "%block; \| %inline;"> <!ENTITY % inline "#PCDATA \| %fontstyle; \| %phrase; \| %special; \| %formctrl;"> <!ENTITY % formctrl "INPUT \| SELECT \| TEXTAREA \| LABEL \| BUTTON"> http://www.w3.org/TR/REC-html40/sgml/dtd.html "The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces." <http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.2.1>

09/09/2008, 17h29	#11
Jukka K. Korpela Messages: n/a Hébergeur:	Re: How to display table and select next to each other Roy A. wrote: > "The elements used to create controls generally appear inside a FORM > element, but may also appear outside of a FORM element declaration > when they are used to build user interfaces." The "but" part really means that the authors of HTML specifications wanted to allow, at the syntax level, the use of <input> elements and other form fields elements so that they are handled completely via client-side scripting (read: JavaScript). As a side effect, the syntax also allows <textarea> to be used just to create a scrollable text box - which is almost always a foolish idea. ObCSS: You can use CSS to make a <div> element (or e.g. <p> element) scrollable. Yucca

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email