Parts of menu randomly disappear in Firefox [Archive]

rg22

06-30-2008, 05:00 PM

Hi,

I'm new to web design and have been working on the design of this page for a few days but am having trouble with the horizontal menu. It works fine but in Firefox if you reclick the 'Home' link several times, about half the time the last two links in the menu disappear, and sometimes just the last link disappears. I'm not sure what's causing this to happen, as it normally (possibly all the time) loads fine when you load the page for the first time, it's just when you reclick it. Also, this doesn't happen in IE.

Here's the page:

http://rgtest.awardspace.com/

I'd guess the problem lies somewhere in the code I've written for the 'ACROSS MENU' part of the CSS or html.

If there's any other errors you spot let me know

Thanks

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org">
<meta name="keywords" content="rgtest">

<meta name="description" content="rgtest">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="shortcut icon" href="http://rgtest.awardspace.com/favicon.ico">
<link rel="stylesheet" type="text/css" href="http://rgtest.awardspace.com/ri22ard.css">

<title>rgtest : Home</title>

</head>

<body>

<div id="body">



<div id="ri22ard">
<img src="http://rgtest.awardspace.com/topcornerleft.png"><img src="http://rgtest.awardspace.com/ri22ard.png">
</div>



<div id="navbar">
<ul class="navbar">
<li></li>
<li><a href="index.php" class="navlink"
onmouseover="document.index.src='http://rgtest.awardspace.com/herminered.png'"
onmouseout="document.index.src='http://rgtest.awardspace.com/hermine.png'">
<img src="http://rgtest.awardspace.com/hermine.png" name="index" id="hermine">
Home</a></li>

<li><a href="index.php"
onmouseover="document.muco.src='http://rgtest.awardspace.com/herminered.png'"
onmouseout="document.muco.src='http://rgtest.awardspace.com/hermine.png'">
<img src="http://rgtest.awardspace.com/hermine.png" name="muco" id="hermine">
BBBBBBB</a></li>
<li><a href="index.php"
onmouseover="document.c.src='http://rgtest.awardspace.com/herminered.png'"
onmouseout="document.c.src='http://rgtest.awardspace.com/hermine.png'">
<img src="http://rgtest.awardspace.com/hermine.png" name="c" id="hermine">
CCCCCCCCC</a></li>
<li><a href="index.php"
onmouseover="document.d.src='http://rgtest.awardspace.com/herminered.png'"
onmouseout="document.d.src='http://rgtest.awardspace.com/hermine.png'">
<img src="http://rgtest.awardspace.com/hermine.png" name="d" id="hermine">

DDDDDDD</a></li>
</ul>
</div>



<div id="maincontent">
<div id="maintext">
<h1>rgtest : Home</h1>

<p>Test page</p>
</div>
</div>



<div id="bottomcurve">
<img src="http://rgtest.awardspace.com/bottomcurve.png">
</div>



</div>



<div id="language">

<img class="langtop" src="http://rgtest.awardspace.com/langtop.png">

<ul class="lang">

<li><a href="http://rgtest.awardspace.com/en/"><img class="langflag" src="http://rgtest.awardspace.com/english.png"></a>
<li><a href="http://rgtest.awardspace.com/fr/"><img class="langflag" src="http://rgtest.awardspace.com/francais.png"></a>
<li><a href="http://rgtest.awardspace.com/es/"><img class="langflag" src="http://rgtest.awardspace.com/espanol.png"></a>
<li><a href="http://rgtest.awardspace.com/pt/"><img class="langflag" src="http://rgtest.awardspace.com/portugues.png"></a>
</ul>

<img class="langbottom" src="http://rgtest.awardspace.com/langbottom.png">

</div>

</body>

</html>

CSS Style sheet:

body {
position: absolute;
top: 20px;
left: 30px;
padding-left: 0px;
font-family: 'trebuchet ms', sans-serif;
font-size: 16px;
color: #223311;
background-color: #aa0000;
}

#body {
width: 720px;
float:left;
}

/* ******************************** */

/* ***** RI22ARD ***** */

#ri22ard {
background: #ffffff;
margin: 0px;
border: 0px;
width: 720px;
height: 176px;
text-align: left;
padding: 0px;
float: left;
}

/* ***** ACROSS MENU ***** */

#navbar {
background: #44bb22;
margin: 0px;
border: 0px;
width: 720px;
height: 80px;
text-align: left;
padding: 0px;
float: left;
white-space: nowrap;
}

#navbar li {
display: inline;
}

ul.navbar {
list-style-type: none;
border-top: 10px solid #44bb22;
padding: 0px;
margin: 0px;
top: 0px;
display: table;
width: 100%;
line-height: 60px;
}

ul.navbar li {
background: #44bb22;
margin: 0px 0;
padding: 0px;
border-left: 30px solid #44bb22;
}

#navbar a {
color: #111111;
text-decoration: none;
font-size: 20px;
}

#navbar a:link {
color: #111111;
text-decoration: none;
font-size: 20px;
}

#navbar a:hover {
color: #ffffff;
text-decoration: none;
font-size: 20px;
}

#hermine {
vertical-align: middle;
padding: 0px;
}

/* ***** MAIN CONTENT ***** */

#maincontent {
background: #44bb22;
margin: 0px;
border: 0px;
width: 720px;
text-align: left;
padding: 0px;
float: left;
}

#maintext {
background: #66dd55;
margin-left: 20px;
margin-top: 0px;
border: 0px;
width: 670px;
height:auto;
text-align: left;
padding: 5px;
float: left;
display: block;
}

h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
margin: 0px;
}

tomws

06-30-2008, 08:06 PM

I'm unable to reproduce your problem.

You may want to ditch the http calls for your local images. Use absolute or relative pathnames instead. There's no need to make an http request to your own server to fetch an image that is within your site root.

rzea

06-30-2008, 09:29 PM

I couldn't reproduce your problem either.

However, I see Javascript code that you can clearly stop using and instead accomplish the same effect with a couple of simple CSS declarations. This might solve your Firefox problem.

This is the code you don't need:
onmouseover="document.index.src='http://rgtest.awardspace.com/herminered.png'"
onmouseout="document.index.src='http://rgtest.awardspace.com/hermine.png'"

You can accomplish that with this basic CSS structure (you might need to adapt this better to your needs):

CSS:
#navbar ul li a {
background:url(images/hermine.png) no-repeat center left;
}

#navbar ul li a:hover {
background:url(images/herminered.png) no-repeat center left;
}

HTML:
<div id="navbar">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

Here's a website that'll show you how to create menus using simple lists (one of the best websites for CSS and lists there is): http://css.maxdesign.com.au/index.htm

rg22

06-30-2008, 09:45 PM

Thanks for the replies. I've fixed the problem now; it was definitely there on my browser (maybe I should have mentioned it was Firefox 3 specifically...) but it no longer happens now.

I think it was caused by the fact that I had 'display: table' in the CSS sheet, and I also tidied up the menu part of the CSS so that I just have the div id and no classes.

And thanks, rzea; I was wondering if there was another way of doing that. I'll go and have a fiddle with that now.

rzea

06-30-2008, 10:39 PM

Yes, it's important to specify which browsers you are testing in. And well, we didn't ask either :p

Anyway, glad to hear you fixed it. Yes, try the above code for your links, let me know if you have any other questions.

Bytes,