Tue, 2003-09-16 04:47
I have made this nice rollover style image link that works great in IE6 but does not display correctly in NN7.1. In NN the background box behind the image link does not size correctly. It is difficult to explain but it can be reproduced easily with the code below, or you can try it online here: http://twelve.onza.net/boxtest
I would love it if someone could show me how this could be made to work in NN as it does in IE. Thanks alot!
<html>
<head>
<style>
A:link, A:visited {background-color:white;
margin-top:5px;
margin-bottom:5px;
padding:2px;
color:black;
}
A:hover {background-color:black;}
</style>
</head>
<body bgcolor=green>
<a href="home.html" target=main><img src="http://twelve.onza.net/boxtest/b_home.jpg" alt="home" border="0" align=top></a>
</body>
</html>
Tue, 2003-09-16 09:35
#1
Netscape vs. IE problem- help!
Hi twelveofone,
Here's one way to fix it, change your padding to:padding:0 2px 12px 2px;
Hope that helps
Thu, 2003-09-18 03:41
#2
ah yes, but...
Thanks Tony for your response. It does indeed fix the problem when
viewing from NN, but then it throws the IE box out of whack. I'm looking
for a solution that works in both browsers with the same code. Any other
ideas?? I'm at a complete loss!
Thanks!
Thu, 2003-09-18 05:15
#3
compatMode
Hi twelveofone,
If you give the page a standard compatable doctype ie and netscape should render the link the same.
To check if a page is in Quirk mode (BackCompat) of Standard mode (CSS1 Compat) type this into your address barjavascript:alert(document.compatMode);
Hope that helps
Wed, 2003-09-24 12:05
#4
Netscape vs. IE problem- help!
Hi- I had the exact same problem, but with two different background images, rather than background colors. I managed to get it working by adding "display: block;" to the a: and a:hover styles.
Try this, then:
<html>
<head>
<style>
A:link, A:visited {background-color:white;
display: block;
margin-top:5px;
margin-bottom:5px;
padding:2px;
color:black;
}
A:hover {background-color:black; display: block;}
</style>
</head>
<body bgcolor=green>
<a href="home.html" target=main><img src="http://twelve.onza.net/boxtest/b_home.jpg" alt="home" border="0" align=top></a>
</body>
</html>
It will then need just a little tweaking for the right margin, but that's relatively easy.
The "display: block;" tells the browser to treat the content as a "block" rather than "inline"-- inline is more text-like rather than layout-like in a sense, and creates varying browser behavior. Blocks are easier to control than inline content bits.
Good luck!
Renu