<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<head>
<title>Hover Test</title>
<style type="text/css">
li {height:1.3em; /* or whatever height will only show the first line */
display:block;
overflow:hidden;
}
</style>
<script type="text/javascript">
function showLI(id)
{
document.getElementById(id).style.height = "auto";
}
function hideLI(id)
{
document.getElementById(id).style.height = "1.3em";
}
</script>
</head>
<body>
<ul>
<li id="day1" onmouseover="showLI('day1');" onmouseout="hideLI('day1');"><a>Day 1</a><p>Some text for this day</p></li>
</ul>
</body>
Just give each li it's own id, and pass that id to the onmouseover/out event handlers. Your viewer, of course, needs to have javascript enabled to use this.
I think that there is a way to do this with just pure CSS, but it's easier to just javascript until the day IE6 usage is rare enough that you don't care if IE6 users can see your page. As far as I know, IE6 is still the most commonly used browser.
Longhair
A better way would be to have JS that loops through all li tags in a specific ul class, adding the onmouseover and onmouseout events. That way you would not have to hardcode the events to each element.
Legolas_
I would also consider dropping support for IE6 fully and use the all CSS way. It is much cleaner, and would help encourage people to upgrade to IE7 (ick!), Firefox, or another alternative browser (Opera, Safari, etc...).
Enigma:
Safari for Windows...very nice, but as long as it is a beta with the amazing high number of security leaks it has now, you should keep your hands off it ;o)
Honestly, much as I howl about IE, I can't expect people to switch. Especially by making a site that doesn't work on IE.
Many of the people who use IE are people who just double click on the nice friendly icon on their desktop that says "Internet". If your design doesn't work on IE, these people won't blame Microsoft, they'll blame YOU. After all, every other website out there works on IE. Most people have no concept of a W3C standard, and figure that the WWW should just use the MS standards since they have the largest market share. Sure, these people need to be educated, but making a website that doesn't work on IE won't solve the problem.
For the rest, there are actually some sorta real reasons to use IE - even version 6. For example, if you're an IT person for a company with more than a dozen or so computers, my understanding is that there are very easy ways of pushing updates out to all the computers in the company at once. Firefox has something like this, but to a busy IT person, why do the extra work? This was the case in the place where my wife works, until she and whole bunch of other people in the company started howling about IE until the IT guys listened. (one of the IT guys is also her father which helps) They now have Firefox. Does Opera or the upcoming Safari have any corporate network friendly features?
As somebody else brought up, IE7 isn't available to everyone using Windows either. For the computers in my family, we have 3 computers with Windows on one of the partitions. I bought them off of ebay, and they are not valid copies of Windows. So no IE7 for me. Oh, my wife's computer has Windows on it too, but I haven't checked if I can put IE7 on there since she always uses the Ubuntu side. Hasn't booted Windows since she bought it.
