[solved]faking an href

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

[solved]faking an href

Post by phpScott »

I am having some weird issues between mozilla browsers and ie, suprise, suprise.

What I am trying to do is to create some <a> tags that do nothing, i'm going to put an onClick event in them to set some values for a page(that part I can put in later).
The trouble is if I just define <a>some link</a> then in firefox the css for a:hover works just fine, it changes the background and text color just fine. In ie without having a href inside the <a> tag it does nothing.

below is some code that I am using(just a small sample) for you to see the what is happening between firefox and ie.
the sub menu items change just fine but the main menu items don't change at all. the only difference is the href within the <a> tags.

Any ideas how to make the href attribure do nothing or convince ie to change like I want it too.

Code: Select all

<!DOCTYPE html PUBLIC &quote;-//W3C//DTD XHTML 1.0 Strict//EN&quote; &quote;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quote;>
<html xmlns=&quote;http://www.w3.org/1999/xhtml&quote; xml:lang=&quote;en&quote; lang=&quote;en&quote;>
<head>
<title>some page</title>
<style type=&quote;text/css&quote;>
#menuList a {
	
	text-decoration: underline;
	cursor: pointer;
}
#menuList a:visited {
   	text-decoration: underline;
	cursor: pointer; 

}
#menuList a:hover {
	background-color: #FC881A;
	color: #380040;
	text-decoration: underline;
}
</style>
</head>
<body>
<div id=&quote;navigation&quote;>
	<ul id=&quote;menuList&quote;>
		<li>
			<a>Add to Main Menu Section</a>
		</li>
		<li>
			<a id = &quote;Home&quote; title = &quote;Home&quote;>Home</a>
		</li>
		<li class=&quote;menubar&quote;>
			<a id = &quote;contact-actuator&quote; title = &quote;Contact&quote; class=&quote;actuator&quote;>Contact</a>
			<ul id=&quote;contact-menu&quote; class=&quote;menu2&quote;>
				<li>
					<a href=&quote;_#&quote; target=&quote;blah&quote; id = &quote;contact-london&quote; title = &quote;Contact London&quote;>Contact London</a>
				</li>
				<li>
					<a href=&quote;_#&quote; target=&quote;blah&quote; id = &quote;chelsea-offices&quote; title = &quote;Chelsea Offices&quote;>chelsea offices</a> 
				</li>
				<li style=&quote;border-bottom: none;&quote;>
					<a href=&quote;_#&quote; target=&quote;blah&quote; id = &quote;birmingham-offices&quote; title = &quote;Birmingham Offices&quote;>Birmingham offices</a> 
				</li>
			</ul>
		</li>
		<li class=&quote;menubar&quote;>
			<a href&quote;javascript:alert('nothing');&quote; id = &quote;services-actuator&quote; title = &quote;Services&quote; class=&quote;actuator&quote;>Services</a>
			<ul id=&quote;services-menu&quote; class=&quote;menu2&quote;>
				<li>
					<a href=&quote;_#&quote; target=&quote;blah&quote; id = &quote;db-design&quote; title = &quote;DB Design&quote;>DB design</a> 
				</li>
				<li>
					<a href=&quote;_#&quote; target=&quote;blah&quote; id = &quote;graphic-design&quote; title = &quote;Graphic Design&quote;>Graphic Design</a> 
				</li>
				<li style=&quote;border-bottom: none;&quote;>
					<a href=&quote;_#&quote; target=&quote;blah&quote; id = &quote;main-menu&quote; title = &quote;Main Menu&quote;>main menu</a> 
				</li>
			</ul>
		</li>
		<li>
			<a id = &quote;test page&quote; title = &quote;Test Page&quote;>test page</a>
		</li>
	</ul>
</div>
</body>
</html>
thanks.

phpScott
Last edited by phpScott on Fri May 13, 2005 3:57 am, edited 1 time in total.
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Post by wwwapu »

Is this something like it?

Code: Select all

.emptylink a:link, .emptylink a:visited{
	color: #000000;
}

<span class=&quote;emptylink&quote;><a href=&quote;#&quote;>Add to Main Menu Section</a></span>
I suppose you have tried href="" which makes some interesting moves with IE 8O
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

Not sure if it works, but it's worth a try ;)

Code: Select all

<a href='javascript:return false;'>fake link</a>
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

solution for those who want it is

Code: Select all

<a href=&quote;javascript:setMenuId('9')&quote;> contact </a>
so you where almost there for mevigge89, thanks.
Post Reply