I have spent a while encouraging an input form and the submit button to display exactly inline (i.e. same height and vertical position) in both Firefox and Safari. But I'm not having much luck; can anyone help?
The current CSS for the 'Keep in touch' widget on this page: www.landedhouses.co.uk is:
form.mc4wp-form p{margin-left:0px !important; display:inline; }
form.mc4wp-form input {width:135px; padding:7px;}
form.mc4wp-form input[type=submit] {width:54px; margin-left:5px;}
But the submit button is still a pixel out. I think the CSS elsewhere is overriding something... any ideas?
Thank you!
I have done some changes in your css try it if it works for you.
#right input[type="submit"] {
clear: both;
cursor: pointer;
display: block;
height: 30px;
}
form.mc4wp-form input[type="submit"] {
margin-left: 19px;
width: 54px;
}
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
I wish to style an upload button. I do my job fine with ::-webkit-upload-button but IE unlike chrome displays the button on the right and the label on the left(?).
I cannot alter the html by adding buttons/labels/divs because it comes from a form generated from somewhere I cannot tamper with.
I used ::-ms-value in css but it does not seem to work. The below css gets completely ignored. I tried some things I found but nothing helped much. Any suggestions?
#uniqueID input[type=file]::-ms-value {
position: absolute !important;
left: -9999px !important;
text-align: right !important;
}
At last I did it with css only using margins and text-indent:
#uniqueID input[type=file]::-ms-value {
margin-right: -699px;
}
#uniqueID input[type=file]::-ms-browse{
margin-right: 1020px;
margin-top: 25px;
}
#uniqueID input[type=file] {
text-indent: 99px;
}
I'm trying to make an HTML search form similar to Amazon's. I created the desired look, but when I went to actually try the search the text box wasn't taking any input. At first I thought the text was white or something but after clicking the search button I realized this was not the case. I have tried using Chrome's Inspect Element to see the problem and when I hovered over the input box code, the input box was showing beneath the code.
Here's the JSFiddle.
This is the CSS for the box but I don't see an issue here:
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
I'm not sure whether the other elements are interfering or if something is wrong with the search box. How do I fix this issue?
Add float left to .select-style:
.select-style {
...
float: left;
...
}
Lower the width of #search-box input[type="text"]. 80% seems good:
#search-box input[type="text"] {
width: 80%;
...
}
On this page:
I can't figure out how to haxxor the CSS so that the green "Sign Up Now" button isn't over top of the textarea field. I want it to display BELOW the input field.
Any ideas?
Go to the css file(woocommerce.css) find this class and add it a margin-top:
.button, a.button.checkout {
background: #6cbe42;
padding-left: 2em;
padding-right: 2em;
margin-top: 50px;
}
The problem is the height set to the container p.form-row-wide of the textarea. Chrome print it visually correctly, but the CSS code makes this result:
So the button 'Sign Up' in your browser overlap the textarea.
To fix it, update your CSS:
.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
clear: both;
height: auto;
}
input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better