Onmouseover and IE6

T

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>
 
T

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
 
T

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
 
S

SimonFx

Thomas said:
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?
Click to expand...

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>
 
M

Michael Winter

[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!
Click to expand...

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;
Click to expand...

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;
Click to expand...

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;
Click to expand...

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
 
R

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
 
S

SimonFx

Michael said:
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.
Click to expand...

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Having trouble centering contents of td ? 3
Help needed with thank you message 5
Image shifts to the right when export the page to pdf 4
How to have two html audio players on one page? 0
Help with Visual Lightbox: Scripts 2
Javascript DOM 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 28 (members: 1, guests: 27)
Robots: 636

Forum statistics

Threads
473,769
Messages
2,569,581
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top