Jump to content

Background Stopping 3/4 of the way down in Firefox


AKalair

Recommended Posts

Hi,

I'm using CSS to colour the background of a DIV and in Firefox the background colour stops 3/4 of the way down the section. Its fine in IE though can anyone point me in the right direction for fixing this?

 

CSS

 


/* CSS Document */

<style type="text/css">

a:link {
color: #FF0000;
font-family: "Times New Roman";
}
a:visited {
color: #FF0000;
font-family:"Times New Roman";
}

.Headings {
font-family: "Times New Roman";
font-size: 14pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;
}

.StandardText{
font-family: "Times New Roman";
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;
}

.SmallPrint{
font-family: "Times New Roman";
font-size: 8pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;
}

.TrophyLetters{
font-family: "Times New Roman";
font-size: 18pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;
}

.TrophyTableHeadings{
font-family: "Times New Roman";
font-size: 13pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;
}
.TrophyTableLetters{
font-family: "Times New Roman";
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;
}


.FrontPage{
font-family: "Impact";
font-size: 24pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;
}

.SideBar{
font-family: "Times New Roman";
font-size: 16pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color:#000000;

}


#navigation {
  background: #AAB5FF; 
  position: absolute; 
  top: 0%; /* 1px */
  left: 0%; /* 1px */
  width: 12%; /* 168px */
  height: 100%; /* 1300px */
  clear: both;
}

#content {
  /*background: #BBC4FF;*/
  position: absolute;
  top: 18%;
  left: 12%; /* 168px */
  width: 100%; /* 800px*/
  height: 100%; /* 1000px */
}

#banner {
position: absolute;
left: 12%; /*170px*/
width: 100%; /*726px*/
height: 17%; /*113px*/
top: 1%; /*1px*/
}

 

 

Its in the navigation DIV

 

HTML

 


<html>
<head>
<title>Playstation Online</title>
<link rel="stylesheet" type="text/css" href="css.css" />
        <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6560228-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<body>
<div id="banner"><img src="Images/newbannerPSO.jpg" alt="Banner" width="100%" height="100%"></div>
<div id="navigation">
<p align="center" class="SideBar"><img src="Images/psnlogotrans2.png" alt="l" width="116" height="93" /></p>
<p class="SideBar"><a href="index.html" target="_parent">Home</a></p>
<p align="center" class="SideBar">Reviews</p>
<p class="SideBar"><a href="ps3rev.html" target="_parent">PS3</a></p>
<p class="SideBar"><a href="ps2rev.html" target="_parent">PS2</a></p>
<p class="SideBar"><a href="psprev.html" target="_parent">PSP</a></p>
<p class="SideBar"><a href="blurayrev.html" target="_parent">Blu Ray </a></p>
<p align="center" class="SideBar">News</p>
<p class="SideBar"><a href="ps3news.html" target="_parent">PS3</a></p>
<p class="SideBar"><a href="ps2news.html" target="_parent">PS2</a></p>
<p class="SideBar"><a href="pspnews.html" target="_parent">PSP</a></p>
<p class="SideBar"><a href="bluraynews.html" target="_parent">Blu Ray</a></p>
<p class="SideBar"><a href="Trophy/main.html" target="_parent">Trophies </a></p>
<p align="center" class="SideBar">Community</p>
<p class="SideBar"><a href="forums.html" target="_parent">Forums </a></p>
<p class="SideBar"><a href="about.html" target="_parent">About</a></p>
<p class="SideBar"><a href="contact.html" target="_parent">Contact</a></p>
<p align="center" class="SideBar">Sponsors</p>
<p align="center" class="SideBar"><a href="http://clkuk.tradedoubler.com/click?p(12813)a(1256612)g(80187)" target="_blank"><img src="Images/gameadd.JPG" alt="Game Add" width="120" height="60" border="0" /></a></p>
<p align="center" class="SideBar"><a href="http://clkuk.tradedoubler.com/click?p(20047)a(1256612)g(606309)" target="_blank"><img src="Images/playadd.JPG" alt="Play" width="155" height="27" border="0" /></a></p>
<p align="center" class="SideBar"><a href="http://clkuk.tradedoubler.com/click?p(18710)a(1256612)g(280345)" target="_blank"><img src="Images/hmvadd.JPG" alt="hmv" width="120" height="60" border="0" /></a></p>
</div>
<div class="StandardText" id="content">
  <center>
    <p class="Headings">Raiding Trophies!<br>
      <br>
    PSO Confirms Tomb Raider Trophy Date!</p>
    <div align="left">
      <p><br>
      Tomb Raider Underworld Trophies go live worldwide on the 28th May.</p>
      <p><br>
      It has been confirmed on the developers blog site by one of the developers.</p>
      <p><br>
        Get ready to raid the trophy vault. <br>
        <br>
      </p>
    </div>
    <p align="center" class="Headings"> </p>
    <p align="center" class="Headings"> </p>
    <p class="Headings"> </p>
    <p align="left" class="SmallPrint">Last Updated:
      <!-- #BeginDate format:Am1a -->May 24, 2009 4:19 PM<!-- #EndDate --> 
      <strong>©</strong> Playstation Online 2009 No Reproduction Without Permission </p>
  </center>
</div>

</body>
</html>

 

 

http://img35.imageshack.us/img35/6053/csszyg.jpg - Screenshot of the problem

 

 

 

 

 

Thanks.

Any need for the absolute positioning? Usually floating the stuff works better cross-browser.

 

Also, you should always declare a default font to fall back on, font you can pick from are:

  • serif (e.g. Times)
  • sans-serif (e.g. Helvetica)
  • cursive (e.g. Zapf-Chancery)
  • fantasy (e.g. Western)
  • monospace (e.g. Courier)

 

So instead of

font-family: "Times New Roman";

use

font-family: "Times New Roman", serif;

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.