Odd behaviour when class changed dynamically 1

[Fingerprint]

I've been writing an electronic form with multiple pages, and tried to be good by positioning everything with CSS.

There is a lefthand menu to jump between sections, and at the bottom of each page are back and next buttons. All the menu buttons and the back and next buttons are made using table cells with an onclick event to move between pages. (The guy involved doesn't want proper buttons).

I wrote a simple little script to highlight the 'buttons' on mouseover/focus which changes the css class of the object, altering the background colour. On most pages this works fine, but where the main content of the page is shorter than the menu, if you mouseover the back or next buttons, then the bottom of the menu is cut off at the same level as the bottom of these buttons.

There are no objects which could appear over the menu and cover it up, and it's only if the function I call changes the class name that I get this problem.

Does anyone have any ideas why this is happening (have only been able to test in IE6)? I haven't got a live page for people to view, but can post the code if necessary.

Thanks for any help!

"The secret to creativity is knowing how to hide your sources" - Einstein

 

[chessbot]

Why are you using table cells as links? Just use more css:

<style type="text/css">
<!--

a.button {
    [red]display: block;[/red]
    width: 150px;
    height: 30px;
    background-color: blue;
    color: yellow;
    }

a.button:hover {
    color: blue;
    background-color: yellow;
    }

-->
</style>
.....
<a href="back.html" class="button">&laquo;Back</a>
<a href="next.html" class="button">Next&raquo;</a>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[Fingerprint]

Thanks for the tip - I've only been working with CSS properly for a few months, so I guess the first solution that occurred to me wasn't the best one : )

I'll try it out when I'm back in the office on Monday - as long as it all works out I'll give you a star.

Still a bit curious to know why I got the strange behaviour though, so if anyone has any ideas, let me know.

Thanks again!

"The secret to creativity is knowing how to hide your sources" - Einstein

 

[Fingerprint]

After a lot of research, I've found out that the problem is due to an Internet Explorer 6 bug - the way it redraws some content when any properties affecting layout (such as background) are changed. It was nothing to do with the Javascript involved, annoyingly enough after I'd changed everything.

The only workaround seems to be to specify an alternate stylesheet for IE6, either client side or when the page is produced dynmically by a server.

Thanks again to Chessbot for his/her advice.

"The secret to creativity is knowing how to hide your sources" - Einstein

 

[chessbot]

His.
Interesting, hadn't heard that before.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.