Chrome Inserts Extra Blank Lines in Drop-Down list

[OccasionalFlyer]

I have a web page with four hierarchical drop-down lists. That is, if
you choose A lin list 1, you are presented with some specific options
for "A" in List 2. If you choose something specific in List 2, say H,
then list 3 should show you specific choices for H, etc. This all
works fine in IE, Firefox, and Safari. What I see is one blank line,
followed by all the actual choices one oculd make. In Chrome,
however, there are three blank lines. Since I have written no code
for Chrome, I have no idea why it would function differently. I
haven't verified this for all sets of options for the given list box,
but this one that I added has the problem:
{
value: "LRDS01",
options: [
{ value: "2107", caption: "Fall, 2010" },
{ value: "2111", caption: "Spring, 2011" },
{ value: "2114", caption: "Summer 2011" },
{ value: "2117", caption: "Fall, 2011" },
{ value: "2121", caption: "Spring, 2012" },
{ value: "2124", caption: "Summer 2012" },
{ value: "2127", caption: "Fall, 2012" },
{ value: "2131", caption: "Spring, 2013" },
{ value: "2134", caption: "Summer 2013" },
{ value: "2137", caption: "Fall, 2013" }
]
},
This appears in a long set of value blocks. Yes, I know that coding
all these literals is a bad idea but the JavaScript runs on one server
and the database it would need to pull from runs on another server and
apparently that's not legal for JavaScript to do. Anyway, I can't
change that structure, so I need to solve this problem with the
situation as it exists. Any suggestions? Thanks.

 

[RobG]

I have a web page with four hierarchical drop-down lists.

Are the "drop-down lists" constructed using select elements or some
other structure, say P or DIV elements?

That is, if
you choose A lin list 1, you are presented with some specific options
for "A" in List 2. If you choose something specific in List 2, say H,
then list 3 should show you specific choices for H, etc. This all
works fine in IE, Firefox, and Safari. What I see is one blank line,
followed by all the actual choices one oculd make. In Chrome,
however, there are three blank lines. Since I have written no code
for Chrome, I have no idea why it would function differently. I
haven't verified this for all sets of options for the given list box,
but this one that I added has the problem:
{
value: "LRDS01",
options: [ [...]
This appears in a long set of value blocks. Yes, I know that coding
all these literals is a bad idea but the JavaScript runs on one server

So the code that generates the mark-up runs on a server and all
clients get exactly the same HTML? Or do you mean the script is served
from a different server and the script runs on the client?

and the database it would need to pull from runs on another server and
apparently that's not legal for JavaScript to do. Anyway, I can't
change that structure, so I need to solve this problem with the
situation as it exists. Any suggestions?

You have not shown either the resulting HTML or the code that
generates it (or been clear about where the code runs). Without at
least one of those things, we can't help you other than to guess what
you might have done.

Start by looking at the generated HTML to see if there are any
differences between browsers (if the code runs in the browser). If
not, then it is an HTML or CSS issue and you should ask in a relevant
news group. If you find the code is generating different mark-up
(because of some browser quirk perhaps), then you might get an answer
here.

But you must show the code (a minimal example that demonstrates the
issue) to do that.