Weird CSS issues

[sparkymark75]

I'm having some difficulty with some CSS which I hope someone can help with.

The first issue is an apparent glitch which only shows up in IE (Ok in FireFox).

Internet Explorer

FireFox

Only the first 4 menu items should be there.

The second issue involves the same "menu". This time the issue is that the links work as links in IE but don't function at all in FF. Their not "clickable".

Any ideas?

HTML

<li id="ctl00_rptTabbedMenu_ctl02_uliTabs">
                    <a id="menu2" href="/general/corporatesummary/default.aspx">College Info</a>
                    <ul class="secondary" id="sub2">
                        
                                <li>
                                    <a id="ctl00_rptTabbedMenu_ctl02_rptSubMenu_ctl00_lnkSubMenus" href="/physicalresources/description/default.aspx">Facilities</a>

                                </li>
                            
                                <li>
                                    <a id="ctl00_rptTabbedMenu_ctl02_rptSubMenu_ctl01_lnkSubMenus" href="/general/location/default.aspx">Location</a>
                                </li>
                            
                                <li>
                                    <a id="ctl00_rptTabbedMenu_ctl02_rptSubMenu_ctl02_lnkSubMenus" href="/relations/public/testimonials/default.aspx">Student Testimonials</a>
                                </li>
                            
                                <li>

                                    <a id="ctl00_rptTabbedMenu_ctl02_rptSubMenu_ctl03_lnkSubMenus" href="/governance/regsiterofinterests/default.aspx">Register of Interests</a>
                                </li>
                            
                    </ul>
                </li>

CSS

ul#primary ul.secondary {
	/*visibility: hidden;*/
	position: absolute;
	margin: 0;
	padding: 0;
	top: 2.8em;
	/*left: 7.5em;*/
	left: 2em;
	/*width: 39em;*/
    width: 85%;
	line-height: 1.5em;
	z-index: 8;
	/*background: url(../assets/images/bg_white_menu.gif) no-repeat;*/
	height: 4em;
}

ul#primary ul.secondary li a, ul#primary ul.secondary li a:hover {
	display: block;
	float: left;
	color: #999999;
	width: 15em;
	text-transform: uppercase;
	background-color: transparent;
	text-align: left;
	border-style: none;
	margin: 0px;
	padding: 0px;
	height: 1.5em;
	font-weight: bold;
}
ul#primary ul.secondary li a:hover, ul#primary ul.secondary li a.current {
	color: #FF9900;
}
ul#primary ul.secondary li a:active {
	color: #EE1620; /*FFFFFF*/
}

 

[sparkymark75]

Thanks for replying.

Just managed to fix both issues by removing the width attribute from the ul#primary ul.secondary class.