Page 2 of 2
Re: Best buttons
Posted: Sat Oct 17, 2009 2:48 pm
by kaszu
parent('form') takes elements parentNode and checks if it's a form, not all parents, while parents('form') searches for all parents which are forms (forms can't have another form inside it, so there shouldn't be problems).
parent('form') wont work with your code if html is something like
I know that there are problems with submitting forms if submit buttons are invisible, but I have no clue what is going on in your case.
there can't be an input with the name "submit"
This must be some browser bug.
event handlers created through onsomething attributes in html aren't called
Why use onsubmit if you can bind to submit event in JS anyway? + HTML is cleaner and all JS in one place.
Not a lot of help

Re: Best buttons
Posted: Sat Oct 17, 2009 4:10 pm
by JellyFish
I see what you mean about the parents method. And I think you're right about the event handlers being in javascript is cleaner. But about the name attribute issue, I don't know if there's any way around this. Through some googling I found this:
http://stackoverflow.com/questions/4458 ... ing-in-ie6.
stackoverflow.com user wrote:You probably have an <input name="submit" /> somewhere in your form, which overwrites the function "submit" of the form in IE
This is an issue with me because my site already used the name submit to check if the form has been submitted.
Code: Select all
<?php
if ($_POST['submit'])
{
...
if ($_POST['submit'] == "something")
{
...
?>
But I guess I could use another name, like
action, which is probably more semantic than submit in the first place. The two bummers aren't that bad, I can live with them.
Other than then the bummers, I'm having another issue with IE6/7. They are fine in IE6/7 until displayed after an input element. When they follow a text box or a textarea, the button is slightly subscript if you know what I mean; it's pushed slightly down as if it has a few pixels added to the top margin. It's strange, have a look
here. In other browser IE8, firefox and chrome, everything is displayed correctly, aligned. Any ideas why this might be happening?
Re: Best buttons
Posted: Sat Oct 17, 2009 4:13 pm
by JellyFish
I see what you mean about the parents method. And I think you're right about the event handlers being in javascript is cleaner. But about the name attribute issue, I don't know if there's any way around this. Through some googling I found this:
http://stackoverflow.com/questions/4458 ... ing-in-ie6.
stackoverflow.com user wrote:You probably have an <input name="submit" /> somewhere in your form, which overwrites the function "submit" of the form in IE
This is an issue with me because my site already used the name submit to check if the form has been submitted.
Code: Select all
<?php
if ($_POST['submit'])
{
...
if ($_POST['submit'] == "something")
{
...
?>
But I guess I could use another name, like
action, which is probably more semantic than submit in the first place. The two bummers aren't that bad, I can live with them.
Other than the the bummers, I'm having another issue with IE6/7. They are fine in IE6/7 until displayed after an input element. When they follow a text box or a textarea, the button is slightly subscript if you know what I mean; it's pushed slightly down as if it has a few pixels added to the top margin. It's strange, have a look
here. In other browser IE8, firefox and chrome, everything is displayed correctly, aligned. Any ideas why this might be happening?
Re: Best buttons
Posted: Sat Oct 17, 2009 6:15 pm
by kaszu
it's pushed slightly down
Your CSS is wrong. Here are properties, which needs to be changed/added:
Code: Select all
.button {
display: inline-block; //You are displaying buttons as blocks, not as text
line-height: 16px; //height (24px) - padding top (3px) - padding bottom (3px)
height: 16px; //Needed for IE only, height (24px) - padding top (3px) - padding bottom (3px)
vertical-align: middle; //Fix vertical position
}
input.text, input.password, textarea {
vertical-align: middle;
}
Since debuging in IE6 is not as easy as in 7 & 8, I couldn't check if it works in it. Does it work as needed now?
Re: Best buttons
Posted: Sat Oct 17, 2009 7:11 pm
by JellyFish
Oh I see, it was the text-height property that was messing up internet explorer. It was some remains of lots of hacking around, and I never got around to cleaning up the css. Once I got rid of text-height, it appears absolutely find in IE6/7.
Now about the other things you mentioned. I never recall displaying my buttons as blocks, nor can I find that in firebug. I do intend for them to be inline, but what's inline-block? After googling it, it's a block element that flows inline. This is good. But is it cross-browser?
Why do I need to set the height attribute for IE? I want my buttons to be able to possible display multiple lines or images, etc. So why is it necessary?
It seems I don't need to set vertical-align either, because IE6/7 got fixed after I got rid of text-height.
Edit: Actually, setting vertical-align to middle makes the text in text boxes align to text outside the text box. But I still don't know why I need to set text-height and height to 16px.
Re: Best buttons
Posted: Sun Oct 18, 2009 8:11 am
by kaszu
inline-block is cross-browser, except FF2, where property value is "-moz-inline-block" or "-moz-inline-box".
If it works, then forget about other properties. I used IE developer toolbar to change CSS and it wasn't working for me only with line-height. I probably messed up something else and height was fix for it.
Re: Best buttons
Posted: Sun Oct 18, 2009 2:03 pm
by Christopher
JellyFish wrote:This is an issue with me because my site already used the name submit to check if the form has been submitted.
This is not a good practice, unless you are checking for one of several buttons, because some browsers (IE) will not send the submit button if the user types and uses Enter to submit the form. Better to check if the HTTP request is POST.
Re: Best buttons
Posted: Sun Oct 18, 2009 10:27 pm
by JellyFish
arborint wrote:JellyFish wrote:This is an issue with me because my site already used the name submit to check if the form has been submitted.
This is not a good practice, unless you are checking for one of several buttons, because some browsers (IE) will not send the submit button if the user types and uses Enter to submit the form. Better to check if the HTTP request is POST.
Which browser(s) do(es) this, because I haven't experienced this?
Edit: Another desirable thing I would like for my submit buttons, is to be able to horizontally center it within it's parent element. To center elements, I usually give the following css:
Code: Select all
input.button {
display: block;
margin: 0px auto;
}
The issue I'm having with my new anchor buttons, is the
display: block; rule. With input buttons, setting display to block didn't effect it's width, but with the new anchor elements, setting the display to block causes it's width to fill the parent element. Maybe it's a bad idea to set the display to block for buttons in the first place. But then how could I center them? Should I use the text-align property? But if I did that then I'd need to wrap a div or some kind of parent element just for the centering, which I'm not sure is against the content-from-presentation-separation methodology.
I noticed that this form that I'm using right now has submit buttons below, and they're centered. I have a peek under the hood and I notice they use a fieldset element and give it a class "submit-buttons". Right now I'm using divs with the class "field" to place each input and label in my form. I don't know if submit buttons are considered a field exactly. I not sure... I realize now that I might of come to a conclusion while writing this, but I figure I should just post this anyway.
