I have to set equal widths to a textbox and a select element.
When I remove the !DOCTYPE both the input fields are set to equal lengths,that is 185px each accordingly.
With DOCTYPE the width of the textbox is slightly more than the select element. If I check its width by javascript with offsetWidth property it is found to be 189px instead of 185px that I have set in my CSS.
The screenshot of the output:-
The code snippet:-
<!DOCTYPE html>
<html>
<style>
.usrInput{width:185px}
</style>
<body>
<div id="content">
<form>
<input type="text" name="fname" id="fname" class="usrInput"/><br/>
<select name="state" id="state" class="usrInput">
<option value="">Select State
</select><br/>
</form>
</div>
</body>
</html>
I think it is the user agent stylesheet that is somehow overriding my own CSS. I don't know actually why is it happening and what should I do to overcome this problem?
If you use
.usrInput {
box-sizing: border-box;
}
the dropdown and the input size will match up.
Edit: Usually you can use a css reset such as normalize.css to automatically take care of little quirks like this.
Related
I have a form in HTML as follows:
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>
And I have applied simple CSS to the textarea from an external file as follows:
textarea.input-width {
width:800px;
height:200px;
}
I have included the style sheet in the html as:
<link rel="stylesheet" type="text/css" href="styles.css"/>
still the width and height are not being applied to the HTML. I am not a front-end developer, so I am pretty dumb when it comes to HTML and CSS, so please any help is appreciated.
It seems to have an effect when I do that example in local files.
With CSS:
Without CSS:
So I think perhaps your code is fine, and it's just that your website is still cached by your browser. Try reloading with CtrlShiftR or if it works in a different browser.
(This answer should be comment, but I needed a code snippet)
Your CSS and HTML seem correct, if you run the code snippet below you'll see that the styling is actually being applied.
This lets me believe that your stylesheet is not being loaded properly. Can you verify in your devtools that the <link /> tag exists and the styles load properly? You can do this by right clicking on the textarea element and clicking inspect element. You should now see several columns or rows depending on your devtools window orientation which show the HTML and CSS for the selected element. Your CSS code should be visible over there.
textarea.input-width {
width:800px;
height:200px;
}
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>
I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}
Sample form:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 50px;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Form</legend>
<p>
<label for="name">Name </label><input id="name" type="text">
</p>
<p>
<label for="email">Email </label><input id="email" type="text">
</p>
</fieldset>
</form>
</body>
</html>
It works in all major browsers, but there's no padding top in IE8. Any cross-browser solution?
This seems to a bug in older versions of IE, possibly caused by some confusion around the legend element (which is nested inside fieldset but rendered in a special way), so that the padding gets misplaced above the form. I can more or less reproduce the issue on IE 9 in Quirks Mode and in IE 8 and IE 7 emulation mode.
As a workaround, do not set top padding on the fieldset element. Instead, set a top margin on the first normal element inside it (not counting the legend element).
How to change background color of readonly textbox in css
There are too many unkowns in your question. Which browser do you want support? If you say textbox you seem to use ASP.NET, but there is no tag at you question.
Generally said, the behaviour between the browsers are different.
Consider the following html
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="This is a test" style="background-color:Black; color:Lime;" />
</body>
</html>
IE8 renders the background color properly, but disabled controls will always have gray text with shadows. Mozille Firefox beside that renders the control correct and i am sure there will be difference all over the different browsers and even between the browser versions (IE6 would interprete the color values correctly too).
If you want to have a html regardless which browser you use, you have to use a span or other inline element, to format it with border and colors you want, instead of using a input element.
You could use
input[disabled="disabled"] { background:url("url-to-background-image.jpg") no-repeat #fff; }
and for older browser that doesnt support this selector, you can use jQuery to apply a class
$(document).ready(function() {
$("input[disabled="disabled"]").addClass('disabled');
});
And unless it's disabled all the time, you should provide js for removing the class along with js for enabling it.
you can try this
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
Hi This will surely work for your code. Just try this..
<html>
<head>
</head>
<body>
<input type="text" disabled="disabled" value="JavaScript is the best" style="background-color:Black; color:green;" />
</body>
You can change the background color in css using this code but before that make sure your html page is linked with your css page.
Body {
Background-color: red;
}
Hope this code will work for you.
I have the following HTML
<!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 runat="server">
<style>
.box {
border: solid black 1px;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
<input class="box" style="width:150px;" /><!--CRLF for clarity only-->
<input class="box" style="width:150px;" /><!--CRLF for clarity only-->
</form>
</body>
</html>
When rendered the 2nd row of textboxes appear to be cumulatively longer than the 1 on the first row. This despite explicit setting of widths via the style attribute
Why does this happen and can I avoid it?
Note: This appears to work the same in both FF3 and IE7
There is a border on a textbox that isn't included in the width.
jhunter is correct, and I would add that you need Firebug for FireFox (it's free). You could have figured this out yourself quickly with that installed. Inspect the element you are interested in and look at the "layout" tab.
Indeed, the width of your boxes are +2 as a border on both the left and the right (which are 1px) means there's 2 extra pixels per box. So in total you're +6.
I'd suggest reading CSS Mastery, it explains a lot of the differences with the different browser box models and how they affect layout and width's in different browsers.
CSS Mastery