same html code behave differently in IE and FireFox

usgog

Here is my html code snippet:
<html>
<style type="text/css">
option:hover {
background:#e5ecf9;
}

</style>
<table>
<tr><td>
<select style="border:solid 1px #7f9db9" name="select" size="4" ">
<option value="name1">Name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</td></tr></table>
</html>

So I want to make the drop down list look like a panel and the options
are hoverable. But in IE: options are NOT hoverable and it looks like
a big text field with border indent.
in FireFox: options are hoverable and no border indent. (GOOD!) BUT it
has a grey'ed vertical scrollbar.

So how to make the display consistent in both IE and FF without the
scrollbar, options hoverable, and like a panel?

usgog

Alright, now I know option is not hoverable in IE. What about other
differences?

On Mar 23, 4:17 pm, "usgog" <u...@yahoo.comwrote:

Here is my html code snippet:
<html>
<style type="text/css">
option:hover {
background:#e5ecf9;

}

</style>
<table>
<tr><td>
<select style="border:solid 1px #7f9db9" name="select" size="4" ">
<option value="name1">Name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</td></tr></table>
</html>

So I want to make the drop down list look like a panel and the options
are hoverable. But in IE: options are NOT hoverable and it looks like
a big text field with border indent.
in FireFox: options are hoverable and no border indent. (GOOD!) BUT it
has a grey'ed vertical scrollbar.

So how to make the display consistent in both IE and FF without the
scrollbar, options hoverable, and like a panel?

Jukka K. Korpela

Scripsit usgog:

Here is my html code snippet:

But where's your URL?

But in IE: options are NOT hoverable

Indeed.

So how to make the display consistent in both IE and FF without the
scrollbar, options hoverable, and like a panel?

You don't.

If you had posted the URL, someone could have adviced you on how to change
your approach. Now it's just my gut feeling that you should really use a
list of links, because attempts to simulates lists of links with select
elements is the typical way of getting into trouble with select elements,
and more trouble than you know.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jim Moe

usgog wrote:

Here is my html code snippet:
<html>
<style type="text/css">
option:hover {
background:#e5ecf9;
}

IE6 and earlier do not do :hover on anything besides the <aelement.
Without an URL there is nothing else to say about your query.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Andy Dingley

On 24 Mar, 01:17, "usgog" <u...@yahoo.comwrote:

<select style="border:solid 1px #7f9db9" name="select" size="4" ">
<option value="name1">Name1</option>

Why isn't this <selectinside a <form?

If you're planning on NOT using it within a <form>, then <selectis
inappropriate markup to use. You'd probably get better results more
easily by using <uland <liinstead.

If it is meant to be a CSS question about that exact piece of HTML
(and you're using a <form>), then:

- Post exactly the code you're going to use.
- Post a URL to it, not a pasted fragment.
- Post a link to a real server, behaving exactly like the production
server.
- Attach a doctype to it that uses standards-based rendering
- Validate the HTML and CSS beforehand, or you'll simply be told to
go away and do that first.

CSS issues are generally subtle and dependent on complex context-
dependent things liek server HTTP headers. If we aren't looking at
exactly the same input, we know that we can't expect the same
behaviour. Clueful people who might be able to help will thus not
bother to, as they recognise it's probably an unrealistic example.

same html code behave differently in IE and FireFox

This discussion thread is closed

Similar topics