4 replies [Last post]
twelveofone
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-09-16
Posts: 2
Points: 0

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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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

twelveofone
Offline
newbie
Last seen: 15 years 44 weeks ago
Joined: 2003-09-16
Posts: 2
Points: 0

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!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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

Renu Bora
Offline
newbie
Los Angeles
Last seen: 15 years 43 weeks ago
Los Angeles
Joined: 2003-09-24
Posts: 1
Points: 0

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