CSS and Firefox 1.0.3 Problem

[flistea]

I'm having a problem with css and firefox.

My page works fine with IE but all the settings come out wrong with firefox.

This is the css code

/*Navigation bar*/

#navigation {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
		}
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 4px;
	padding-bottom: 4px;
}
#navigation li {
	display: inline;
}
#navigation li a:link, #navigation li a:visited { 
   	padding: 3px 14px 3px 13px; 
	color: navy;
	background-color:white;
	text-decoration: none;
	}
#navigation li a:hover {
	color: white;
	background-color: navy;
}
/* End Navigation bar*/

/* second Navigation bar */
#secnavigation {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
		}
#secnavigation ul {
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
	padding-top: 4px;
	padding-bottom: 4px;
}
#secnavigation li a:link, #secnavigation li a:visited { 
   width: 190px;	
	padding: 6px ; 
	color: white;
	background-color:navy;
	text-decoration: none;
	}
#secnavigation li a:hover {
	color: navy;
	background-color: white;
}
/* End Second Navigation bar */

body {
background: navy;
}

/*text styles*/
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
padding: 3px;
color: navy;
}
.headline {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: navy;
padding: 3px;
}
.btmspacer {
	font-family: Verdana, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
		}
.btmspacer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 4px;
	padding-bottom: 4px;
}
.btmspacer li {
	display: inline;
}
.breadcrumb {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: navy;
padding: 3px;
}

/*End text styles*/

/* link styles*/
#textonly a:link, #textonly a:visited{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
  color: white;
  font-weight: bold;
  text-decoration: none;
}
#textonly a:hover{
text-decoration: underline;
}

#right a:link, #right a:visited{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: navy;
font-weight:bold;
text-decoration: none;
}
#right a:hover{
text-decoration: underline;
}

#btmtextnav a:link, #btmtextnav a:visited{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
  color: white;
  padding: 3px 15px 3px 17px;
  font-weight: bold;
  text-decoration: none;
}
#btmtextnav a:hover{
text-decoration: underline;
}
#breadcrumb a:link, #breadcrumb a:visited{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
  color: navy;
  padding: 3px 5px 3px 5px;
  font-weight: bold;
  text-decoration: none;
}
#breadcrumb a:hover{
text-decoration: underline;
}
/* End link styles*/

/*Layout*/

 #textonly {
 padding: 5px;
background: skyblue;
height: 10px;
width: 782px;
text-align: right;
margin: 1px;
}
#ppbanner {
  height: 100px;
  width: 785px;
}
#breadcrumb {
left: 5px;
width:785px;
height: 20px;
background: skyblue;
}
#left {
  position: absolute;
  left: 5px;
  top: 190px;
  width: 585px;
  height: 510px;
  border: 1px solid navy;
  background: white;
  padding: 15px;
}
#right {
  position: absolute;
  left: 595px;
  top: 190px;
  width: 200px;
  height: 510px;
  border: 1px solid navy;
  background: skyblue;
  padding: 3px;
}
#btmtextnav {
position: absolute;
left: 5px;
top: 710px;
width: 785px;
height: 20px;
background: skyblue;
}
#btmspacer {
position: absolute;
top: 750px;
height: 35px;
}
/* End Layout */

/*table*/
.datatable {
	border: 1px solid navy;
	border-collapse: collapse;
	width: 550px;
}
.datatable td {
	border: 1px solid white;
	background: navy;	
	}
.datatable th {
	border: 1px solid navy;
	background-color: white;
	font: bold 10px verdana, Arial, Helvetica, sans-serif;
	color: maroon;
	text-align: left;
	padding-left: 4px;
}
.datatable a:link, .datatable a:visited{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
  color: white;
   text-decoration: none;
}
.datatable a:hover{
text-decoration: underline;
}
/* End Table */

/*Form*/
input {
color: navy;
background-color: white;
border: 1px solid navy;
}
.form {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
padding: 3px 20px 3px 20px;
color: navy;
}
.input.btn{
color: navy;
background-color: silver;
border: 1px outset navy;
}
/* End Form */

and this is the html

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Toa Kohe Love signs for the Pirates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/newscss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="textonly">
<a href="#">Text only version</a></div>
<div id="ppbanner"> <img src="images/pirate.png" alt="Portsmouth Pirates homepage" border="0" usemap="#Map" /> 
  <map name="Map" id="Map">
    <area shape="rect" coords="6,2,784,96" href="Portsmouth%20Pirates%20homepage.htm" alt="Portsmouth Pirates homepage"/>
  </map>
</div>
<div id="navigation">
<ul>
    <li><a href="portsmouth%20pirates%20homepage.htm">HOME</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MATCH</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">FANZONE</a></li>
<li><a href="#">TICKETS</a></li>
<li><a href="#">SHOP</a></li>
<li><a href="#">THE CLUB</a></li>
<li><a href="portsmouth%20pirates%20atoz.htm">A - Z</a></li>
<li><a href="#">SEARCH</a></li>
</ul></div>
<div id="breadcrumb"> 
  <div class="breadcrumb">You are in: <a href="portsmouth%20pirates%20homepage.htm">Home 
    ></a> <a href="#">News ></a> Headlines</div>
</div>
<div id="left">
  <div class="headline">TOA KOHE-LOVE SIGNS</div>
  <p><img src="images/kohe-love.jpg" alt="Toa Kohe-Love" width="150" height="150" style="float: left; height: 80px; width: 80px; margin-right: 5px" /> 
    Toa Kohe-Love Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
    sollicitudin, tellus ut dignissim feugiat, erat sem lacinia leo, sit amet 
    scelerisque sem arcu ut dolor. Phasellus vitae odio. Nunc ipsum turpis, vulputate 
    vel, tempor at, consectetuer sed, tortor. Vestibulum quis diam quis urna vulputate 
    laoreet. Aenean commodo. Pellentesque in risus in turpis molestie commodo. 
    Curabitur erat sapien, pretium quis, dictum a, cursus non, ipsum. Donec eleifend 
    mauris semper arcu rutrum semper. In cursus tincidunt est. Donec ac dolor. 
    Donec turpis augue, gravida vel, nonummy in, fringilla ut, orci. </p>
<p>Nulla enim quam, cursus mattis, elementum quis, molestie eu, dolor. Quisque nisl leo, mollis in, sagittis euismod, 
venenatis ut, ligula. Pellentesque faucibus, ipsum vitae eleifend tincidunt, tortor urna fermentum dolor, venenatis 
pharetra lectus dolor nec elit. Morbi porttitor fermentum nulla. Donec lacinia, ante nec pharetra tempor, tortor libero 
pretium dui, nec gravida elit libero in tortor. Vivamus a est volutpat mauris porta posuere. Aliquam sodales tellus 
ac justo venenatis iaculis. Cras feugiat euismod nibh. Aenean pellentesque mauris non leo. In eget neque sed lectus blandit 
luctus. Vestibulum fringilla pretium dolor. Sed volutpat lacus. Pellentesque habitant morbi tristique senectus et netus 
et malesuada fames ac turpis egestas. Suspendisse diam. Sed dictum leo ac urna molestie pretium. Aliquam interdum viverra 
enim. Ut nunc tellus, commodo eu, ultricies vel, hendrerit commodo, felis. In hac habitasse platea dictumst.</p>
<table summary="Other Headlines" class="datatable">
<tr> <th> Other Headlines </th> </tr>
<tr> 
      <td> <a href="portsmouth%20pirates%20news%20smith.htm">01/05/05 : Smith on Super 
        Signing.</a> </td> 
</tr>
<tr>
<td> <a href="#">01/05/05 : Nam varius sapien non lacus.</a> </td>
</tr>
<tr>
<td> <a href="#">01/05/05 : Morbi eu quam. Donec imperdiet.</a> </td>
</tr>
</table>
  </div>
 <div id="right">  
 <div id="secnavigation">
 <ul>
 <li><a href="#">Headlines</a></li>
 <li><a href="#">Latest News</a></li>
 <li><a href="#">Interviews</a></li>
 <li><a href="#">What the Papers Say</a></li>
 <li><a href="#">Archive</a></li>
 </ul>
 </div>
 <div class="form"><form method="post" action="pirates test.htm">
 USERNAME: <br />
<input type="text" name="Username" id="Username" /> <br />
PASSWORD: <br />
<input type="password" name="Password" id="Password" /> <br />
<input type="submit" name="btnSubmit" id="btnSubmit" value="Go" class="btn" /><br />
<a href="#">Forgotten password?>></a> </form></div>
 </div> 

<div id="btmtextnav"> <a href="portsmouth%20pirates%20homepage.htm">Home</a> <a href="#">News</a> 
  <a href="#">Match</a> <a href="#">Team</a> <a href="#">Fanzone</a> <a href="#">Tickets</a> 
  <a href="#">Shop</a> <a href="#">The Club</a> <a href="portsmouth%20pirates%20atoz.htm">A 
  - Z</a> <a href="#">Search</a> </div>
<div id="btmspacer"> 
  <div class="btmspacer"> 
    <ul>
      <li><a href="[URL unfurl="true"]http://validator.w3.org/check?uri=referer"><img[/URL]
          src="[URL unfurl="true"]http://www.w3.org/Icons/valid-xhtml10"[/URL]
          alt="Valid XHTML 1.0!" height="31" width="88" /></a> </li>
      <li>Designed by CAM40785</li>
    </ul>
  </div>
</div>
</body>
</html>

Can anyone help?

 

[BabyJeffy]

Have you thought about installing the Developer toolbar with Firefox? It has a great feature that allows you to type/edit the CSS for a live page -- on the fly. You can tweak and fiddle all in real time. This might be just the tool you need to figure this one out (since it's a Firefox issue you are having). Just a suggestion.

Jeff

 

[BillyRayPreachersSon]

The only difference I notice is in the right-hand links, and that can be rectified (well, 99% rectified) by addint these two lines:

display: block;
margin-bottom: 2px;

to the CSS for:

#secnavigation li a:link, #secnavigation li a:visited

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[flistea]

Thanks Dan!

That's solved the secondary nav bar problem.

The only other problem to solve now is why the settings for the left box don't seem to be working:

#left {
  position: absolute;
  left: 5px;
  top: 190px;
  width: 585px;
  height: 510px;
  border: 1px solid navy;
  background: white;
  padding: 15px;
}