Jump to content

Background Stopping 3/4 of the way down in Firefox

AKalair

By AKalair
in CSS Help

 Share

Recommended Posts

AKalair Member

AKalair

Posted
Posted

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.

Axeia Member

Axeia

Posted
Posted

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;

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.