Has anyone seen this strange behaviour before?
When I have an input field in IE9, with a fixed width, some padding and rounded corners, for some reason the last character that I type when the textbox is full does not show up. It is there, but IE does not move the string enough to the left to show the rightmost character.
Here's a case to show what I mean.
The first field is ok, the second field shows the behaviour I explained when you continue to type when the field is already filled up:
<!DOCTYPE html>
<html>
<head>
<title>Text input field</title>
<style type="text/css">
.textItem {
padding: 2px 8px 2px 2px;
border-radius: 5px;
}
</style>
</head>
<body style="padding: 50px 200px">
<form method="post">
<input type="text" size="5"/>
<br/><br/>
<input class="textItem" style="width: 119px" type="TEXT"/>
</form>
</body>
</html>
Does anybody know how to fix this (hopefully without changing the css properties already defined)?
Problem solved by applying box-sizing: border-box to the input field.
I have adjusted the width accordingly.
Related
Sorry for messing my code soo much.this is my first experiment. Doing it all with the help of google. So, Can you tell me how to write the following code in an efficient way and also, I want to pull the text up in the heading block. Help me.
<!DOCTYPE html>
<html>
<head>
<title>
seVen
</title>
<style>body{background:#A8A8A8;color:white;}
.heading{background:#303030;position:fixed;border-radius: 25px;top:10px;
right:2px;left:2px;bottom:85%;padding:10px;}
.login{position:relative;float:right;top:150px;bottom:145px;}
.padding{padding-left:30px;padding-bottom:30px;position:relative;}
</style>
<div class="heading"><div class="padding"><p style="font size:30px">seVen</p><p style="font-size:15px">Own your imagination</p></div></div>
<body>
<div class="login">
Enter your name <input type="text" id="name" /><br><br>
Password <input type="password" id="password" />
<br><br>
<input type="button" id="submit" value="Submit"/>
<input type="button" id="pwdForgot" value="Forgot Password"/></head>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
About Products
</body>
</html>
At the moment, the height of .heading is based on position:fixed;top:10px;bottom:85% which makes it a specific height which changes as you resize the page vertically. You could replace bottom with height and it will look more consistent.
You can then add line-height to put the text in the middle of the block:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
position: fixed;
top: 10px;
bottom: 85%
height: 80px;
line-height: 80px;
}
Other suggestions:
You may consider changing fixed positioning (position:fixed;top:10px;right:2px;left:2px;) to specific widths and margins:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
height: 80px;
line-height: 80px;
width: 98%;
margin: 1%
}
The differences with removing position:fixed is it won't scroll with the screen, and it will push everything else on the page below it.
Also, instead of using <br><br><br>... and ... try setting margin and padding:
<div style="margin-top:20px;margin-left:50px">Own your imagination</div>
(you may find display:inline-block, float:left, or float:right useful at this point if you end up changing the page a lot using these)
And your footer could make use of position:fixed if you want it to stick to the bottom of the page, something like:
<div style="position:fixed;bottom:10px;left:0;right:0;border-top:solid 1px white">
<a class="padding">About</a>
<a class="padding">Products</a>
</div>
Try to use margin-bottom
Example:
.heading .padding
{
margin-bottom: 10px;
}
There are a few very major issues with your markup:
Your div with class heading is outside of your body tag - all the content in your html file should be within your body tags.
Your head tag closes near the bottom of your document - the head tag always needs to close before your opening body tag.
You can't rely on characters and br tags to space your content - You need to use padding and margins.
You should find that once you've re-structured everything, that some of your issues should be fixed.
Also, the main reason that your 'own your imagination' text isn't on the same line, is because by default p tags will always start a new line.
Follow this basic html layout to restructure what you've got so far, following my points above:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
</style>
<body>
<!-- all your content needs to go in here -->
</body>
</html>
And then in your header, if you change your p tags to span tags and give them a style of display: inline-block, you'll be able to space them how you would like with some padding.
Also, generally speaking, it's better practice to link to an external stylesheet instead of using inline styles or including your css in style tags in the head, but concentrate on what you've got so far.When you feel confident, you can have a look at this:
Linking to an External Stylesheet
I also highly recommend using CSS Tricks as a general resource going forwards, there's some great stuff on there that should really help with structuring and layout.
When I put an input of type text inside a form the input overflows the form by 4 pixels; this only seems to occur when width is 100%.
id est:
<html>
<head>
<title></title>
<style>
input { width: 100% }
</style>
</head>
<body>
<form><input type="text" /></form>
</body>
</html>
Why does this occur?
http://jsfiddle.net/3y8bmqfw/
Because most browsers create a 2px border around <input type="text"> elements. 2px left + 2px right = 4px. Since the width does not count the border, if width = 100% of the container width, the 4px of border overflows the container.
One possible way to correct this is to apply box-sizing: border-box to the element to have the browser calculate the size of the box differently (including padding and border).
I need to resize a text field in google Chrome. I want to be able to drag the end of the textfield horizontally & vertically.
This is what I have tried so far. I'm able to see the resize icon at the corner of the text field, but not able to move it either ways. I have used style="resize:horizontal;" Could some tell me where I am going wrong...
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Feilds</title>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="txt1" style="resize:horizontal;" />
<input type="text" id="txt2" style="resize:both;" />
<input type="text" id="txt3" style="resize:vertical;"/>
</td>
</tr>
</table>
</body>
</html>
By the specifications, you could make any element (including an <input type=text> element) resizeable by setting the overflow property to any value other than visible, in addition to setting the resize property.
In practice, even browsers that support the resize property at all may have restrictions in its applicability. Chrome does not make an <input type=text> element resizeable if you do the above. This is probably a bug, since it is clearly trying to do that: a resize handle appears. Safari, on the other hand, makes it resizeable even if you just set resize, without setting overflow.
There’s a workaround that seems to work on Chrome, though it’s kludgy and not robust-looking. Put the input element inside a div, and make the div resizeable and set the input width near 100%. Not quite 100%, since this would mess things up (no room for the resize handle). Something like this:
<div style="resize: horizontal; width: 15em;
overflow: auto; border: solid gray 1px">
<input style="width: 96%; border: none; resize: none">
</div>
Use a textarea element instead.
Example here
resize is a not style property of html input type text. So, that means you are trying to assign a wrong attibute to the text input tag.
Check this link for more details. From the link
Applies To
elements with 'overflow' other than visible
Use textarea as explaind in other answer.
Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right margin.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
That would do it you think, right? Nope. The select box is 6px shorter in Firefox. See screenshot.
Ok so lets edit the code and make two styles.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Ok that works!
Oh wait, better test in Chrome...
Can someone tell me how to line these up in all browsers? Why can't I just do width: 200px on all, why do all the browsers display it differently? Also while we're at it why is the text box and select box different heights? How do we get them to the same height? Have tried height and line-height no no avail.
Solution:
Ok I've found the solution with some help from the answers below. The key is to use the box-sizing: border-box property so when you specify the width that includes the border and padding. See excellent explanation here. Then the browser can't stuff it up.
Code is below, have also set the height of the boxes to the same size and indented the text inside the box so it lines up. You also need to set the border as Chrome has a really weird looking border it uses for select boxes which will throw out the alignment. This will work for HTML5 sites (e.g. supporting IE9, Firefox, Chrome, Safari, Opera etc).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Just one final warning you may not want input buttons, checkboxes etc to be included in this styling so use the input:not([type='button']) to not apply it to certain types or use input[type='text'], input[type='password'] to specify ones you do want it to apply to.
This is because the <input type="text" /> element has a slightly different default style to the <select> element e.g. the border, padding and margin values may be different.
You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from browser to browser.
You have two options:
Explicitly set the border, padding and margin values to be the same for both elements
A CSS reset stylesheet to be included before your own CSS stylesheets
I would go with option 1. because option 2. requires a lot of work and you'll end up with tons of unnecessary CSS. But some web developers prefer to start from scratch and have complete control.
This will get you close, but that level of precision is nearly impossible.
<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
<select id="Select1" style="width: 100%; margin: 0; padding: 0">
<option>1</option>
</select>
</div>
Different browsers apply different styles by default. I found that resetting both margin and padding to 0 makes both elements equal widths in both Firefox and Chrome.
<html>
<head>
<title>Test</title>
<style type="text/css">
input, select {
margin: 0;
padding: 0;
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br />
<select>
<option>123</option>
</select>
</body>
</html>
I personally like to use a minimal CSS reset stylesheet like YUI CSS Reset before attempting to make a design look great in multiple browsers.
Add a class to both the select and input tags in question ie:
<input class='custom-input'/>
<select class='custom-input'></select>
then modify the css below to fit your design:
.custom-input {
width:140px;
border:1px solid #ccc;
margin:1px;
padding:3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
obvs this is a fix for supporting browsers
If u use tables 4 inputs u could use the following solution - also compatable with ie7:
<tr style="width:1px;"><td style="width:inherit;position:relative;">
<select style="width:100%;">
</select>
</td></tr>
<tr><td>
<input type="text" style="width:150px;"/>
</td></tr>
That way the table cell width will be fixated to the width of the input,
And that way the select would therefore always take the remaining width and perfectly line up with d input.
Try removing the default borders from both elements:
select, input {
border:0;
}
Yes, extremely frustrating. However, I never had problems with that 'till I put a "<!DOCTYPE html>" tag at the top of my HTML page. My webpage rendered properly on all platforms that I could test until I put that tag at the top of my document.
While that's "genuine spec", it seems to be the source of these alignment problems.
FWIW, I'm using HTML5 elements, in-line CSS, etc., all without that tag to specify HTML5. YMMV.
I'm in the midst of the HTML5/CSS/JavaScript learning curve and have hit a wall.
My goal is to create a form. In the process of executing this seemingly simple task, I've created a confusing monstrosity that displays perfectly in Firefox and IE, but appears as a jumbled mess in Chrome and Safari. I've written some sample code that illustrates my problem. Consider this three line form that has two text fields for username and password, and a checkbox to indicate whether or not the theme from 'Sanford and Son' should play during the user's session.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
Try viewing it in IE or Firefox and everything looks perfect. Now try viewing it in Chrome or Safari. The 'sanford' checkbox appears underneath its label. Not good. The checkbox is obviously supposed to appear to the right of the label. What's even more perplexing is that if I replace the checkbox with some other input (e.g. text, radio, etc.), everything appears properly in all browsers. This problem seems limited to the checkbox.
I can't wrap my head around what's going on here. The 'Sanford' label is floated to the left so presumably the checkbox should flow to the immediate right of that label -- and in fact that's exactly what happens in Firefox/IE… so why not in Chrome/Safari?
Any help would be greatly appreciated.
EDIT: I posted the code to the Fiddle site as requested: http://jsfiddle.net/ChadDecker/FyNZw/
Float is tricky. If one element is floated, the others have to be floated or it will be all screwed up. So you must float every element and adjust with padding/margin as necessary. What you may want to try also is using:
position: absolute;
and also using z-index which tells the page what items to display over top of the other:
z-index: 0;
EDIT
Your form on JSFiddle: It's all designed wrong in my opinion. You shouldn't be using form.input because since the checkbox field is considered a form of input, hence <input then it gets the properties from form.input style. I made a simple class to show you called box:
http://jsfiddle.net/FyNZw/2/