Hello,
I'm trying to make CSS-based roll-over images for navigation, but I get
a 1px difference between Firefox and IE. Because of the nature of the
graphic - a horizontal line - it is quite noticeable.
example here:
http://quagma.net/testing/lakeside/contact.html
(at the moment the #panels {margin: -86px etc...} controls the height.
see style sheet for more info)
Anyone have any suggestions?
Regards,
Cameron.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en-AU">
<head>
<title>Lakeside Motor Inn - Contact</title>
<link rel="stylesheet" href="default.css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Contact" />
<meta name="description" content="Contact details for Lakeside Motor
Inn" />
</head>
<body>
<div id="container">
<p><a href="#" title="home"><img src="images/logo.png" alt="Lakeside
logo" /></a></p>
<ul id="panels">
<li id="panel1b"><a href="contact.hml" title="contact">contact</a></li>
<li id="panel2b"><a href="rooms.hml" title="rooms">rooms</a></li>
<li id="panel3b"><a href="facilities.hml"
title="facilities">facilities</a></li>
<li id="panel4b"><a href="tariffs.hml" title="tariffs">tariffs</a></li>
<li id="panel5b"><a href="restaurant.hml"
title="restaurant">restaurant</a></li>
<li id="panel6b"><a href="attractions.hml"
title="attractions">attractions</a></li>
</ul>
<div id="maincontent">
<h1 id="contacthead">Contact Us</h1>
<p>tjrlkg lkg</p>
<!-- End mainconent div //-->
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------
the css:
img {
border: 0;
}
#header p {
margin: 0;
padding: 0;
}
a:link {
color: #0066CC;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #CC3366;
font-weight: bold;
text-decoration: none;
}
a:visited {
font-weight: bold;
color: #CC99CC;
text-decoration: none;
}
a:active {
font-weight: bold;
color: #FF3366;
text-decoration: none;
}
/* thanks to A List Apart */
#panels {
width: 500px;
height: 65px;
background: url(images/nav_off.png);
margin: -86px 2px 10px 137px;
padding: 0;
position: relative;
text-indent: -9000px;
}
#panels li {margin: 0; padding: 0; list-style: none; position: absolute;
top: 0;}
#panels li, #panels a {text-decoration: none; height: 65px; display: block;}
#panel1b {left: 0; width: 83px;}
#panel2b {left: 83px; width: 84px;}
#panel3b {left: 167px; width: 84px;}
#panel4b {left: 251px; width: 83px;}
#panel5b {left: 334px; width: 84px;}
#panel6b {left: 418px; width: 83px;}
#panel1b a:hover {background: transparent url(images/nav_on.png) 0
no-repeat;}
#panel2b a:hover {background: transparent url(images/nav_on.png) -83px
no-repeat;}
#panel3b a:hover {background: transparent url(images/nav_on.png) -167px
no-repeat;}
#panel4b a:hover {background: transparent url(images/nav_on.png) -251px
no-repeat;}
#panel5b a:hover {background: transparent url(images/nav_on.png) -334px
no-repeat;}
#panel6b a:hover {background: transparent url(images/nav_on.png) -418px
no-repeat;}
#container {
width: 639px;
background: ;
margin: auto;
}
#maincontent {
padding: 0 0 0 12px;
}
#contacthead {
background: url(images/contact_head.png) no-repeat;
padding: 1em 0 0 0;
text-indent: -9000px;
}
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
