Forum Moderators: not2easy
I'm (very) new to CSS and have come up with a rollover code that works well in IE but fails miserably in Mozilla. Can anyone help me sort this out? The images are table-based (one image per cell).
Thanks.
Andy
Here's the CSS code (probably way too long, as well as primitive - sorry!). (The HTML is below)
<style type="text/css">
<!--
.outer {
height: 39px;
width: 148px;
background-image: url(images/b-topicsovr.png);
}
.outer {display:block; position: inherit; background-repeat:no-repeat}
.outer img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer a:hover{visibility:visible}
.outer a:hover img {visibility:hidden}
.outer1 {
height: 39px;
width: 148px;
background-image: url(images/b-aboutovr.png);
}
.outer1 {display:block; position: inherit; background-repeat:no-repeat}
.outer1 img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer1 a:hover{visibility:visible}
.outer1 a:hover img {visibility:hidden}
.outer2 {
height: 39px;
width: 148px;
background-image: url(images/b-peopleovr.png);
}
.outer2 {display:block; position: inherit; background-repeat:no-repeat}
.outer2 img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer2 a:hover{visibility:visible}
.outer2 a:hover img {visibility:hidden}
.outer3 {
height: 39px;
width: 148px;
background-image: url(images/b-faqsovr.png);
}
.outer3 {display:block; position: inherit; background-repeat:no-repeat}
.outer3 img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer3 a:hover{visibility:visible}
.outer3 a:hover img {visibility:hidden}
.outer4 {
height: 39px;
width: 148px;
background-image: url(images/b-flovr.png);
}
.outer4 {display:block; position: inherit; background-repeat:no-repeat}
.outer4 img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer4 a:hover{visibility:visible}
.outer4 a:hover img {visibility:hidden}
}
.outer5 {
height: 39px;
width: 148px;
background-image: url(images/b-latestovr.png);
}
.outer5 {display:block; position: inherit; background-repeat:no-repeat}
.outer5 img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer5 a:hover{visibility:visible}
.outer5 a:hover img {visibility:hidden}
.outer6 {
height: 39px;
width: 148px;
background-image: url(images/b-linksovr.png);
}
.outer6 {display:block; position: inherit; background-repeat:no-repeat}
.outer6 img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer6 a:hover{visibility:visible}
.outer6 a:hover img {visibility:hidden}
.outer7 {
height: 39px;
width: 148px;
background-image: url(images/b-contactovr.png);
}
.outer7 {display:block; position: inherit; background-repeat:no-repeat}
.outer7 img {width: 100%; height: 100%; border: 0; }
html>body .outer img{display:block; position: inherit}
.outer7 a:hover{visibility:visible}
.outer7 a:hover img {visibility:hidden}
-->
</style>
<tr valign="top">
<td colspan="2" height="61" width="603">
<div style="BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0.3ex"><table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" bordercolor="#ffffff" cellspacing="0">
<tbody>
<tr valign="top">
<td height="41"><font size="2">
<div class="outer1"><a href="/about"><img height="39" src="images\b-about.png" width="148"></div>
</font>
</td>
ETC...
Did you validate your code (html and css)?
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>Did you validate your code (html and css)?
I don't think I validated it... Will that help?
Andy
} /*<-----here*/
and that the html needs to be corrected in order to be correctly parsed
Result: Passed validation
File: upload://Form Submission
Encoding: utf-8
Doctype: HTML 4.0 Transitional
It works in Mozilla now but there's still something funny going on - the buttons change on rollover but only if I hover over their bottom part. If I move the cursor towards the top of any given button, the changed image is unstable (flickering). Any ideas about this?
Andy
FF is stricter than IE, so an error that IE corrects for your, FF won't, hence the difference in rendering.
In your case (as DanA mentions), you have an extra } in your css. The validator would have warned you about it. IE ignores it, Mozilla doesn't.
The same thing for your html.
Validating can save you a lot of headaches.
