AKalair Posted May 24, 2009 Share Posted May 24, 2009 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. Link to comment https://forums.phpfreaks.com/topic/159480-background-stopping-34-of-the-way-down-in-firefox/ Share on other sites More sharing options...
Axeia Posted May 24, 2009 Share Posted May 24, 2009 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; Link to comment https://forums.phpfreaks.com/topic/159480-background-stopping-34-of-the-way-down-in-firefox/#findComment-841248 Share on other sites More sharing options...
AKalair Posted May 24, 2009 Author Share Posted May 24, 2009 I use absolute because everything becomes misaligned if I use anything else Link to comment https://forums.phpfreaks.com/topic/159480-background-stopping-34-of-the-way-down-in-firefox/#findComment-841259 Share on other sites More sharing options...
Axeia Posted May 24, 2009 Share Posted May 24, 2009 Add the desired doctype , validate the page . And if still doesn't work, then a live example would be great Link to comment https://forums.phpfreaks.com/topic/159480-background-stopping-34-of-the-way-down-in-firefox/#findComment-841272 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.