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.
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.
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.
I have this simplified code:
<div class="container">
<input type="submit" name="submit" class="submit" value="Sign Up">
</div>
And the CSS for it:
input.submit{
padding-left: 40px;
padding-right: 40px;
float:right;
}
.container{
background-color: #AAA;
float:right;
padding: 50px;
}
I expect the div to wrap around the input button, float to the right, and its size is equal to the button's size + the padding (50px). In other browsers it works perfectly, but there are 2 strange things happen in IE7:
The width of the div stretches to the whole webpage. If I remove float:right from CSS of input.submit, then the size of the div is correct.
The input button's width is also much larger than when the button is displayed in other browsers.
This is the doc type I use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Anyone know why these problems happen and how to solve them?
I don't see why you need float: right on input.submit, so just remove it. If there is a reason you need it, you'll have to show me why - there might be a workaround.
To fix the second problem, add overflow: visible to input.submit.
After those two changes, it looks virtually the same in IE7 and IE9: http://jsfiddle.net/33vmm/
How do I set the size of an HTML text box?
Just use:
textarea {
width: 200px;
}
or
input[type="text"] {
width: 200px;
}
Depending on what you mean by 'textbox'.
Your markup:
<input type="text" class="resizedTextbox" />
The CSS:
.resizedTextbox {width: 100px; height: 20px}
Keep in mind that text box size is a "victim" of the W3C box model. What I mean by victim is that the height and width of a text box is the sum of the height/width properties assigned above, in addition to the padding height/width, and the border width. For this reason, your text boxes will be slightly different sizes in different browsers depending on the default padding in different browsers. Although different browsers tend to define different padding to text boxes, most reset style sheets don't tend to include <input /> tags in their reset sheets, so this is something to keep in mind.
You can standardize this by defining your own padding. Here is your CSS with specified padding, so the text box looks the same in all browsers:
.resizedTextbox {width: 100px; height: 20px; padding: 1px}
I added 1 pixel padding because some browsers tend to make the text box look too crammed if the padding is 0px. Depending on your design, you may want to add even more padding, but it is highly recommend you define the padding yourself, otherwise you'll be leaving it up to different browsers to decide for themselves. For even more consistency across browsers, you should also define the border yourself.
input[type="text"]
{
width:200px
}
Your textbox code:
<input type="text" class="textboxclass" />
Your CSS code:
input[type="text"] {
height: 10px;
width: 80px;
}
or
.textboxclass {
height: 10px;
width: 80px;
}
So, first you select your element with attributes (look at first example) or classes(look last example). Later, you assign height and width values to your element.
This works for me in IE 10 and FF 23
<input type="text" size="100" />
If you don't want to use the class method you can use parent-child method to make changes in the text box.
For eg. I've made a form in my form div.
HTML Code:
<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>
Now CSS code will be like:
.form textarea {
height: 220px;
width: 342px;
}
Problem solved.
Lookout! The width attribute is clipped by the max-width attribute.
So I used....
<form method="post" style="width:1200px">
<h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="#m.SrcURI" style="width:600px;max-width:600px"/></h4>
You can make the dependent input width versus container width.
.container {
width: 360px;
}
.container input {
width: 100%;
}
Try:
input[type="text"]{
padding:10px 0;}
This is way it remains independent of what textsize has been set for the textbox. You are increasing the height using padding instead
Elements can be sized with the height and width attributes.
Hopefully a picture is worth a thousand lines of code because I don't want to have to strip down all of the ASP.Net code, HTML, JavaScript, and CSS to provide an example (but I'll supply what I can upon request if someone doesn't say "Oh, I've seen that before! Try this...") [Actually, I did post some code and CSS - see bottom of question].
Here is a portion of a form page being displayed in Firefox:
The blue boxes are temporary stylings of a <label> tag and the orange lines are temporary border styles of the <div> tags (so I can see where they extend and break). The <label>'s are styled to float: left as are the <div's on the right. In addition, the descendant controls of the <div> are also float:left purely so they will line up on the top of the <div> (since there are some taller controls like multiline textboxes down below).
The radio buttons are generated by an ASP control, so they are wrapped in a <span> - also floated left since it is a descendant of the <div>.
Here is the same portion of the screen rendered in IE7:
There are a few minor rendering differences, but the big one that's driving me crazy is the extra white space beside the <input> controls! Note that the <span>'s around the radio buttons and checkboxes line up correctly.
Although they aren't shown, the same thing happens with drop-down lists and list boxes. I haven't tried wrapping the input controls in a <span>, but that might work. It's an ugly hack, though.
I've tried several of the IE7 workarounds for box issues and I've edited the CSS until I'm in pure voodoo mode (i.e., making random changes hoping something works). Like I said, I hope someone will look at this and say, "I've seen that before! Try this..."
Anyone?
Followup 1:
I'm using the XHTML 1.0 Transitional <DOCTYPE>, so I should be in standards mode.
Followup 2:
Here is a small snippet of the generated code for the above (the first control and the last control). Note that this code was generated by ASP.Net and then dynamically edited by JavaScript/jQuery.
<fieldset id="RequestInformation">
<legend>Request Information</legend>
<ol>
<li>
<label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
<div class="FormGroup">
<input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker"
type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
<img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
<span id="txtRequestDate_error"/>
</div>
</li>
--STUFF DELETED HERE--
<li>
<label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
<div class="FormGroup">
<span class="stdCheckBox">
<input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
</span>
</div>
</li>
</ol>
</fieldset>
Here is the relevant portion of the CSS (I double checked to make sure this duplicates the problem):
div
{
border-style: solid;
border-width: thin;
border-color:Orange;
}
label
{
border-style: solid;
border-width: thin;
border-color:Blue;
}
.FormGroup
{
float:left;
margin-left: 1em;
clear: right;
width: 75em;
}
.FormGroup > *
{
float:left;
background-color: Yellow;
}
fieldset ol
{
list-style: none;
}
fieldset li
{
padding-bottom: 0.5em;
}
li > label:first-child
{
display: block;
float: left;
width: 10em;
clear: left;
margin-bottom: 0.5em;
}
em
{
color: Red;
font-weight: bold;
}
Solution!
Matthew pointed me to this page on IE/Win Inherited Margins on Form Elements and that was the problem. The input boxes were inheriting the left margins of all of their containing elements. The solution I chose was to wrap each <input> element in an unstyled <span>. I've been trying to keep the structure of the HTML as semantically sound as possible, so I solved it using a jQuery command in the $(document).ready() function:
//IE Margin fix:
// http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$(":input").wrap("<span></span>");
}
});
Note that this will only add the stupid <span>'s on IE...
StackOverflow to the rescue again!
The input is inheriting the margins from the surrounding div and the ol. If you surround it with another tag like a span or a div, it should solve your problem.
Edit: You can find more information and workarounds at http://www.positioniseverything.net/explorer/inherited_margin.html