PDA

View Full Version : CSS Firefox driving me mental!!


gibry21
April 9th, 2009, 07:00 AM
I am ediniting a file that was created by somebody else, they used a lot of tables and I am trying to re-code using proper code.

As far as I can see everything is fine, and in IE my list are styled perfectly with the CSS, however in Firefox my list are not styled at all, it looks like it is just complete ignoring my CSS list class's!!

Can anyone help?

These pages never had any doctype set and they worked fine before, albeit with diff css, however when I mess about and try to add different doctype statements it stops styling in IE also...it must be something to do with this.

Please help.

Check out the link in IE and FF:

http://staging.cairn-energy.plc.uk/2008/index.shtml

Ignore a lot of the later html, its old rubbish, its just the lists (my new code) that is the problem.

[CSS]

.2008_content{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:#CCC 1px solid;
width:234px;
float:left;
padding:0 0 0 0;
margin:0 0 0 0;
}

.2008_content ul{
list-style-type:none;
padding:0px;
margin:0px;
}

.2008_content ul li{
display:block;
padding:0px;
margin:0px;
}

.2008_content ul li.title{
height:40px;
background-color:#666;
color:#FFF;
padding-top:5px;
text-align:center;
font-weight:500;
}

.2008_content ul li.link1 {
height:40px;
color:#333;
font-weight:200;
background:url(../images/blue_arrow_grey_back.gif) no-repeat center left #e5e6e6;
padding-left:15px;
padding-top:13px;
border-bottom:#FFF 1px solid;
}


.image{
margin-left:35px;
}

[code]

[code]
<head>
<title>Cairn Energy PLC</title>
<META HTTP-EQUIV="expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Author" CONTENT="corporateprm www.corporateprm.co.uk">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Cairn Energy, cairn, energy, independent, oil, gas, India, Rajasthan, Bangladesh, Edinburgh, Scotland, South Asia, exploration, production, drilling, mangala, FTSE 100">
<meta name="description" content="Cairn Energy is an independent Scottish based FTSE 100 oil and gas exploration and production company operating in South Asia.">
<SCRIPT SRC="../js/newflash.js"></SCRIPT>
<SCRIPT SRC="../js/standard.js"></SCRIPT>
<script language="JavaScript" type="text/JavaScript" src="http://production.investis.com/cne/shareprice.js"></script>
<SCRIPT language="JavaScript" type="text/JavaScript">
var isNeg=LS_Change.indexOf("-");
if (isNeg==-1){
LS_Change='+'+LS_Change;
}
</script>
<link rel="stylesheet" href="../css/cairn2007.css">
<style type="text/css">
<!--
.style6 {color: #c0c0c0}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('../images/BTN_investorrelations_r.gif','../images/BTN_about_r.gif','../images/BTN_investorRelations_r.gif','../images/BTN_groupOffices_r.gif','../images/BTN_workwithus_r.gif','../images/BTN_operations_r.gif')" id="home">
<span class="style6"></span>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img src="../images/dot.gif" width="5" height="10"></td>
<td><img src="../images/dot.gif" width="5" height="10"></td>
<td><img src="../images/dot.gif" width="5" height="10"></td>
</tr>
<tr>
<td height="46">&nbsp;</td>
<td height="46"><img src="../images/heading.gif" width="709" height="46" border="0" usemap="#Map5"></td>
<td height="46">&nbsp;</td>
</tr>
<tr>
<td height="3"><img src="../images/dot.gif" width="5" height="3"></td>
<td height="3"><img src="../images/dot.gif" width="5" height="3"></td>
<td height="3"><img src="../images/dot.gif" width="5" height="3"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><table width="709" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="141"><a href="../about/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','../images/BTN_about_r.gif',1)"><img src="../images/BTN_about.gif" width="141" height="35" border="0" name="Image1" alt="About Cairn"></a></td>
<td width="140"><a href="../operations/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','../images/BTN_operations_r.gif',1)"><img src="../images/BTN_operations.gif" width="140" height="35" border="0" name="Image3" alt="Operations"></a></td>
<td width="141"><a href="../investor/index.shtml" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','../images/BTN_investorRelations_r.gif',1)"><img src="../images/BTN_investorRelations.gif" width="141" height="35" border="0" name="Image2" alt="Investor Relations"></a></td>
<td width="141"><a href="../groupoffices/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','../images/BTN_groupOffices_r.gif',1)"><img src="../images/BTN_groupOffices.gif" width="141" height="35" border="0" name="Image4" alt="Group Offices"></a></td>
<td width="141"><a href="../workwithus/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','../images/BTN_workwithus_r.gif',1)"><img src="../images/BTN_workwithus.gif" width="146" height="35" border="0" name="Image5" alt="Work With Us"></a></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><img src="../images/dot.gif" width="5" height="6"></td>
<td><img src="../images/dot.gif" width="5" height="6"></td>
<td><img src="../images/dot.gif" width="5" height="6"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<div class="2008_content">
<ul>
<li class="title">2008 HALF-YEARLY REPORT</li>
<li><img src="../images/half_year2008.gif" class="image"></li>
<li class="link1">View the 2008 Half-Yearly Report</li>
<li class="link1">Download the 2008 Half-Yearly Report</li>
</ul>
</div>
<div class="2008_content">
<ul>
<li class="title">2008 HALF-YEARLY REPORT</li>
<li><img src="../images/half_year2008.gif" class="image"></li>
<li class="link1">View the 2008 Half-Yearly Report</li>
<li class="link1">Download the 2008 Half-Yearly Report</li>
</ul>
</div>
<div class="2008_content">
<ul>
<li class="title">2008 HALF-YEARLY REPORT</li>
<li><img src="../images/half_year2008.gif" class="image"></li>
<li class="link1">View the 2008 Half-Yearly Report</li>
<li class="link1">Download the 2008 Half-Yearly Report</li>
</ul>
</div>
<div class="clear"></div>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><img src="../images/dot.gif" width="5" height="6"></td>
<td><img src="../images/dot.gif" width="5" height="6"></td>
<td><img src="../images/dot.gif" width="5" height="6"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" id="homepage-intro">
<tr>
<td width="200" valign="top" style="border-right:1px solid #CCCCCC;"><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>

</td>
</tr>
<tr>
<td><img src="../images/2008_report.jpg" width="200" height="286" border="0" usemap="#Map2"> </td>
</tr>
</table></td>
<td width="200" valign="top" style="border-right:1px solid #CCCCCC;"><table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="357" valign="top"><table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../images/title_sir_bill.gif"></td>
</tr>
<tr>
<td width="7">&nbsp;</td>
<td width="350"><div id="introduction">
<p>&quot;All of the major contracts for the midstream and upstream developments in Rajasthan have been awarded and work is progressing well towards first Mangala oil in H2 2009.</p>
<p>We are increasingly confident about the scale of the resource base in Rajasthan. We firmly believe that a plateau production of 175,000 bopd is now achievable with the potential for higher rates and more value optimisation should the encouraging tests on enhanced oil recovery be confirmed in the field trials.</p>
<p>Capricon continues to build new acreage positions. including Greenland where exploration is at an embryonic stage.</p>
<p>The Group has the capacity to drive forward the Rajasthan development and the financial flexibility to pursue opportunities for growth.&quot;</p>
</div></td>
<td width="10">&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="rhsReports" width="32" align="center"><img src="../images/new_homepage/ico_pdf.gif"></td>
<td class="rhsReports"><a href="pdf/2007_Interim_Report.pdf" target="_blank">2007 Interim report</a></td>
</tr>
<tr>
<td class="rhsReports" width="32" align="center"><img src="../images/new_homepage/ico_pdf.gif"></td>
<td class="rhsReports"><a href="pdf/Cairn_Energy_Annual_Report_2006.pdf" target="_blank">2006 Annual Report
&amp; Accounts</a></td>
</tr>
<tr>
<td class="rhsReports" width="32" align="center"><img src="../images/new_homepage/ico_pdf.gif"></td>
<td class="rhsReports"><a href="CR/CairnAR2006.pdf" target="_blank">2006 Corporate Responsibility
Report</a> </td>
</tr>
<tr>
<td class="reportsArchieve" width="32" align="center"><img src="../images/blue_arrow.gif"></td>
<td class="reportsArchieve"><a href="../investor/annualreport.html">Annual Reports Archive</a></td>
</tr>
</table></td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="copyright"><div align="right"><font face="Arial, Helvetica, sans-serif" size="1"><a href="../legal/index.htm"><font color="#999999" class="disclaimer">Legal Disclaimer</font></a> | </font><font face="Arial, Helvetica, sans-serif" size="1" color="#999999" class="copyright">&copy; Copyright 2005 Cairn Energy PLC</font> </div></td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="367,222,427,247" href="javascript:replayIntro();">
</map>
<map name="Map2">
<area shape="rect" coords="1,232,201,252" href="/2007">
<area shape="rect" coords="0,252,198,272" href="/investor/annualreport.html">
<area shape="rect" coords="-1,189,200,209" href="/downloads/Half-yearly_Report_Presentation_2008_-_Analyst.pdf">
<area shape="rect" coords="-1,170,201,189" href="/articles/2008_webcast.shtml">
<area shape="rect" coords="0,148,198,168" href="/articles/2008_announcement.shtml">
<area shape="rect" coords="-1,210,198,232" href="/2007">
<area shape="rect" coords="1,0,198,119" href="/2007">
</map>
<map name="Map3">
<area shape="rect" coords="269,0,341,19" href="/articles/cat_index_8.shtml">
</map>
<map name="Map4">
<area shape="rect" coords="270,0,341,20" href="/investor/downloads.html">
</map></body>
</html>
[code]
graylensman
April 9th, 2009, 08:40 AM
Sounds to me like you've narrowed the problem down to the doctype declaration. Since I'm a Lazy Dreamweaver Jerk, I let DW set the doctype for me, and I've had no issues that I know of.


<!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">

(FWIW, your site appears the same in Safari as it does in FireFox.)
fasterthanlight™
April 9th, 2009, 10:33 AM
I'm sure if you validated your code you would be well on your way:

http://validator.w3.org/check?uri=http://staging.cairn-energy.plc.uk/2008/index.shtml
gibry21
April 9th, 2009, 10:53 AM
I validated the html and tried using Dreamweavers declarations but still no workey...validation shows no errors and dreamweaver doctype stops it working in IE and FF!!!
dr_tchock
April 9th, 2009, 11:20 AM
What a mess. Get rid of the tables and it will be much easier to debug.

Looks like a problem with selection as, if you remove the class-specific selectors for your ul, li, etc. elements it applies the styles.
fasterthanlight™
April 9th, 2009, 11:26 AM
I validated the html and tried using Dreamweavers declarations but still no workey...validation shows no errors and dreamweaver doctype stops it working in IE and FF!!!

Really? so how come you have over 200 errors?

http://validator.w3.org/check?uri=http://staging.cairn-energy.plc.uk/2008/index.shtml


a lot of that junk is easy to fix. you have a lot of stray closing </td>s and your meta tags need to be self closed as well.

Just go through your html line by line and tidy everything up
gibry21
April 10th, 2009, 04:04 AM
Yes. I know the code is a mess! As I said, I inherited this site and am slowly working through it tidying it up, when I get a chance!!

Anyway, I think I sorted it. My class names for the li started with a number and this seemed to be doing it, I wasnt aware a class could not begin with a number!

Is anybody esle aware of this?

Cheers for the help and advice.