By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,940 Members | 1,328 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,940 IT Pros & Developers. It's quick & easy.

How to display table and select next to each other

P: n/a
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.
Sep 8 '08 #1
Share this Question
Share on Google+
10 Replies


P: n/a
On Sun, 7 Sep 2008 18:01:04 -0700 (PDT)
"re*************@yahoo.com" <re*************@yahoo.comwrote in:
<ae**********************************@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-----

Sep 8 '08 #2

P: n/a
On 2008-09-08, re*************@yahoo.com <re*************@yahoo.comwrote:
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).
Sep 8 '08 #3

P: n/a
On 8 Sep, 03:01, "removeps-gro...@yahoo.com" <removeps-
gro...@yahoo.comwrote:
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">
Sep 8 '08 #4

P: n/a
On Sep 8, 12:21*am, Ben C <spams...@spam.eggswrote:
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.
Sep 8 '08 #5

P: n/a
re*************@yahoo.com wrote:
On Sep 8, 12:21 am, Ben C <spams...@spam.eggswrote:
>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?
Sep 8 '08 #6

P: n/a
On 2008-09-08, re*************@yahoo.com <re*************@yahoo.comwrote:
On Sep 8, 12:21*am, Ben C <spams...@spam.eggswrote:
>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.
Sep 8 '08 #7

P: n/a
Ben C schrieb:
On 2008-09-08, re*************@yahoo.com <re*************@yahoo.comwrote:
>On Sep 8, 12:21 am, Ben C <spams...@spam.eggswrote:
>>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.)
Sep 8 '08 #8

P: n/a

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
Sep 8 '08 #9

P: n/a
On 8 Sep, 22:36, Bergamot <berga...@visi.comwrote:
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>
Sep 8 '08 #10

P: n/a
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 <inputelements 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 <textareato be used just to
create a scrollable text box - which is almost always a foolish idea.

ObCSS: You can use CSS to make a <divelement (or e.g. <pelement)
scrollable.

Yucca

Sep 9 '08 #11

This discussion thread is closed

Replies have been disabled for this discussion.