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*/
}

 

[Berserker]

These types of issues are all too common and I've had numerous problems getting CSS menus to work on my own site.

Try using non-breaking spaces (  ) in the links. Might help. Doesn't do much having a resizable page, but then horizontal menus rarely do.

 

[sparkymark75]

Thanks for replying.

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