horizontal menu not working in firefox,but working in IE

[sitizahmad]

hi everyone.
i am new here, and new to css too.

i'd like to ask about horizontal menu which is working OK in internet explorer (clickable), but its not working at all in firefox (unclickable)..

i have tried few times to figure out whats the prob, but stuck. :confused:

i am begging please could anyone help me with my problem?
here's the code for both css and html :

html :

<div id="bar"><!-- bar starts -->
<ul>
<li><a href="index.html" accesskey="a"><span class="underline">H</span>ome</a>
</li>
<li class="active"><a href="about.html" accesskey="z"><span class="underline">A</span>bout Us</a></li>
<li><a href="download.html" accesskey="c"><span class="underline">D</span>ownload</a>
</li>
<li><a href="support.html" accesskey="k"><span class="underline">S</span>upport</a></li>
<li><a href="programs.html" accesskey="k"><span class="underline">P</span>rograms</a>
</li>
<li><a href="contact.html" accesskey="k"><span class="underline">C</span>ontact Us</a>
</li>
</ul>
</div><!-- bar ends -->

css :

#bar { position:relative; width:700px; clear: both; background: #ccc; height: 25px; margin-left:auto; margin-right:auto; top:80px;}
#bar li { margin: 0; padding: 0; padding-top: 3px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; border-right: 1px solid #fff; float: left; }
#bar li.active { background: #00AEEF; color: #fff; padding-bottom: 4px; }
#bar a:link, #bar a:active, #bar a:visited { color: #000; }
#bar ul { list-style: none; }

really appreciate your help.
thanks in advanced. ;)

[jscheuer1]

Perfectly clickable in Firefox here, it must be something else about your page that is causing the problem.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[sitizahmad]

hi jscheuer1,

thanks 4 ur reply.
the menu now is working fine in both i.e and firefox.
yea u r correct. there is sumthin else in the codes that disable the menu.
what i did is, i changed the position to absolute instead of relative. then, i need to change the margin so the menu will be in the right position.

however, the menu only looks fine in firefox, but not in i.e.
could someone give me an example on how to write hack codes for i.e?
FYI, im using i.e 7.

appreciate ur fast feedback.

tq v much! ;)

[jscheuer1]

Instead of a hack, I would recommend using a documented feature of IE to achieve your objective.

To wit, IE conditional comments. You may create a supplemental stylesheet, either hard coded to the page or linked to externally which will only be read by IE. For example:


<!--[if IE]>
<style type="text/css">
.someclass {
margin: 3px;
}
</style>
<![endif]-->

or:


<!--[if IE]>
<link rel="stylesheet" href="ieonly.css" type="text/css">
<![endif]-->

Either way, these code blocks should follow the styles for your page already declared in the head of the page. They will then only add to or change styles already declared in the existing styles for the page, and only for IE. Specific IE versions may be targeted if desired, see:

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

for more information on this versatile technique.

[sitizahmad]

Hi John @ jscheuer1,

Thank you so much for your reply.
I have followed your instruction and it works!!
I am so happy :D

You are brilliant!
Thank you so much yah!