I'm trying to remove the margin between the search bar and the "Go!" button at the top of this page: http://beta.linksku.com/
I've tried removing all styles and adding margin:0;padding:0;border:none;, but there is still a margin between the two elements. I cannot replicate this problem on JSFiddle, but it occurs in all browsers on my website.
This is how elements function as inline-block.
Normally when you use inline-block elements, you often use them inside a paragraph, so the space between the letters must be consistent. inline-block elements apply to this rule too.
If you want to remove the space completely, you can float the elements.
float: left;
You can also remove the whitespace from your template document. Like so:
<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />
The space you're seeing is the default padding applied to inline elements. Simplest hack? Set font-size: 0 on the form, then reset the actual font-size on the input and button.
Magic.
form {
font-size: 0;
}
form input {
font-size: 12px;
Why does this occur? The browser interprets the whitespace between the inputs as a textual space, and renders accordingly. You can also smush all your elements together on one line, but that's ugly code soup.
That whitespace is relative to your font-size. You can remove it by adding font-size:0 on the container of your inputs, in this case a form, like so:
form {
font-size: 0;
}
Using chrome on the Mac, I can get rid of the space if I edit the form node as HTML in the Developer tools, and remove the space between the two closing tags so:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2">
<input type="submit" value="Go!" class="btn">
</form>
becomes:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn">
</form>
One way is to remove space, but if you're not willing to have an unreadable one-line mess, you can use HTML comment:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><!--
!--><input type="submit" value="Go!" class="btn">
</form>
Related
I am trying to add space before an input tag, and I noticed that Chrome didn't render the whitespace. What can I do to add a space. My code is very straightforward:
Q: <input type="text" id="q">
notice the space between Q: and the tag. I will use JS if I absolutely have to, but pure HTML is much better.
You could try .
Q: <input type="text" id="q">
Add margin-left into you #q,
#q{
margin-left:10px;
}
If you would like a regular line whitespacing you can use <br>
but if you mean the literal whitespace before the the input box, you can use a margin tag to give it more space.
E.g.
#q{
margin-left:10px;
}
Here is the two example of having a whitespace before your input tag. It's either using   or css. Using css is more neat for me in which you can easily change it's styles. Example below css with one character space.
#q1 {
margin-left: .5em;
}
<label for="q">Q:</label> <!-- using a space -->
<input type="text" name="q" id="q">
<br />
<label for="q1">Q:</label><!-- using css -->
<input type="text" name="q1" id="q1">
I have HTML tag in my JSP page like this:
<form action="updateaddr" method="post">
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
Then below the form tag, I am trying to put button that would redirect to another page.
<a href="personal?id=${id}">
<button>返回</button>
</a>
I want to place this button next to
<input type="submit" value="注册"/>
Currently it is placed below this when running Tomcat.
I appreicate if someone could help me.
http://jsfiddle.net/isherwood/w9SGz
Just put the link inside the form.
...
<input type="submit" value="注册" />
<a href="personal?id=${id}">
<button>返回</button>
</a>
</form
UPDATE: You'd need to give the button a type to prevent oddness: http://jsfiddle.net/isherwood/w9SGz/2
Jukka is correct that this could be considered invalid markup, and I know for a fact that some browsers don't like it. I agree that styling a link as a button is a better approach. However, that wasn't the question.
If you don't want to do that, negative margins may help, though it's a bit finicky and fragile:
http://jsfiddle.net/isherwood/w9SGz/1
#myButton {
margin-left: 50px;
margin-top: -26px;
display: block;
}
You could use JavaScript and place it within the form element:
<input type="submit" value="注册"/>
<button onclick="window.location.href='personal?id=${id}'">返回</button>
</form>
This works fairly consistently across browsers that have JavaScript enabled
I'm just starting to get the hang of HTML. I can't manage to align this to the right, it's part of a menu. I basically want it to align the search box to the right so it looks like facebook or something like that. Till now I've been using padding but I cannot keep it going any longer.
<li id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div>
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form></li>
Thanks
You have some options:
keep the div(bad way)
add align"right" to the div
on the form and remove the div (better way)
use float:right
text-align: right
And place that on the form and remove the div.
Also I recommend putting styling in a css and not in the html elements.
Personally I wouldn't use a list
<div id="search-10" class="widget_search">
<form role="search" method="get" action="http://chusmix.com/">
<div style="text-align: right;">
<input class="ubicacion" type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Ir a Ciudad"/>
</div>
</form>
</div>
And I would also suggest you experiment with text-align
Add text-align:right; to your form and remove the unnecessary div.
Note that this will only work for inline elements: text, inputs, anchors, etc. If you want boxes (divs, forms, tables, etc.) to align to the right you need to use float:right; and set a height on the parent of the floated item, or add a clear div bellow the floated item. Also, besides being unnecessary, this second approach would be more complicated to use for you, as a beginner.
My navbar doesn't line up in IE... how can I fix this without using Javascript...
http://opentech.durhamcollege.ca/~intn2201/brittains/labs/index2.php
Also it has to be able to work on all resolutions.
And it has to validate in strict.
You don't need to put absolute position to every single button, just position:aboslute to the parent element (navbar) and for the forms (no need of a separate style for every form) just put float:left
Put all the buttons inside a div, instead of using position relative on each button.
Then each button should be next to each other.
Put all the buttons inside one div.
You have:
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<div><input type="submit" value="Home" /></div>
</form>
Remove the nested divs. And also you're missing a closing div after your last form close.
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<input type="submit" value="Home" />
</form>
<form class="navbarForm2" method="get" action="lab1noscript.php">
<input type="submit" value="Lab1" />
</form>
</div>
I have a wizard-style HTML form with a row of submit buttons for the Back/Next/Cancel actions (in that order). The form can also contain a varying number of input fields, such as text fields, radio buttons, checkboxes, dropdowns (select tags), and textareas. The customer requires the "Next" button to be the default action, so that if the user types into a text field and presses Enter, it should submit the form as if they had clicked the "Next" button.
The problem is that in this scenario, the browser (at least IE, which is what 99% of our customers use) submits the form using the first button declared in the form, which as you can see from the above list is "Back", not "Next" as desired.
One fix I read about is to declare the Back and Next buttons in reverse order (i.e. Next first) then use CSS to display them around the right way, like so:
<html>
<head>
<style type="text/css">
.formSubmitButtons {
direction: rtl;
float: left;
}
.formSubmitButtons input {
direction: ltr;
float: none;
}
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<input type="submit" name="btnCancel" value="Cancel">
<br/>Some text fields go here...
</form>
</body>
</html>
This provides the desired behaviour and button order in both Firefox and IE, however the spacing of the Cancel button relative to the others is inconsistent. In IE6 it looks nice enough, but in Firefox 3.0.5, the Cancel button is jammed up against the Next button.
Does anyone know what CSS magic I need to weave in order to get these three buttons to space evenly in both browsers?
(avoiding the issue by sorting the buttons Next/Back/Cancel is not an option)
(also thanks to everyone who suggested JavaScript-based solutions, but not all our customers allow JS, so it has to be a straight HTML and/or CSS solution)
Here's what I ended up doing that worked nicely (based on Cletus's suggestion):
<!--
<input type="submit" name="btnNext" style="position: absolute; left: -9999px" tabindex="-1">
<input type="submit" name="btnBack" value="Back">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnCancel" value="Cancel">
-->
(ignore the wrapping comment tags, they're just so you can see the HTML)
Have you considered using this trick? Basically you just have a hidden button appear first which does the desired action.
Could you just define a style
.btnMargin {
margin-left:5px;
margin-right:5px;
}
And just apply it to the buttons
<input type="submit" name="btnNext" class="btnMargin" value="Next">
<input type="submit" name="btnBack" class="btnMargin" value="Back">
...
<input type="submit" name="btnCancel" class="btnMargin" value="Cancel">
?
If you have the same style to all, it seems to yield in a few pixel differences between Next/Back and Back/Cancel. If it's crucial that this wouldn't happen, you could define individual margins to buttons. ?
This plasces the buttons in the back, next, cancel order, right next to each other. The only drawback is that you have to set a apecific width on the first button container to make it work in IE7. It works fine without that in Firefox and IE8.
The doctype is important so that the page is rendered in standards compliant mode. Without it the page displays in quirks mode which makes IE display the form elements with completely different spacing.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.formButtons { float: left; }
.formSubmitButtons { width: 120px; }
.formSubmitButtons input { float: right; }
.formFields { clear: both; }
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formButtons formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<div class="formButtons">
<input type="submit" name="btnCancel" value="Cancel">
</div>
<div class="formFields">
Some text fields go here...
</div>
</form>
</body>
</html>
Make the buttons type="button" instead of type="submit". Then, add a hidden field, e.g.:
<hidden name="continue" value="Next"/>
Finally, add javascript onclick handlers to the buttons, which first set the value of the hidden field to the name of the pressed button, and then submit the form.
Why do you not just float the Cancel button right?
If it is only a firefox problem you could use an attribute selector like this
input[name="btnCancel"] {float: right;} or margin-left or whatever you want. Otherwise just use classes on the inputs.