HTML Forum

**insomniac-pro** · 11-04-2007, 08:29 AM

I should first point out that I'm pretty new to anything that's not just very basic html. I'm trying to incorporate some java into my pages. I've gotten things to work in Firefox, but not IE. I've been pointed to hacks that should fix this, but frankly, it's over my head...

Here is the script for a page I'm testing mouseover out on before I even attempt to use it for something more time consuming:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript">
function mouseOver()
{
document.b1.src="hello01.jpg"
}
function mouseOut()
{
document.b1.src="hello02.jpg"
}
</script>

</head>
<body>

<a href="http://www.redhorizonrising.com" target="blank"
onmouseover="mouseOver()"
onmouseout="mouseOut()"
<img border="0" src="hello02.jpg" name="b1" alt="you're missing out"></a>

</body>
</html>

I've checked this test page with http://validator.w3.org/ and the only error it gives me now is this one:

Line 25, Column 0: unclosed start-tag requires SHORTTAG YES.

<img border="0" src="hello02.jpg" name="b1" alt="you're missing out"></a>

The construct <foo<bar> is valid in HTML (it is an example of the rather obscure “Shorttags” feature) but its use is not recommended. In most cases, this is a typo that you will want to fix. If you really want to use shorttags, be aware that they are not well implemented by browsers.

I don't understand what they mean, nor how I should fix it. Firefox doesn't seem to have a problem with this, but when I attempt to open the page in IE nothing shows up.

I'm sorry, I'm sure this is cake for the rest of you, but like I said, it's all new to me.. Thank you for any help you can give me : )

**LadynRed** · 11-04-2007, 08:58 AM

Ok, you don't need to use javascript just for an image rollover, it can be very easily done using CSS only, which is also much cleaner and more accessible.

Now, your code is wrong:

Quote:

It needs to be like this:
<a href="http://www.redhorizonrising.com" target="blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" src="hello02.jpg" name="b1" alt="you're missing out"></a>

**insomniac-pro** · 11-04-2007, 09:30 AM

thank you very much! i feel silly that it was something so simple that i missed. i kept staring at it trying to figure out what i had done wrong!

**LadynRed** · 11-05-2007, 02:38 PM

Most of the time it's the small stuff that come back to bite you. We often spend so much time staring at it, that we just don't SEE things - we know what we WANTED to be there-- so you gloss over it.

**insomniac-pro** · 11-06-2007, 02:19 AM

Okay, I guess I have another question. I've got the whole site up and running (if not all the info up) and I'm still having a problem. I wound up using a horizontal drop down menu. When in IE the menus open, but they're kind of hinky. Sometimes you can access the menus with no problem, but other times they don't stay open when you go to move the cursor down the list. Here's the site: http://www.redhorizonrising.com/JAMMCon08

Here is the code for the index page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Web Home of JAMMCon08!
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script type="text/javascript">

h1 {text-align: center; font-weight: bold; font-size: 12pt; font-family: arial}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
font-family: arial;
font-size: 10pt;
}
li:hover ul, li.over ul {
display: block; }
p {font-size: 10pt; font-family: arial; font-weight: normal; color: #404040; margin-left: 15px;}
a:link {color: #000000;}
a:visited {color: #808080;}

</script>
<link rel=stylesheet type="text/css" href=teststyle.css>
</head>
<body>

<img src="jammconbanner2.jpg" alt="JAMMCon08! August 9th, 2008 Brought to you by Red Horizon Rising in association with JAMM Club of St. Clair County (banner image not loaded).">

<table width="800">
<tr>
<td width="150" valign="top">

<ul id="nav">
<li><a href="http://www.redhorizonrising.com/JAMMCon08/index.html">Home</a></li>

<li><a href="#">About</a>
<ul>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/history.html">History</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/rules.html">Con Rules</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/location.html">Location</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/directions.html">Directions</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/contacts.html">Contacts</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/faqs.html">FAQs</a></li>
</ul>
</li>

<li><a href="#">Registration</a>
<ul>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/registration.html">Information</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/merchandise.html">Merchandise</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/volunteer.html">Volunteer</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/artistregistration.html">Artists</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/vendorregistration.html">Vendors</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/panelregistration.html">Panels</a></li>
</ul>
</li>

<li><a href="#">Events</a>
<ul>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/schedule.html">Schedule</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/masquerade.html">Masquerade</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/fanpanels.html">Fan Run Panels</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/videoprogramming.html">Video Programming</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/videogaming.html">Video Gaming</a></li>
</ul>
</li>

<li><a href="#">Contests</a>
<ul>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/raffles.html">Raffles</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/cosplay.html">Cosplay</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/fanart.html">FanArt</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/fanfiction.html">FanFiction</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/amv.html">AMV</a></li>
</ul>
</li>

<li><a href="#">Support</a>
<ul>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/sponsor.html">Sponsor JAMMCon</a></li>
<li><a href="http://www.redhorizonrising.com/JAMMCon08/donation.html">Donations</a></li>
</ul>
</li>

<li><a href="#">Community</a>
<ul>
<li><a href="http://groups.yahoo.com/group/JAMMClub/">JAMM Club eGroup</a></li>
</ul>
</li>

</ul>

</td>

<td valign="top">
<p>
Welcome page to be updated this weekend!
</p>
</td>
</tr>
</table>
<br><br>
<table width=800>
<tr>
<td align="center">

<p>
<img src="valid-html401-blue.png" alt="Valid HTML 4.01 Transitional">
<img src="valid-css1-blue.png" alt="valid CSS">
&copy 2007-08 Red Horizon Rising - All rights reserved.
</p>

</td>
</tr>
</table>
</body>
</html>

Any help you can give is much appreciated!

**LadynRed** · 11-06-2007, 01:57 PM

IE 6 and below does not support the hover pseudo class on anything except the <a> tag. In order to get around that you need some scripting -- do a search for "whatever hover", it's easy to implement.

**insomniac-pro** · 11-06-2007, 11:36 PM

Okay, so I've added this bit:



and the csshover.htc file

It seems to work, however, IE says there are errors on the page. I have to say I have no idea what I'm doing and I'm guessing at this point. It's far beyond what I know how to do. Is this right?

**LadynRed** · 11-07-2007, 02:45 PM

Put the behavior (and your other hacks) in an external CSS file and use a proper conditional comment to call the IE 'fixes' file.

Error on a page, sounds like a javascript error. Double-click the yellow warning icon and find out what IE is complaining about.

**insomniac-pro** · 11-07-2007, 09:51 PM

Thank you for all your help : )

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!