How come the first
Tags: javascript,html,css,forms
Problem :
I have a <form> Inside that form, I have 2 submit buttons.
The first one is this:
<button class="regular" id="geocodesubmit" style="height:40px;">Set Loc
ation</button>
The second one is this:
<button type="submit" class="regular" name="Submit Discovery">Submit</button>
How come my first button gets activated when I push enter on one of the text boxes? I want the 2nd one to activate...
I don't want the first one to respond to any keypresses.
Note: I don't want to use input type="submit", because I have a lot of other css stuff.
Solution :
The HTML4 spec says that the default type of a button tag is submit.
See: http://www.w3.org/TR/html401/interact/forms.html#h-17.5
So your problem is simply the fact, that your first button doesn't have a type attribute and will therefore act like another submit button.
To fix it set type="button" for the first button.
CSS Howto..
You could use display:table, etc. along with vertical-align:middle ul.c { text-align:center; display:table; } ul li { float:left; } ul li a { text-decoration:none; border: 1px solid Maroon; padding:2px 12px; background:#FFEF8A;...
It is using a separate image. Normal state: http://www.nlm.nih.gov/medlineplus/images/search_go.png Hover state: http://www.nlm.nih.gov/medlineplus/images/search_go_rollover.png...
If I understand correctly, I think you want the "hover" properties to be applied to the boxes when the user hovers over the corresponding text. This can't be completed in...
ExtractTextWebpackPlugin will allow you to output your CSS as a separate file rather than having it embedded in your JS bundle. You can then include this file in your HTML,...
The problem is that your line-height in the html rule is hardcoded to a specific value since you use the em units. It gets calculated at the 1.5 times the...
This one should work: @supports (-ms-ime-align:auto) { .selector { property: value; } } For more see: Browser Strangeness...
You need to put your inputs as display:inline-block (will not work on IE 8 and below except if you hack it a little): input { display: inline-block; padding:0 5px; /**...
Inspecting the source code and how it changes as you change themes, it is really quite simple. Digg is harnessing the awesomeness of CSS to drastically change content by simply...
If you'd like to make a CSS change which only affects the tablet and mobile viewports, you can add the CSS overrides you need in the bootstrap-responsive.css file. This is...
These kind of questions are just fun to answer step-by-step. The basics of the solution is to display all list items as inline-block: .calendar > ol > li { display:...
I have corrected a small bug that it needs 2 clicks to start the functioning. Just replaced != 'none' has been replaced with == 'block'. Also, in JSFiddle, you had...
This should work on IE7/8 and other non-IE browsers. The extra 'padding/margin' to the top and/or bottom is introduced by the <p> elements. This is due to the uncollapsing margin...
One option is changing display type of the <body> to inline-block to let it grow horizontally by its contents. Also you could use min-width: 100%; to make sure that the...
To only way to override inline style is by using !important keyword beside the CSS rule. Following is an example of it. div { color: blue !important; /* Adding !important...
You could use vertical-align: top; to override default vertical-align value that is baseline. figure.red { vertical-align: top; } Fiddle: http://jsfiddle.net/ytn6z8oo/1/...
By the way, which version of Mobile angular UI are you using ? I think those stylesheets are not available. I have git cloned the project, and i can't see...
You'll definitely want to cleanup/simplify your markup. Here's a suggestion: <style> .half { border: 1px solid; height: 200px; display: inline-block; width: 40%; padding: 2.5%; box-sizing: border-box; } .half:first-of-type { overflow:...
Use packer & minify tool
The "white space" is the background-color of your img Just add: background-color:#444; It should do the trick....
Play with the position properties On #arrow add position: relative; And on #arrow-inner add position: absolute; top:-16px; left:-15px; And normaly it's works. See my http://jsfiddle.net/DoubleYo/cAGWa/...
*{margin:0; padding:0;} html,body{width:100%; height:100%;} .image{background:lightblue; height:100%; margin-right:200px;} .menu{width:200px; height:100%; background:salmon; position:absolute; top:0; right:0;} Demo...
UPDATE A new standard is being developed, called Web Components, which will enable developers to create custom html elements which hide the implementation of styling and inner html markup. For...
As I was explaining, you need to set a higher z-index to "be above" the non-hovered boxes. And set negative left-right margins, equivalent to the additional width from hovering to...
you should position your number absolutely in order to achieve this. You could also minimalize markup by using a pseudo element, allowing you to do this with a single element....
Much of the refactoring work is the same with or without Compass and you'll see the benefits that Sass offers sooner than those of Compass. Compass creator Chris Eppstein did...
adding #scroll_tip {display:none;} will do the trick, but I am not entirely sure what other effects that may have.
here you can see character codes as well as friendly names. For your ×, you will use "times" and for the second question, yes, you can do it like that.
I don't know why others are taking about Javascript, this is easily done with CSS. You use the adjacent sibling combinator or general sibling combinator. First, declare that you want...
IE is limited to 32 stylesheets. I like to forget that fact apparently, which seems to include inline style tags, on top of <link>. I changed my sandbox to turn...
It's because you are using perspective! until -90deg it doesn't have any back-face to hiding! try to set -91deg, and see your back-face will hiding. .box2 { -webkit-transform-origin: 0 0;...