Hi, I'm having trouble with my blog's footer. It displays differently in each browser I test. Check it out for yourself: Ideally, it's supposed to look like it does in Firefox. I'm not all that good with CSS (yet  ) and I was just wondering if anyone knows why this is happening -- is there something obvious in my code that's making it look different, or is it just each browser being a little quirky?
Also, if you can see any other general problems in my CSS/HTML then it'd be great if you could say and I could get them sorted.
Any help would be much appreciated. 
Michael.
P.S. Since I'm new and do feel a bit cheeky asking like this, I'm gonna show some love by reviewing some of the sites in the other topic and I'll plop a link to Webmaster Talk in my footer when it's fixed 
LINK: http://toomanytriangles.blogspot.com/
HTML:
HTML Code:
<div id="footer">
<div id="footerad">
<h3><strong>About Too Many Triangles</strong></h3>
<p class="footerinfo">Theme by <a href="http://www.pisp.co.uk/tmt/">Michael </a></p>
<p class="footerinfo"><a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1435480&loc=en_GB">Email updates</a></p>
<p class="footerinfo"><a href="http://feeds.feedburner.com/TooManyTriangles">RSS feed</a></p>
<p class="footerinfo">Powered by <a href="http://www.blogger.com/">Blogger</a></p>
<p class="footerinfo">Icons by <a href="http://www.famfamfam.com/">FamFamFam</a></p>
<p class="footerinfo"><a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/">
<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/2.0/uk/80x15.png" />
</a></p>
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "pub-1025496983102662";
/* TMT Blog Footer */
google_ad_slot = "6499573329";
google_ad_width = 125;
google_ad_height = 125;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
</div>
<div id="footercontent">
<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 40px; text-align: center; font-size: medium; color: #FF0000;">
<strong>!</strong></td>
<td><strong><a href="http://irrepressible.info/">Irrepressible</a></strong><br />
Let's stop Internet censorship! It's plain wrong.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/pisp.png" alt="Pisp.co.uk" /></td>
<td><strong><a href="http://www.pisp.co.uk/">Pisp.co.uk</a></strong><br />
Tools and resources to bring philosophy to the masses.</td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong>
<a href="http://www.tmk-history.pwp.blueyonder.co.uk/">Tom, Michael and Kieran's History Website</a></strong><br />
Our previous history projects in one central archive.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/guardian.png" alt="Guardian" /></td>
<td><strong><a href="http://www.theguardian.co.uk/">The Guardian</a></strong><br />
The best newspaper now on the Internet.</td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/nytimes.png" alt="NYT" /></td>
<td><strong><a href="http://www.nytimes.com/">New York Times</a></strong><br />
For a more US-centric look at current affairs.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong><a href="http://www.france24.com/fr/">France 24</a>
(<a href="http://www.france24.com/en/">also in English</a>)</strong><br />
Get a French perspective on what's going on.</td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/guardian.png" alt="Guardian" /></td>
<td><strong>
<a href="http://www.guardian.co.uk/money/studentfinance?gusrc=rss&feed=money">
Guardian Student Finance</a></strong><br />
Most often worrying reading from a trusted source.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong><a href="http://catholicnerd.blogspot.com/">Catholic
Nerd</a></strong><br />
I don't pretend to get all of what's said, I do get some of it.</td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/smp.png" alt="SMP" /></td>
<td><strong><a href="http://www.smp.org/">Saint Mary's Press</a></strong><br />
Though some of the stuff isn't my thing, they do a great prayer
book.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong><a href="http://www.craigknighton.co.uk/wordpress/">Craig Knighton</a></strong><br />
He was tracing his roots, now he's just ranting. :p</td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong><a href="http://narniafan.wordpress.com/">Narnia Fan Site</a></strong><br />
Quite a good introduction to the world of Narnia.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/innocent.gif" alt="Innocent" /></td>
<td><strong>
<a href="http://innocentdrinks.typepad.com/innocent_drinks/">Innocent Drinks Blog</a></strong><br />
From our friends at Fruit Towers!</td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong><a href="http://blog.zzaps.com/">(zz[ap)athetic]</a></strong><br />
I used to read this blog, then I stopped. Might give it another
go.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong><a href="http://flaxseeds.blogspot.com/">Health
Benefits of Flaxseeds</a></strong><br />
Testify! They're actually quite tasty, and it seems good for
you.</td>
</tr>
<tr>
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/gos.png" alt="GOS" /></td>
<td><strong><a href="http://googlesystem.blogspot.com/">Google
Operating System</a></strong><br />
It's always good to see what Google might be doing next.</td>
</tr>
<tr style="background-color: #E1F0FF">
<td style="width: 40px; text-align: center;"><img src="http://www.pisp.co.uk/tmt/world_link.png" alt="Link" /></td>
<td><strong><a href="http://www.laracroft.tv/index.html">Lara
Croft TV</a></strong><br />
What can I say? It's just Lara, Lara and more Lara in these
parts.</td>
</tr>
</table>
</div></div>
CSS:
Code:
/* Footer */
#footer {
width: 800px;
margin: 0px auto 0px auto;
background-color: white;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
#footerad {
width: 200px;
float: right;
padding-right: 10px;
}
#footercontent {
margin-right: 220px;
margin-left: 10px;
height: 300px;
overflow: auto;
}
div#footer div#footercontent table tr td {
padding-top: 5px;
padding-bottom: 5px;
}
.footerinfo {
margin-top: 0;
margin-bottom: 2px;
padding-left: 20px;
background-image:url('http://www.pisp.co.uk/tmt/bullet_blue.png');
background-position: 7px center;
background-repeat: no-repeat;
}
|
