Here is code for a button that I am playing with:
<head>
<style type="text/css">
.button a {
text-decoration: none;
color: black;
border: 4pt outset lightgrey;
padding: 5px;
}
.button a:hover {
background-color: #FFFFCC;
}
.button a:active {
border: 4pt inset lightgrey;
}
</style>
</head>
<body>
<span class="button">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false">This is a button</a>
</span>
</body>In NS 7, it works really nice. When you click the button, it looks depressed, and when you release, it looks normal. In IE 6, once you click it, it stays down until you click somewhere else (boo!). Any ideas?I don't actually have a suggestion (I've been wondering the same thing, and I'll be out lookin'), but I was wondering why you inserted the "return false" in the link? I've seen this some place else (Lavalamp's pure CSS menu), and hell if I know what it does.i dont no what return false means either but i have ie 6 and i know how you can fix it, with avascript of course.
add this code into the a tag, or the img tag i don't think it matters.
onmouseup="this.style.border = '4pt outset lightgrey'" onmousedown="this.style.border = '4pt inset lightgrey'"
this way the a:active style is applied when the mouse is clicked on the element, and a the unactive is applied when its let go. you have to add both attributes though, otherwise it'll get stuck one way or the other.The return false keeps the href from firing.I can only assume there's going to be an actual URI where you've now got that hash mark?it works on ie6 for my comp.Yes, but notice the subject of the thread: "Further on CSS 'menus'". CSS menus.
I thought you just wanted a fix.why you inserted the "return false" in the link?I didn't have an href for it to go anywhere, and I am just testing the effect. It cancels the link action.
i know how you can fix it, with avascript of course.The whole point of the exercise was to avoid javascript.
I already have the equivalent effect using javascript and image swapping on my home page (<!-- m --><a class="postlink" href="http://gil.davis.home.att.net">http://gil.davis.home.att.net</a><!-- m --> ). The reason I used images is for cross-browser compatibility (NS 4 just doesn't get the CSS method).
Apparently IE still thinks the link is active after you mouseup.
I can only assume there's going to be an actual URI where you've now got that hash mark?You assume correctly. I would also remove the onclick.and may seem asinine, but... there's really no reason for a return true/ return false link on a finished page, right?Returning true in the onclick would be redundant.
Returning false would cancel the link action, assuming javascript was enabled. There may be some reason to do that if you were using the anchor for its mouse action only, and did not want to navigate. If you use the "#" for the href, clicking on the link will make the page jump to the top. Not a desired feature when you may be looking at some part of the page scrolled down past the screen height. Using "return false" in the onclick will assure that action will not occur unless JS is disabled.
However, this was a CSS discussion.I'm going to be doing a slight redo of the look of my site and I was considering using that idea, of inset and outset borders for buttons. would you be annoyed if i did?Originally posted by gil davis
However, this was a CSS discussion. [/B]
Sorry
Originally posted by omega
I'm going to be doing a slight redo of the look of my site and I was considering using that idea, of inset and outset borders for buttons. would you be annoyed if i did? No. Post a link when you get it up.
If you need some other help, let us know...gotcha... now back to your problem, kinda got off-topic...IE is just a bad browser. I can't see any CSS solution to your problem unless there's an opposite to :focus. Although it won't work in IE, I think. 
why does everyone trash ie? it isnt the best, but it serves its purpose... 
Originally posted by omega
why does everyone trash ie? it isnt the best, but it serves its purpose...
I feel another debate coming on...
I think you should do a search, Omega, and you can find out just why IE sucks. It's been covered God knows how many times.Originally posted by omega
why does everyone trash ie? it isnt the best, but it serves its purpose...
If a Web Browser's "purpose" is to execute the HTTP protocol properly and render X/HTML/CSS properly then IE fails rather spectacularly on both counts.Originally posted by omega
but it serves its purpose...Yeah, it lines Bill Gates' pockets with funny little pieces of green paper, while robbing anyone else of the opportunity to compete in a fair and open marketplace.Here's a link that sould help pretty good.
<!-- m --><a class="postlink" href="http://www.projectseven.com/tutorials/css_menus/list_01/whatever">http://www.projectseven.com/tutorials/c ... 1/whatever</a><!-- m -->. i meant on a consumer end, as ive only been making webpages since... summer 03. before then i loved ie. and my pages look the same in both ie and mozilla probably cuz ive always coded for ie.
k' i gotta go try to bumb up the review the redo plz thread cuz ppl will get annoyed if i post a new thread...
<head>
<style type="text/css">
.button a {
text-decoration: none;
color: black;
border: 4pt outset lightgrey;
padding: 5px;
}
.button a:hover {
background-color: #FFFFCC;
}
.button a:active {
border: 4pt inset lightgrey;
}
</style>
</head>
<body>
<span class="button">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#" onclick="return false">This is a button</a>
</span>
</body>In NS 7, it works really nice. When you click the button, it looks depressed, and when you release, it looks normal. In IE 6, once you click it, it stays down until you click somewhere else (boo!). Any ideas?I don't actually have a suggestion (I've been wondering the same thing, and I'll be out lookin'), but I was wondering why you inserted the "return false" in the link? I've seen this some place else (Lavalamp's pure CSS menu), and hell if I know what it does.i dont no what return false means either but i have ie 6 and i know how you can fix it, with avascript of course.
add this code into the a tag, or the img tag i don't think it matters.
onmouseup="this.style.border = '4pt outset lightgrey'" onmousedown="this.style.border = '4pt inset lightgrey'"
this way the a:active style is applied when the mouse is clicked on the element, and a the unactive is applied when its let go. you have to add both attributes though, otherwise it'll get stuck one way or the other.The return false keeps the href from firing.I can only assume there's going to be an actual URI where you've now got that hash mark?it works on ie6 for my comp.Yes, but notice the subject of the thread: "Further on CSS 'menus'". CSS menus.
I thought you just wanted a fix.why you inserted the "return false" in the link?I didn't have an href for it to go anywhere, and I am just testing the effect. It cancels the link action.i know how you can fix it, with avascript of course.The whole point of the exercise was to avoid javascript.
I already have the equivalent effect using javascript and image swapping on my home page (<!-- m --><a class="postlink" href="http://gil.davis.home.att.net">http://gil.davis.home.att.net</a><!-- m --> ). The reason I used images is for cross-browser compatibility (NS 4 just doesn't get the CSS method).
Apparently IE still thinks the link is active after you mouseup.
I can only assume there's going to be an actual URI where you've now got that hash mark?You assume correctly. I would also remove the onclick.and may seem asinine, but... there's really no reason for a return true/ return false link on a finished page, right?Returning true in the onclick would be redundant.
Returning false would cancel the link action, assuming javascript was enabled. There may be some reason to do that if you were using the anchor for its mouse action only, and did not want to navigate. If you use the "#" for the href, clicking on the link will make the page jump to the top. Not a desired feature when you may be looking at some part of the page scrolled down past the screen height. Using "return false" in the onclick will assure that action will not occur unless JS is disabled.
However, this was a CSS discussion.I'm going to be doing a slight redo of the look of my site and I was considering using that idea, of inset and outset borders for buttons. would you be annoyed if i did?Originally posted by gil davis
However, this was a CSS discussion. [/B]
Sorry
Originally posted by omega I'm going to be doing a slight redo of the look of my site and I was considering using that idea, of inset and outset borders for buttons. would you be annoyed if i did? No. Post a link when you get it up.
If you need some other help, let us know...
gotcha... now back to your problem, kinda got off-topic...IE is just a bad browser. I can't see any CSS solution to your problem unless there's an opposite to :focus. Although it won't work in IE, I think. why does everyone trash ie? it isnt the best, but it serves its purpose... Originally posted by omega why does everyone trash ie? it isnt the best, but it serves its purpose...
I feel another debate coming on...
I think you should do a search, Omega, and you can find out just why IE sucks. It's been covered God knows how many times.Originally posted by omega
why does everyone trash ie? it isnt the best, but it serves its purpose...
If a Web Browser's "purpose" is to execute the HTTP protocol properly and render X/HTML/CSS properly then IE fails rather spectacularly on both counts.Originally posted by omega
but it serves its purpose...Yeah, it lines Bill Gates' pockets with funny little pieces of green paper, while robbing anyone else of the opportunity to compete in a fair and open marketplace.Here's a link that sould help pretty good.
<!-- m --><a class="postlink" href="http://www.projectseven.com/tutorials/css_menus/list_01/whatever">http://www.projectseven.com/tutorials/c ... 1/whatever</a><!-- m -->. i meant on a consumer end, as ive only been making webpages since... summer 03. before then i loved ie. and my pages look the same in both ie and mozilla probably cuz ive always coded for ie.
k' i gotta go try to bumb up the review the redo plz thread cuz ppl will get annoyed if i post a new thread...