Forum Moderators: not2easy
I've been using CSS for a few months and can usually fix any errors, but this has me baffled. If anyone could explain what these errors mean, that would be great. I followed some good CSS code examples, as this was rather complex. There are a few lines of CSS code that won't validate:
* Line: 45 Context : #logoban
Parse Error - (images/banner1.gif) no-repeat;
* Line: 50
Parse Error - : 600px; height: 50px; } a#logoban:hover
* Line: 51
Parse error - Unrecognized : (images/banner2.gif) no-repeat;
* Line: 52
Parse error - Unrecognized : }
It might be kind of hard to pinpoint exactly what is is, but basically I have a logo that when hovered on, will switch to a brighter version of the same logo. It also doubles up as a link back to the index page.
Here's part of the code:
<div id="newmenu"><div id="bannerlogoban"><a id="logoban" href="index.html">
/* Image-free logo banner with rollover */
#bannerlogoban {
background: url(images/banner2.gif) no-repeat;
}
#logoban {
background: url(images/banner1.gif) no-repeat;
}
a#logoban:hover {
background: url(images/banner2.gif) no-repeat;
}
(margins, padding, etc omitted). Is it just me, or am I missing something? No matter what I try, the hover effect on the logo just won't work.
<head>
<style>
#logoban {
background-image: url(abc.jpg); width: Xpx; height: Ypx;
}
#logoban a {
display: block; width: Xpx; height: Ypx; text-decoration: none;
}
#logoban a:hover {
display: block; background-image: url(acb.jpg);
}
</style>
</head>
</body>
<div id="logoban">
<a href="">
</a>
</div>
</body>
Depending upon the situation, you might consider preloading the hovered image in the head. It might not look too good if it pops into place several seconds after the hover.
<object type="image/jpeg" data="acb.jpg"></object>
<edit>Not leaving well enough alone:)</edit>
#logoban a {
display: block; width: 300px; height: 400px; background-image: url(abc.jpg);
}
IE seems a bit quirky otherwise.
