Onmouseover and IE6 - Javascript

Thomas Jansen

Hi,

I have trouble with <DIV> tags and IE6. I use several <DIV> tags in a
table to create a menu (see code below) The first cell works like
expected, when the mouse enters the box the background color is
changed. In cell 2-4 however, this only happens when I move the mouse
over the text!. Firefox seems to handle the code correctly. Can the
code be changed to work in both IE as FF?

Thanks in advance,

Thomas

___ Code ___

<html>
<head>

<style type="text/css">
div
{
border-style: solid;
border-width: 1px
}
</style>

</head>

<body>
<table width=100%>
<tr>
<td>
<div onmouseover="style.background='steelblue'"
onmouseout="style.background='white'">111</div>
</td>
<td>
<div onmouseover="style.background='steelblue'"
onmouseout="style.background='white'">111</div>
</td>
<td>
<div onmouseover="style.background='steelblue'"
onmouseout="style.background='white'">111</div>
</td>
<td>
<div onmouseover="style.background='steelblue'"
onmouseout="style.background='white'">111</div>
</td>
</tr>
</table>
</body>
</html>

Jul 23 '05 #1

Subscribe Post Reply

2813

terriblecow

So Thomas you're just about there there's just a snitch of code that
can get you what you are looking for. add the following code to each
<DIV> tag:

style="width:100%;"

so your first div tag should look like:
<div style="width:100%;"
onmouseover="this.style.background='steelblue';"
onmouseout="this.style.background='white';">111</div>

the problem was that the div was only occupying the space in the column
that the text needed. So with the width command you can set this to
always be the entire width of the column. blah .. blah . . . blah . .
..
I hope this helps

-terriblecow

Jul 23 '05 #2

Thomas

Thanks, this seems to work. A bit strange though that the borders were
correct ... Well I guess is it just one of those IE features :-)

Thomas
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Jul 23 '05 #3

SimonFx

Thomas Jansen wrote:

I have trouble with <DIV> tags and IE6. I use several <DIV> tags in a
table to create a menu (see code below) The first cell works like
expected, when the mouse enters the box the background color is
changed. In cell 2-4 however, this only happens when I move the mouse
over the text!. Firefox seems to handle the code correctly. Can the
code be changed to work in both IE as FF?

This isn't a specific answer and I may be showing you something you
can't use, but I found it really interesting, you make the same effect
with only styles!

http://www.alistapart.com/articles/taminglists/

Tested with IE / Mozilla / Firebird / Opera / Safari. Look ma! No
javascript:

---

<html>
<head>

<style type="text/css">
#TAB3 {
position: relative;
font: bold 12px Verdana, Helvetica, Arial, sans-serif;
height: 14px;
margin: 0px;
padding: 1px;
text-align: left; }
#TAB3 a {
border-style: solid;
border-width: 1px;
color: #000000;
background: #ffffff;
margin: 0px 5px;
padding: 0px 5px;
text-decoration: none; }
#TAB3 a:hover {
background: #339977; }
#TAB3 li {
display: inline; }
</style>

</head>
<body>

<UL ID=TAB3>
<LI><a href="">111</a></LI>
<LI><a href="">222</a></LI>
<LI><a href="">333</a></LI>
</UL>

</body>
</html>

Jul 23 '05 #4

Michael Winter

On Wed, 24 Nov 2004 13:17:55 +0000, SimonFx <ne**********@sapm.yahoo.com>
wrote:

[snip]

This isn't a specific answer and I may be showing you something you
can't use, but I found it really interesting, you make the same effect
with only styles!
With browsers that implement CSS properly, you can apply that effect to
any element. However, IE only implements the :hover pseudo-class on A
elements, something I think ALA neglect to mention.

[snip]
#TAB3 {
position: relative;
font: bold 12px Verdana, Helvetica, Arial, sans-serif;
Font sizes should be specified relative to the default font size,
preferably using percentages with body text at 100%. They should not be
fixed.
height: 14px;
Again, fixed sizes should be avoided. What if someone overrides the font
setting so they can see the text better? The text will be clipped inside
the box. Use em units, where 1em is the height of the text.

height: 1.2em;
margin: 0px;

margin: 0;

would do as zero in any unit is zero. This is the only occasion where a
length may have its unit omitted.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #5

Rob B

Similarly:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">

body {
font-size: 100%;
margin: 0;
}
table {
margin: 0 auto;
border-collapse: collapse;
}
td {
margin: 0;
padding: 0;
}
td a.roll:link,
td a.roll:visited,
td a.roll:active {
display: block;
width: 140px;
height: 100%;
font: bolder 80% tahoma;
color: #4682b4;
text-decoration: none;
text-align: center;
border: 1px #000 solid;
background: #fff;
}
td a.roll:hover {
color: #fff;
background: #4682b4;
}

</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><a class="roll" href="#">selection 1</a></td>
<td><a class="roll" href="#">selection 2</a></td>
<td><a class="roll" href="#">selection 3</a></td>
<td><a class="roll" href="#">selection 4</a></td>
</tr>
</tbody>
</table>
</body>
</html>

More: http://css.maxdesign.com.au/listamatic/index.htm

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Jul 23 '05 #6

SimonFx

Michael Winter wrote:

With browsers that implement CSS properly, you can apply that effect to
any element. However, IE only implements the :hover pseudo-class on A
elements, something I think ALA neglect to mention.

Thanks for you tips again. I was finding it brutal with the various
browsers giving different results with em settings, when I used px then
all results seemed to settle down. I guess I will have to work a little
harder with em I think.

The a:hover works fine in all the browsers I had access to (downstairs)
= IE / Mozilla / Firebird / Opera / Safari. Oh! I see, :hover only works
on "A" elements in IE, but other browsers allow it only more than that.
Gotcha.

Again, Michael, thanks for the tips.

---

<html>
<head>

<style type="text/css">
#TAB3 {
position: relative;
font: bold 1em Verdana, Helvetica, Arial, sans-serif;
height: 1.2em;
margin: 0;
padding: 1px;
text-align: left; }
#TAB3 a {
border-style: solid;
border-width: 1px;
color: #000000;
background: #ffffff;
margin: 0px 5px;
padding: 0px 5px;
text-decoration: none; }
#TAB3 a:hover {
background: #339977; }
#TAB3 li {
display: inline; }
</style>

</head>
<body>

<UL ID=TAB3>
<LI><a href="">111</a></LI>
<LI><a href="">222</a></LI>
<LI><a href="">333</a></LI>
</UL>

</body>
</html>

Jul 23 '05 #7

Similar topics

Onmouseover to scroll DIV?

by: laurie | last post by:

Hi. I have a DIV section that has many thumbnail images inside it. I have a DIV so all images can fit in a row and the horizontal scroll bar is used to move the thumbnails from left to right. ...

Javascript

onmouseover question

by: Richard | last post by:

I know I can have like <a href="#" onclick="dothis" onmouseover="dothat"> But how do you properly code two mouseover's in one statement? <a href="#" onmousever="dothis" onmouseover="dothat"> As...

Javascript

complicated OnMouseOver

by: windandwaves | last post by:

Hi Gurus I am trying to make this rather complicated maps with an a huge number of mouseovers and the like. I want to set up a function that OnMouseDown swaps the OnMouseOver and OnMouseOut for...

Javascript

Force fake onmouseover

by: news.west.cox.net | last post by:

I have been writing a practice sliding div navigation script. I am finding myself in the position where I need to force a div into showing the hover behavior defined in css. So my question is...

Javascript

Changing onmouseover dymnamically

by: drjackk | last post by:

Hello, I'm trying to change the onmouseover event dynamically. This sets-up the initial onmouseover event: <a href="home.html"> <img border="0" id="img22" src="images/home1.jpg"...

Javascript

Table with Fixed Header not working after adding an onmouseover event

by: MrCode2k | last post by:

Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....

HTML / CSS

Scrolling Table with Fixed Headers not working after adding an onmouseover event

by: MrCode2k | last post by:

Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore....

HTML / CSS

Control the effect of an onMouseOver function.

by: Justin Rowe | last post by:

I'm attempting to design a site with alot of dynamic content and intractability, however I've hit a snag when it comes to the function of the onMouseOver and onMouseOut events. Using a bit of code...

Javascript

Javascript OnMouseOver Event not executing function inside it...

by: den2005 | last post by:

Hi everybody, I am confused and still looking why this codes is not working. Can anyone notice or know why this code is not working? Thanks in advance. Code working: <form id="form1"...

Javascript

onmouseover event function for dom created div

by: oopaevah | last post by:

I have written some dom code to create a list of divs, each with it's own id. I want to set the onmouseover and onmouseout events to highlight the div when the mouse is over it. However I cannot...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA