footer displays menu, but not as links - in Firefox only

Posted: Wed Sep 10, 2008 6:18 pm

Can anyone explain why this shows my menu as links - in IE and Opera, but not in Firefox?

Code:




#footer{


   width:699px;


   height:70px;


   display:block;


   margin-left:auto;


   margin-right:auto;


   background:url(images/footer_bg_grey5.jpg);


   color:#fff;   


}


#footer ul{


   width:587px;


   position:relative;


   left:11px;


   top:8px;


}


#footer ul li{


   float:left;


   color:#000;


   background-color:inherit;


   font:normal 11px/19px Arial, Helvetica, sans-serif;


}


#footer ul li a{


   color:#000;


   background-color:inherit;


   font:normal 11px/19px Arial, Helvetica, sans-serif;


   padding:0 7px;


   text-decoration:none;


}


#footer ul li a:hover{


   color:#6A920A;


   background-color:#fff;


}


#footer p.copyright{


   font:normal 11px/19px Arial, Helvetica, sans-serif;


   color:#000;


   background-color:none;


   position:relative;


   left:19px;


   top:5px;


}


#footer p.copyright a{


   color:#000; 


   background-color:none; 


   text-decoration:none;


   }


#footer p.copyright a:hover{


   color:#000; 


   background-color:none;


   }


#footer p.design{


   font:bold 12px/19px Arial, Helvetica, sans-serif;


   color:#000;


   background-color:inherit;


   position:relative;


   left:19px;


   top:7px;


}


#footer p.design a{


   color:#000;


   background-color:inherit;


   text-decoration:none;


   }


#footer p.design a:hover{


   color:#6A920A;


   background-color:inherit;


   }

Here is the HTML:

Code:

<html>


<head>


<link href="style_css.css" rel="stylesheet" type="text/css" />


</head>


<body>


<center>


<!--footer start -->





<div id="footer">


<ul>


   <li><a href="#">Home</a>&nbsp;</li>


   <li><a href="#">Menu1</a>&nbsp;</li>


   <li><a href="#">Menu2</a>&nbsp;</li>


   <li><a href="#">Menu3</a>&nbsp;</li>


   <li><a href="#">Menu4</a>&nbsp;</li>


   <li><a href="#">Menu5</a>&nbsp;</li>


   <li><a href="#" target="_blank">Menu6</a>&nbsp;</li>


   <li><a href="#">Menu7</a>&nbsp;</li>


   <li><a href="#">Menu8</a>&nbsp;</li>


   <li><a href="#">Menu9</a></li>


  </ul>


   <p class="design">&copy;&nbsp;2006-2008&nbsp;<a href="http://mycsstest.com">MyCssFooter.</a>&nbsp;All rights reserved.</p>


  <p class="copyright">CSS Design : <a href="http://mycsstest.com">MyCSSCopyright</a></p>


   


   </div>


<!--footer end -->


</center>


</body>


</html>

You can test it Only registered users can see links on this board! Get registered or login!

Note: If I do not use the stylesheet, all links show in Firefox.

Posted: Thu Sep 11, 2008 3:21 am

Those floats are probably messing around with those relative elements, one overlapping the other.

Try:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>


<head>


<style type="text/css">


<!--


#footer{


   width:699px;


   height:70px;


   text-align: center;


   margin:0 auto;


   background:url(images/footer_bg_grey5.jpg);


   color:#fff;


}


#footer ul{


   margin: 0px;


   padding: 0px;


}


#footer ul li{


   display: inline;


   color:#000;


   background-color:inherit;


   font:normal 11px/19px Arial, Helvetica, sans-serif;


}


#footer ul li a{


   color:#000;


   background-color:inherit;


   font:normal 11px/19px Arial, Helvetica, sans-serif;


   padding:0 7px;


   text-decoration:none;


}


#footer ul li a:hover{


   color:#6A920A;


   background-color:#fff;


}


#footer p.copyright{


   font:normal 11px/19px Arial, Helvetica, sans-serif;


   color:#000;


   background-color:none;


}


#footer p.copyright a{


   color:#000;


   background-color:none;


   text-decoration:none;


   }


#footer p.copyright a:hover{


   color:#000;


   background-color:none;


   }


#footer p.design{


   font:bold 12px/19px Arial, Helvetica, sans-serif;


   color:#000;


   background-color:inherit;


}


#footer p.design a{


   color:#000;


   background-color:inherit;


   text-decoration:none;


   }


#footer p.design a:hover{


   color:#6A920A;


   background-color:inherit;


   }


-->


</style>


</head>


<body>


<!--footer start -->





<div id="footer">


<ul>


   <li><a href="#">Home</a>&nbsp;</li>


   <li><a href="#">Menu1</a>&nbsp;</li>


   <li><a href="#">Menu2</a>&nbsp;</li>


   <li><a href="#">Menu3</a>&nbsp;</li>


   <li><a href="#">Menu4</a>&nbsp;</li>


   <li><a href="#">Menu5</a>&nbsp;</li>


   <li><a href="#" target="_blank">Menu6</a>&nbsp;</li>


   <li><a href="#">Menu7</a>&nbsp;</li>


   <li><a href="#">Menu8</a>&nbsp;</li>


   <li><a href="#">Menu9</a></li>


  </ul>


   <p class="design">&copy;&nbsp;2006-2008&nbsp;<a href="http://mycsstest.com">MyCssFooter.</a>&nbsp;All rights reserved.</p>


  <p class="copyright">CSS Design : <a href="http://mycsstest.com">MyCSSCopyright</a></p>


   


   </div>


<!--footer end -->


</body>


</html>

Use a 'display:inline' instead of a float, and ditch all the 'relative' crap.

And Note:
I removed those <center> tags in your html, and instead added a 'text-align: center' + doctype for (crappy) IE6.

Posted: Sat Sep 13, 2008 11:33 pm

warren-the-ape, Thanks, your suggestions worked. I totally forgot about 'text-align' for some reason. Float was messing up my footer, when I used 'display:inline' instead it worked. However, for some reason, display inline is not working for my main menu, but float does. I have not figured that one out yet.

Thanks for your help.

Posted: Mon Sep 15, 2008 2:05 am

np

The 'text-align: center' is only necessary for the older (IE6) browsers to make the center alignment work. The more recent browsers work fine with a 'margin: 0 auto'.

Not sure why it won't work with your main menu, perhaps you could post some relevant code (html/css)?