Forum Moderators: not2easy
Here's what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>top nav links</title>
<style type="text/css">
body{
background-color:#fff;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0 5px 0 5px;
padding:0;
text-align:left;}#menu{background-color:#000;}
#menu ul{
list-style-type:none;
height:18px;
margin:0;
overflow:hidden;
padding:0;
white-space:nowrap;}#menu ul li{
display:inline;
height:18px;
margin:0;
overflow:hidden;
padding:0;}#menu ul li a{
background:#000 url('navspace.jpg') right no-repeat;
color:#fff;
display:block;
float:right;
height:18px;
margin:0;
overflow:hidden;
padding:0 18px 0 0;
text-align:right;
text-decoration:none;}#menu ul li a:hover{color:#ff0;}
</style>
</head>
<body>
<div id="menu"><ul>
<li><a href="contact.asp"> Contact us</a></li>
<li><a href="account.asp"> Account </a></li>
<li><a href="subscribe.asp"> Subscribe </a></li>
<li><a href="faq.asp"> FAQ </a></li>
<li><a href="terms.asp"> Terms </a></li>
<li><a href="why.asp"> Why BuildingBoom? </a></li>
<li><a href="bbsearch.asp"> Search </a></li>
<li><a href="home.asp">Home </a></li>
</ul></div>
</body>
There's a few things wrong with this, but I'm not sure how to fix it.
In Firefox, the text gets pushed up a little bit when you resize the text, and sometimes when the page loads.
In IE 6, the links flicker sometimes when I hover over them with my mouse.
In IE 5.0 and 5.5 the whole thing is a complete mess.
In Netscape 7.1 it works perfectly.
Anyone know how to do this in a more browser-friendly way?
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
[edited by: SuzyUK at 3:29 pm (utc) on Dec. 30, 2004]
couple of questions about the same thing lately so I tried answering them in this thread [webmasterworld.com] - see if it helps some of your issues and if not then ask again.
Suzy