Hello, I was wandering if you could help. I’m quite new to css but I’m picking it up quite quickly. I have a website and it works fine in Internet Explorer but not that fine in Mozilla Firefox. For some reason, there is a background image that isn’t showing. This is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Washingwell School Website</title>
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Main holder of the website -->
<div id="holder">
<!-- This is the header with a background image - Don't put anything in me -->
<div id="header"></div>
<!-- This holds the left and right columns -->
<div id="mainHolder">
<!-- This is the left column, it has the main text in and the logo -->
<div id="leftcolumn">
<h1>WELCOME</h1>
<p>Welcome ... The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...</p>
<h1>MISSION STATEMENT </h1>
<p> The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ..</p>
<h1>HEADMASTERS INTRODUCTION </h1>
<p> The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ..</p>
<h1>ENDORSEMENTS </h1>
<p> The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ..</p>
<h1>ACHIEVMENTS</h1>
<p> Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ....</p>
<h1>LATEST NEWS</h1>
<p> Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ...The new Washingwell website was designed by First 11, a company situated in Gateshead at the international Business Centre. The internet is down ....</p>
</div>
<!-- This is the right column, it holds the navigation and a repeating 1 pixel image -->
<div id="rightcolumn"><div class="menu">
<ul>
<li><a class="hide" href="">Home</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">Home
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="file://///sbs2003/testsite/washingwell/index.html">Documents</a>
<!--[if lte IE 6]>
<a href="index.html">Documents
<table><tr><td>
<![endif]-->
<ul>
<li><a href="file://///sbs2003/testsite/washingwell/spies.html" title="a coded list of spies">OFSTED Report</a></li>
<li><a href="file://///sbs2003/testsite/washingwell/spies.html" title="a coded list of spies">Annual M of G</a></li>
<li><a href="#">Prospectus</a></li>
<li><a href="#">PTA Meeting</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="file://///sbs2003/testsite/layouts/index.html">Gallery</a>
<!--[if lte IE 6]>
<a href="../layouts/index.html">Gallery
<table><tr><td>
<![endif]-->
<ul>
<li><a href="file://///sbs2003/testsite/layouts/bodyfix.html" title="Samples of Children's Artwork">Children's Artwork</a></li>
<li><a href="file://///sbs2003/testsite/layouts/body2.html" title="A Gallery of teacher's pictures">Teacher's Pics</a></li>
<li><a href="file://///sbs2003/testsite/layouts/body4.html" title="Pictures of the class">Class Pics</a></li>
<li><a href="file://///sbs2003/testsite/layouts/body5.html" title="Pictures of the latest sporting events">Sporting Pics</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="file://///sbs2003/testsite/boxes/index.html">Newsletters</a>
<!--[if lte IE 6]>
<a href="../boxes/index.html">Newsletters
<table><tr><td>
<![endif]-->
<ul>
<li><a href="file://///sbs2003/testsite/washingwell/spies.html" title="a coded list of spies">Latest Newsletter</a></li>
<li><a href="file://///sbs2003/testsite/washingwell/vertical.html" title="a horizontal vertical menu">Archive</a></li>
<li><a href="file://///sbs2003/testsite/washingwell/expand.html" title="an enlarging unordered list">Email Me</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="file://///sbs2003/testsite/mozilla/index.html">Calender</a>
<!--[if lte IE 6]>
<a href="../mozilla/index.html">Calender
<table><tr><td>
<![endif]--> <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="file://///sbs2003/testsite/ie/index.html">Contact Us</a>
<!--[if lte IE 6]>
<a href="../ie/index.html">Contact Us
<table><tr><td>
<![endif]--><!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="file://///sbs2003/testsite/opacity/index.html">Links</a>
<!--[if lte IE 6]>
<a href="../opacity/index.html">Links
<table><tr><td>
<![endif]--><!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
<img src="images/pen.jpg"" alt="Pen lying with lid off"/>
</div>
<!-- Main holder of the website END --></div>
<div id="footer">
<p>© 2007 Washingwell School // All Rights Reseved // Designed by First 11</p>
</div>
</div>
</body>
</html>
And this is the css:
/* CSS Document for Washingwell School*/
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#996600;
font-size:10px;
background:#88652b;
}
/* This is NAV */
#mainNav{
padding:0;
margin:0;
text-align:right;
font-size:12px;
width:186px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#mainNav a{
display:block;
color:#996600;
background:url(../images/nav_bg.gif) right no-repeat;
text-decoration:none;
padding:7px 75px 7px 0;
margin:0;
}
#mainNav a:hover{
background:url(../images/nav_rollover.gif) right no-repeat;
color:#996600;
text-decoration:none;
padding:7px 75px 7px 0;
margin:0;
}
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative top; margin:0; font-size:11px; margin:0;}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#654a1d;
width:128px;
voice-family:"\"}\"";
voice-family:inherit;
width:118px;
height:25px;
text-align:right;
border:1px solid #fff;
border-width:1px 1px 0 0;
padding-right:10px;
background:#ebe4d0;
line-height:19px;
font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#654a1d; background:#ebe4d0;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}
.menu ul li:hover ul li a.hide {background:#ebe4d0; color:#654a1d;}
.menu ul li:hover ul li:hover a.hide {width:100px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#fff;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
table {border-collapse:collapse; border:0; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:129px; width:80px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:100px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#654a1d;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}
#leftcolumn h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#663300;
padding:5px;
letter-spacing:5px;
text-align:left;
width:500px;
background-image:url(../images/header_bg.gif);
border-left:1px solid #CCCC99;
border-bottom:1px solid #996600;
border-right:1px solid #996600;
border-top:1px solid #CCCC99;
}
#docnav a{
display:block;
color:#996600;
background:url(..images/nav_bg_docs.gif) right no-repeat;
text-decoration:none;
padding:6px 55px 6px 0;
margin:0;
}
#docnav a:hover{
background:url(..images/nav_rollover.gif) right no-repeat;
color:#996600;
text-decoration:none;
padding:6px 55px 6px 0;
margin:0;
}
#holder{
width:868px;
margin:auto;
padding-top:40px;
padding-bottom:0px;
}
#header{
width:868px;
height:33px;
background:url(../images/header.jpg) no-repeat;
}
#mainHolder{
background:url(../images/hackline.gif);
width:868px;
margin:0;
padding:0;
}
#galleryhome img{
border-left:2px solid #CCCC99;
border-bottom:2px solid #996600;
border-right:2px solid #996600;
border-top:2px solid #CCCC99;
margin-bottom:10px;
margin-right:6px;
}
#leftcolumn{
margin:0;
float:left;
padding:170px 102px 30px 50px;
width:682px;
voice-family:"\"}\"";
voice-family:inherit;
width:530px;
background:url(../images/bg_girl_white_lines.jpg) top left no-repeat;
}
#rightcolumn{
background:url(../images/right_column_1_pixel.gif);
margin:0;
float:right;
width:186px;
}
#footer{
clear:both;
float:none;
height:70px;
vertical-align:top;
background:url(../images/footer.gif) no-repeat;
text-align:right;
margin:0px;
padding: 10px 70px 0 0;
width:868px;
voice-family:"\"}\"";
voice-family:inherit;
width:798px;
}
The right hand column is not displaying “images/right_column_1_pixel.gif” in firefox.
Any idea why?
Any help would be appreciated.
Stefan
