I have a text input with a search buton absolute positioned over it... to make space for the button I used some padding to keep the text from going under the button, which is fine, it works in firefox, but not IE.
In fact... It doesn't seem like padding on text inputs works at all in IE.
They have the following code
<style type="text/css">
#mainPageSearch input {
width: 162px;
padding: 2px 20px 2px 2px;
margin: 0;
font-size: 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
border-color:#C6C6C6 #C6C6C6 #E3E3E3;
border-style:solid;
border-width:1px;
color:#666666;
}
#mainPageSearch {
margin-bottom: 10px;
position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
display: block;
position: absolute;
top:0px;
right: -2px;
text-indent: -2000em;
height: 22px;
width: 22px;
background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>
<form id="mainPageSearch" action="">
<input type="text"/>
<a id="mainPageSearchButton" href="#">Search</a>
</form>
Is what I'm trying to do possible or should I just suck it up and deal with the text going under the search button?
I know I could make a search box with a transparent background/border and draw the styling using a containing div... but that isn't really an option because of how many places I've have to change it on the site.
Maybe I'll make a new class for this text input that makes it transparent and assign the normal text input style to the containing div? What do you think?
edit: sorry I should have included the doctype... here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
also, The problems I'm having are in IE 7
try using line-height
I had this issue also i solved it by adding the following line
input
{
overflow:visible;
padding:5px;
}
hope this helps? Let me know.
Try border-right instead of padding-right. This worked for me.
Make your input transparent and place styles inside a container div:
http://jsfiddle.net/LRWWH/211/
HTML
<div class="input-container">
<input type="text" class="input-transparent" name="fullname">
</div>
CSS
.input-container {
background:red;
overflow:hidden;
height: 26px;
margin-top:3px;
padding:6px 10px 0px;
width: 200px;
}
.input-transparent {
background-color:transparent;
border:none;
overflow:hidden;
color:#FFFFF;
width: 200px;
outline:none;
}
There is a css only fix for it
div.search input[type="text"] {
width: 110px;
margin: 0;
background-position: 0px -7px;
text-indent:0;
padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
border-left: 25px solid transparent;
background-position-x: -16px;
padding-left: 0px;
line-height: 2.5em;
}
Thanks
Muhammad Atif Chughtai
You'll have to use float: left/right on '#mainPageSearch input' before you can apply padding/margin.
I experienced a similar problem - IE was padding the input field, but not making it bigger, thus pushing the text down inside of it. I fixed it by setting the height of the input as well. Try that.
I have the following working in IE7. What version are you targeting?
<style type="text/css">
input#test {
padding: 10px;
}
</style>
<input type="text" id="test" />
What about declaring DOCTYPE?
By adding <!DOCTYPE html> padding works grand for me in IE8. Take the following code as an example:
<!DOCTYPE html>
<html>
<head>
<style>
#myInput {
padding: 10px;
}
</style>
</head>
<body>
<input id="myInput" value="Some text here!" />
</body>
</html>
Related
I imagine this is going to be a bit of a difficult problem, but I'm curious how I can use CSS (potentially animations) to modify bootstrap to have functionality similar to this:
I've found a few different examples, but they only really help with getting a material design-esque look, like this:
Any suggestions on how to implement this? I'm stuck
This might help you. Check the jsfiddle https://jsfiddle.net/xo5gdp8r/
span {
position: absolute;
z-index: 1;
top: 5px;
color: red;
background: #fff;
left: 15px;
padding: 0 10px;
}
input {
margin: 15px 10px;
border: 1px solid red;
padding: 10px;
width: 200px;
}
You need to wrap it inside a div and provide position as relative to the div.
I would also say something similar
your HTML should look
<div class="form-group">
<div class="error-message">is required field.</div>
<input class="form-control" required placeholder="Input field" />
</div>
CSS should be :
.form-group .error-message{
display:none;
}
.form-group.required .form-control{
border-color:red;
}
.form-group.required .error-message{
display:inline-block;
color:red;
position:absolute;
background-color:#fff;
margin-top: -10px;
margin-left: 20px;
}
and JS can be :
(function(){
$('.form-control[required]').on('blur',function(){
if(!$(this).val()){
$(this).parent().addClass('required');
}
});
})();
You can see it in action : https://codepen.io/FaridNaderi/pen/EXQzJK
After the chrome 32 update, the width of the html elements (input, select,..)
defined by a css with these properties does not work:
position:absolute;
left:10px;
right:20px;
In chrome 31 and all others browsers it works.
Look at this with chrome 32
http://jsfiddle.net/EAkLb/7/
I guess this is what W3C says as the correct way of rendering input elements (I said I guess and I dindn't put the W3C spec link because I didn't found the official link for it)
A simple workarround is to create container div with the position absolute and the left and right attributes and create an input inside with width: 100%;
<div class="container">
<input type="text"/>
</div>
<style type="text/css">
.container {
position:absolute;
left:10px;
right:20px;
}
.container input {
width: 100%;
}
</style>
like in http://jsfiddle.net/pjK8s/1/
If you need to put padding than you need to style the container to looks like the input and let the input be transparent
<div class="container">
<input type="text"/>
</div>
<style type="text/css">
.container {
position:absolute;
left:10px;
right:20px;
padding: 1px 8px;
margin: 2px 0px;
-webkit-appearance: textfield;
}
.container input {
width: 100%;
border: 0px;
margin: 0px;
padding: 0px;
background: transparent;
outline: none;
}
</style>
like in http://jsfiddle.net/Vyj22/1/
What I'm trying to do is make an input field and center it on the page. I have managed to do just that, but it looks like an input box on top of another one and it is not paying attention to the style rules I gave it. Here is what it looks like:
The black and grey box is supposed to be the input box, obviously.
Here is the HTML:
<style media="screen" type="text/css">
.styles{
height:30px;
width:286px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #5E5E5E;
padding:0 10px;
background-color: #000000;
color:#BFBFBF;
outline: none;
input-align: center;
}
.abs-centered {
margin: auto;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
}
</style>
<div class="styles abs-centered">
<body bgcolor="#25383C">
<input name="name" type="password" placeholder="Password" autocomplete="off"/>
</div>
I haven't put html and body and stuff in yet because I'm just trying to sort this problem.
Don't use a separate div for the look of the input box.
Use this:
input
{
//put the styling in here
}
You're applying the styles to a <div>, not the actual <input>. Think of the <div> as a container that has your body and input inside of it. (As an aside, the <body> should contain everything shown on the page, and not be contained in anything beyond the <html> tag).
Apply the styles to your <input> element, not the <div>, and you'll get the effect you're looking for.
You can fix that issue using CSS, like that:
input{
/*My CSS Code*/
}
However it's not recommended, since you have also input type="submit" which will have a problem because you'll have textbox design on button.
here is more popular and specifc way to edit input type="text"
input[type="text"]{
/*My Code*/
}
As you can tell, it can be used in type="password", type="submit" etc..
First of all, your html is a little messed up. the <html> and <head> tags are mandatory, your first <div> tag cannot be before the <body> tag and the body tag must be closed. It doesn't change a lot for your problem but when you are trying things in html/css you must be sure to have a code that doesn't have markup error otherwise the layout can end up not being rendered as expected.
As I understand you want your input box to be centered on the page. The css class .abs-centered you have there is telling the the layout engine to center a box relative to his parent.
In your code the div class is being centered relative to the page (<body>) box. If you want the input to be black and gray, and centered on the page, you can simple remove the div tag and add both .abs-centered and .styles classes to the input tag.
http://pastebin.com/psHz0psB
If you want to leave the <div> box and have the input centered relative to it, you can just add the .abs-centered class to the input. Then you'll have your input centered on the div centered on the page.
I think you should leave the <div> because input can be treated as inline elements instead of boxes and some browser may not treat the style as expected. If you just want the input element to be styled remove the .styles class from it so it will be transparent.
hope that helps !
You need this: DEMO
HTML:
<body bgcolor="#25383C">
<div class="styles abs-centered">
<input id="actual-input" name="name" type="password" placeholder="Password" autocomplete="off"/>
</div>
</body>
CSS:
.styles{
height:30px;
width:286px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #5E5E5E;
padding:0px 5px;
background-color: #000000;
color:#BFBFBF;
outline: none;
input-align: center;
}
.abs-centered {
margin: auto;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
}
#actual-input{
height:26px;
padding:0px;
width:100%;
color:#fff;
background-color:transparent;
border:0px;
outline-style:none;
}
Screen capture:
Context:
I have an <input> element constructed as follows:
HTML:
<div class="field field-3">
<span><input type="text" placeholder="Username" name=""></span>
</div>
CSS:
(with reset.css stylesheet written by Meyer in the same stylesheet)
.field {
padding: 20px 10px;
position: relative;
overflow: hidden;
}
.field > span {
background-color: #fff;
border: 1px solid #bbc3d3;
float: right;
padding: 8px 15px;
position: relative;
}
.field > span input[type="text"] {
background-color: transparent;
border: 0 none;
color: #9da3af;
display: block;
font-family: $font-open;
#include font-size(12px);
margin: 0;
outline: 0 none;
overflow: hidden;
padding: 3px 0;
resize: none;
width: 838px;
height: 22px;
}
The Glitch:
The input element placeholder shown as seen in the first image.
When I click inside the element and write something, the text moves one pixel down.
Where?:
The glitch only is displayed on Google Chrome
The question: How do I fix and avoid this from happening?
Update
A koala_web suggestion, use jsFiddle (link) to exemplify.
Note: Ironically, in jsFiddle the problem does not play, but I put the link to the template example (link) where the glitch appears.
Try removing the line-height declaration from line 297 of your style.css file
html, body, button, input, select, textarea {
font-size: 12px;
/*line-height: 1.231; remove this*/
}
I have never seen this glitch before and it does not seem like a big deal, however this is how I could deal with it. I would add a background image to the input box with the text center aligned in the center. Then apply it to the <input> css. When the user clicks on the input box make it so background-image is none. Like so:
<html>
<head>
<style>
#usernameInput{
background-image: url(usernamePlaceholder.jpg);
}
</style>
</head>
<body>
<input id="usernameInput" type="text" name="">
<script>
$('#usernameInput').click(function(){
$('#usernameInput').css({
'background-image' : 'none'
});
});
</script>
</body>
</html>
Here is a Jsfiddle
having my first attempt at rounded corners in a login form. Just doing the layout right now, but having some IE7 troubles. Trying to avoid using conditional statements, but although I can get it displaying perfectly in Firefox 3.5, IE looks to be creating a larger margin on the right and left of my login button. It could be that I'm not structuring this the best way possible, so looking for a little insight from the community. Most of my problems began after trying to round to corners using the method shown. My goal is IE6/7 compatibility.
<div id="credentials">
<div id="credsheader"><div id="tr"> </div></div>
<input type="text" class="blurred" id="username" value="USERNAME" />
<input type="password" id="password" class="blurred" value="PASSWORD" />
<button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button>
<div id="credsfooter"><div id="bl"> </div></div>
</div>
div#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666;
padding: 0px 5px;
}
div#tr{
float: right;
background: url('../images/tr.png');
background-repeat: no-repeat;
cursor: default;
}
div#bl{
float: left;
background: url('../images/bl.png');
background-repeat: no-repeat;
cursor: default;
}
#credsfooter{
position: absolute;
bottom: 0px;
left: 0px;
height: 6px;
}
#credsheader{
position: absolute;
top: 0px;
right: 0px;
height: 6px;
}
#username{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
font-size: 8pt;
padding: 3px;
margin: 8px 3px;
vertical-align: middle;
}
#password{
font-size: 8pt;
padding: 3px 3px 4px 3px;
margin: 8px 17px 8px 3px;
vertical-align: middle;
}
input.blurred{
color: #AAA;
}
input.focused{
color: #000;
}
#login{
background: transparent;
border: 0px;
padding: 4px 0px 2px 0px;
margin: 0px -12px;
cursor: pointer;
vertical-align: middle;
}
On a <button> element in IE7 you need to set overflow visible:
button {
*overflow: visible;
}
Found here: http://refresh-sf.com/blog/2009/06/button-padding-ie7-bu/
I personally like to use the "* hack" to target IE7 only - although probably unnecessary in this case.
Ok so I found a lot of problems cause by browser inconsistencies which were causing you a whole lot of problems so I basically started over. I hate forms because of inconsistencies so this was a learning experience for me. I was able to really consolidate the CSS because a lot of it was used to compensate for weird padding and margins. The main thing was I used an input element for a button instead of a button because it is more consistent across browsers. I also added a form tag to fix any issues there. Note that the <p> in the form is intentional. I also added an reset.css file that makes a huge difference because It resets all elements to a state that is consistent to all browsers.
Below is the re written-code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Buttons Suck in IE7!</title>
<link rel="stylesheet" href="reset.css" type="text/css" />
<style type="text/css">
#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666666;
padding: 10px;
-moz-border-radius: 5px;
}
input.text-input{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
border: 1px solid black;
vertical-align: middle;
height: 20px;
width: 140px;
color: #AAAAAA;
}
input.text-input:focus{
color: #000000;
}
input#login{
background: transparent;
border: 0px;
height: 20px;
cursor: pointer;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="credentials">
<form action="http://www.site.com/login.php">
<p>
<input type="text" class="blurred text-input" id="username" value="USERNAME" />
<input type="password" class="blurred text-input" id="password" value="PASSWORD" />
<input id="login" type="image"
src="http://www.axialis.com/objects/users-home.jpg"
name="submit" value="Button Text" />
</p>
</form>
</div>
</body>
</html>
Note that the image I used for the button is some random image I found on Google! You probably also notice that I used -moz-border-radius: 5px; for the rounded corners. This was for simplification. What you can do is take a screen shot of the credentials box in Firefox and then crop just the box out in your favorite image editor. Next you would fill in the inputs with the gray color using some sort of paint brush tool. Now you would have a blank gray box of the same shape and size. Now all you have to do is set that as the background image of your credentials box. That's a lot simpler then do each corner at a time! Don't forget to get rid of -moz-border-radius: 5px; after you do this.
Oh, and before I forget here is reset.css:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Include this reset.css on every page its a lifesaver trust me. Oh and one last note. input.text-input:focus{} probably wont work in IE6 or 7, it will only work on tags. But don't worry because I think IE6 has a limited lifespan at this point.
I hope That helped...good luck!
UPDATE: I tested this on IE 5.5-8 and it looks the same on every one, the only problem is :focus only works in IE8 for input tags.
Not sure if this is the case, but it could be the 'IE Double Margin Bug'.
From memory, I think it might be worth trying to add display: inline; to your floated elements?
Good Luck!
That's difficult to answer that without viewing the HTML in action (with images, for example). Could you set a sample page up somewhere?
Theoretically, it could be a case of not having hasLayout for your button element. You can add the position: relative CSS style to the button element and see if it works. Alternatively, it could be a case of negative horizontal margins (IE does not like them sometimes).
Got acceptable margins, but still not perfect cross browser. Just spent time manipulating margin sizes in pixels until it didn't look terrible.