Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Onmouseover and IE6

Reply
Thread Tools

Onmouseover and IE6

 
 
Thomas Jansen
Guest
Posts: n/a
 
      11-24-2004
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>
 
Reply With Quote
 
 
 
 
terriblecow@gmail.com
Guest
Posts: n/a
 
      11-24-2004
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

 
Reply With Quote
 
 
 
 
Thomas
Guest
Posts: n/a
 
      11-24-2004
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!
 
Reply With Quote
 
SimonFx
Guest
Posts: n/a
 
      11-24-2004
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>
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      11-24-2004
On Wed, 24 Nov 2004 13:17:55 +0000, SimonFx <(E-Mail Removed)>
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.
 
Reply With Quote
 
Rob B
Guest
Posts: n/a
 
      11-24-2004


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!
 
Reply With Quote
 
SimonFx
Guest
Posts: n/a
 
      11-24-2004
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>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE6 Garbage Collection and general IE6 slowness problems timothytoe Javascript 4 06-03-2008 05:17 PM
IE6 SP1 rendering vs IE6 SP2 rendering Peter Mount HTML 4 01-31-2006 08:01 AM
Bug in IE6 , cant remove ie6 to replace Ockerr Computer Support 2 01-21-2005 04:01 PM
Just one ie6 template that works with ie6!? Ivor O'Connor HTML 4 11-25-2003 09:16 PM
onmouseover/out: bug in IE6 ? Jeroni Paul Javascript 0 09-09-2003 12:24 AM



Advertisments