Navigation bar displaying differently in differnt browsers ... please help!

[k8f1]

Hi all,

I would be extremly graeful if you could cast your eye over the following problem and give me some advice if possible. I'm ok with the basics of html and css, but and fairly new to it, so have been stumped by this latest problem.

I built a site (www.callingtonlfc.com) about a year ago, and am fairly sure that it worked perfectly in all browsers at the time. However, I've just checked it and have noticed that the last option on the navigation bar at the top ('noticeboard') seems to have disappeared in IE. It's still displaying perfectly in Firefox and Chrome however.

The html for that section is:

<div style="top: 0px; left: 0px" id="header">
<div style="text-align: center; top: 34px; right: 75px" id="menu">
<ul id="navigation">
<li class="active"><a href="index.htm"><span>HOME</span></a></li>
<li><a href="callington_LFC_fixtures.htm"><span>FIXTURES</span></a></li>
<li><a href="callington_LFC_reports.htm"><span>REPORTS</span></a></li>
<li><a href="callington_LFC_photos.htm"><span>PHOTOS</span></a></li>
<li><a href="callington_LFC_players.htm"><span>PLAYERS</span></a></li>
<li><a href="callington_LFC_contact.htm"><span>CONTACT</span></a></li>
<li><a href="callington_LFC_noticeboard.htm"><span>NOTICE BOARD</span></a></li>
</ul></div></div>

If you visit the site in different browers you'll see what I mean ....

Also, while I'm here there's another problem :-\ Please don't feel like you have to answer both though! ... Unless you want to

This time it's working fine in IE, but not in Firefox or Chrome (I feel like tearing my hair out!). The problem is with the very bottom section on the page ... The alignment is all out. The html reads:

<div><img alt="" src="images/right_bottom.png" /></div></div><br clear="all" />
<center><img style="width: 552px" alt="" vspace="3" width="552" src="images/hr.gif" /></center></div></div>
<div id="footer"><a href="callington_LFC_contact.htm">Contact</a>|<a href="index.htm">Home</a>| <a href="callington_LFC_links.htm">Links</a>|<a href="callington_LFC_map.htm">Map</a>|<a href="callington_LFC_sitemap.htm">Sitemap</a> </div></div>
<div id="bottom"><br />
© 2009 <a href="index.htm"><strong>callingtonlfc.com</strong></a> All rights reserved. Designed and developed by <a target="_blank" href="http://www.kateidat.blogspot.com/"><strong>Kate Fierek</strong></a> <br />
<br />
<center>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="25"/></a>

<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;height:25px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</center>
<br /><br />
</div>
<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-7476730-7");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

Do let me know if you need any more info. Any suggestions for either problem would be VERY gratefully received!!

Thank you in advance

[Taywin]

To answer your first question, the "notice board" is still there, but it is hidden. The problem is not from your page but from the current browser set up. If a user has changed certain configuration especially font size display, the size of your menu will become too large to be displayed in 1 line. As a result, the last link is pushed down to the 2nd line which is hidden behind the content area below the menu. Mine FF doesn't show your "notice board" link because I have my set up to display font serif & size 12px as default (not default setup).

To answer your second question, this is a common issue when you do a web page layout. IE has different box model compared to other standard browsers. You may read it from Wikipedia at http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug for more info. Another guess is that there are so many changes in browsers nowadays. You cannot expect that a web page created a year or longer ago would hold valid to all browsers. This is why you need to keep update or look for any new bugs and work around when a new browser version comes out.

Though, I don't see that the bottom part is out of the alignment on my FF. By the way, I am using FF 3.x on Linux box as well.

[k8f1]

Thank you soooo much. This all makes good sense! Regarding the first problem, is there a way of stopping that from happening? Can you set a standard font type and size that can't be changed? I understand what's happening now, but am not entirely sure how to fix it :-\

Thank you again

[Taywin]

You could change the font size of the #menu in CSS file from 13px to 12px. If it still doesn't show up due to the size, you may extend the size of width where the menu is located in. Though, I believe that changing font size would be enough.