Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Link that 'looks like' button 1

Status
Not open for further replies.
Glasgow

Glasgow

IS-IT--Management
Joined
Jul 30, 2001
Messages
1,669
Location
GB
My page has a number of buttons that effectively only link to other pages. At the moment I have each of these in a separate form - e.g.
Code: 
    <form method="POST" action="Page1.asp">
    <input type="submit" value="Link 1"></form>
    <form method="POST" action="Page2.asp">
    <input type="submit" value="Link 2"></form>
Is there a way of doing this without creating multiple forms and without graphics?
 
Sort by date Sort by votes
vragabond said:
Clive claims another type of behaviour, which is demonstrated in incorrect code.
Click to expand...

The code I used for the demonstration was your code. As you coded it, IE allows tabbing but does not support hitting the enter key. I just retested it.

However, to do that it is best to follow Chris' advice, because it is better structured and more complete than yours.
Click to expand...

As I pointed out (and also retested) Chris's example does not work for a:hover.

If everyone went with the crowd, new discoveries might not be made.

In thread253-962240 I reported the discovery that Framesets work well with a Blackberry. Almost instantly the thread was filled with people who had no interest in either Framesets or handheld nay-saying everthing I said.

This behavior probably scared off people who did have some interest in the subject or some valuable insight to offer. I know from my logs that many people with blackberries tried my example. The discovery has yet to be discredited.



Clive
 
Upvote 0 Downvote
CliveC

Chris's example works perfectly fine for hover. He did make one small typo that I'll point out below. Your problem with his example is that he defined all these links to have a class named button. You did not add that to your links, therefore you did not see the hover property. Try this instead and you'll see Chris's example works just fine (with the one small typo fix):
Code: 
<html>
<head>
<style type="text/css">
a.button {
   color: #000;
   background: #CCC;
   border: 3px solid #999;
   border-top-color: #DDD;
   border-left-color: #DDD;
   padding: 2px;
   font-weight: bold;
   font-family: arial, helvetica, sans-serif;
   text-align: center;
   text-decoration: none;
   width: 4em;
   display: block; /* must be a block for width to work */
   float: left;
}

a.button:focus,
a.button:hover {
   color: red;
   -moz-outline: none; /* suppress the default focus box in FF */
   outline: none; /* the same, using (unsupported) CSS2 */
}

a[COLOR=red][b].button[/b][/color]:active {
   border: 1px solid #999;
   padding: 4px;
}

/* IE treats :active as :focus, so undo the above for it */
* html a.button:active {
   color: red;
   border: 3px solid #999;
   border-top-color: #DDD;
   border-left-color: #DDD;
   padding: 2px;
}
</style>
</head>
<body>
<a [COLOR=blue][b]class="button"[/b][/color] href="[URL unfurl="true"]http://www.google.com">click[/URL] here to go to google</a>
</body>
</html>
The part in blue is probably what you left out CliveC, and the reason why his example did not work for you.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
What exactly are you confused about Clive? :focus doesn't work in IE, if you want to get a focus effect in IE you have to use :active instead. If you want to get an :active effect in IE, you're out of luck because it's a piece of crap browser that doesn't support it. I think this has been gone over MANY times, so I don't see where there's an "issue", everything seems to be resolved.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
Using Vragabonds code does not enable the use of the enter key in IE. Vragabonds code HAS a:active in it.

What seems clear to me, as demonstrated by Chris's code and my vragabond ammended code, is that adding a:focus to the mix makes the browsers behave in the same way.

Clive
 
Upvote 0 Downvote
does not enable the use of the enter key in IE
Click to expand...
How is the enter key "disabled" in IE with his code? I'm not clear on what you're saying. Tabbing to the link and pressing enter loads up the link just fine for me.

makes the browsers behave in the same way.
Click to expand...
Not entirely true, you don't get the cool "depressed" effect in IE that you get in firefox with Chris's code when clicking the link. This goes right back to the whole "piece of crap browser" I mentioned above.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
Whether we like it or not IE is the dominant browser and will probably be so for some time. The only way that FF could overtake is by being pre-installed on computers.

FF is a great development tool but I doubt that the non-tech average web user would see any point upgrading to it.

Clive
 
Upvote 0 Downvote
I don't know why making browsers behave the same way is such a radical concept.
Click to expand...
The only way you're going to do this is if you surrender the :active property in FF, since IE can't keep up. They will never behave EXACTLY the same as long as :active is defined in a FF page unless it is defined the exact same as :focus. (or you do the special trick that chris showed above to trick IE)

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
I realize that this seems to be mostly a British forum. In the US however nearly all businesses that have IT departments are Microsoft shops. Employees have no choice over what browser is used and I doubt that people are going to go out on a limb and make websites that don't work in IE6 for a long time to come.

Blackberries on the other hand have become almost standard issue. As I have pointed out before, efforts might be better spent on making websites that work on the Blackberry. It actually isn't that hard to do.

What say we end this thread and let future visitors decide whether or not they want to use a:focus. At least now they understand the issues.

Clive
 
Upvote 0 Downvote
It is worth remembering that some people may be using WebTV.

Do you spend a lot of time worrying about how your site looks on WebTV? No.

Why not? I think that is pretty obvious.

Why even bother worrying about how it looks in FireFox or Opera or Lynx or whatever. It doesnt matter.

As long as you can read the text and submit the forms then everything else is just gravy.

People who choose to use something besides IE are choosing to do without gravy. They have already decided that the other benefits of FireFox are more important than looks anyway.

These people DONT CARE about how your web page looks! They care about more practical things like spyware or the FSF or whatever. Why spend free cycles worrying about how it looks for people who don't care anyway?

Jus' sayin'
 
Upvote 0 Downvote
kaht, thanks for pointing out the typo - I hadn't spotted it. I was going to sit this one out, but I'll come back just once more, from first principles this time...

I think most people know how to make a link change colour when the mouse is over it:
Code: 
a:hover { color:red }

Now, what if you want to get the same effect for people who use the keyboard to navigate? If you press the [&#91;]tab] key, each link on the page in turn is given the "focus". CSS defines a pseudo-class for this too:
Code: 
a:focus { color:red }
But there's a problem here. Internet Explorer doesn't recognise [tt]a:focus[/tt], so users of that browser won't see the effect when using the keyboard. Don't worry though, it applies a different pseudo class for the link with the focus:
Code: 
a:active { color:red }
So we can define a CSS rule that will colour the link that currently has the user's attention, (almost) whatever browser they're using:
Code: 
a:hover,a:focus,a:active { color:red }

But there's another problem [tt]a:active[/tt] has a different meaning according to the spec:
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
Click to expand...
What if you want it to change to a different colour when it's being clicked? According to the spec, you should be able to do this:
Code: 
a:hover,a:focus { color:red }
a:active { color:green }
but as has already been noted, IE will apply the :active colour to whatever link has the focus. We need to add an IE-specific hack to put it back on the straight-and-narrow:
Code: 
a:hover,a:focus { color:red }
a:active { color:green }
* html a:active { color:red } /* only IE will apply this */
But how do we keep all browsers' behaviour the same, and get IE to apply a colour just when the link's activated? Simple answer: we can't (well, not just with CSS anyway). IE doesn't have a pseudo-class which identifies such a status, so there's no way to write a rule for it that IE will apply.

You can dumb down the other browsers not to exhibit any special [tt]:active[/tt] behaviour (see my 4th example above), or you can miss out the IE hack and live with the fact that IE will apply the [tt]:active[/tt] rule to any link with the focus (it can look approximately the same to mouse users anyway). Alternatively, you can leave the hack in, so the [tt]:active[/tt] behaviour is a bonus that will only be seen by users of modern browsers - after all, getting pages that look better is one reason people upgrade.

If you have to get true [tt]:active[/tt] behaviour in IE, you're going to have to do it with Javascript. A slick way to do so is to use the "IE7" script available at which actually fixes many of IE's CSS rendering bugs, including [tt]:active[/tt].

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question Question
Searching for a string that contains brackets
Replies
0
Views
503
Alt255
Alt255
pendle666
  • Locked
  • Question Question
Inserting same line of text of every web page - &quot;link&quot; insert?
Replies
6
Views
753
ChrisHirst
ChrisHirst
pendle666
  • Locked
  • Question Question
link or button for going back to previous page - but to the link originally clicked
Replies
5
Views
1K
audiopro
audiopro
KAS68
  • Locked
  • Question Question
Link to specific content in PDF through a web search
Replies
7
Views
1K
spamjim
spamjim
peterd51
  • Locked
  • Question Question
HTML External Links Fail
Replies
15
Views
890
peterd51
peterd51

Part and Inventory Search

Sponsor

Back
Top