IE table background bug - css

I have a table with background image shown in my site. The FF and chrome looks normal but not in IE. The background image seems to shift and generate wired result. I was wondering if anyone here can help me out on this one. Please see attached picture. Thanks for the help.
<section>
some html....
<form action="http://localhost/jobSearch/add_project/validate" method="post" accept-charset="utf-8">
<fieldset>
<legend>ADD NEW PROJECT</legend>
<label>Parcel</label>
<input type="text" name="parcel" value="">
<label>Lot Number</label>
<input type="text" name="lot_number" value="">
<label>Block</label>
<input type="text" name="block" value="">
<label>Subdivision</label>
<input type="text" name="subdivision_name" value="">
<label>Section/Phase</label>
<input type="text" name="section_phase" value="">
<input type="submit" name="submit" value="Add Project" id="submit">
</fieldset>
</form>
more html.....
</section>
CSS:
form {
display: block;
}
form fieldset {
font: bold 1.1em helvetica;
}
form label{
float:left;
display:block;
width:140px;
font:bold 1.1em Helvetica;
margin:5px;
}
fieldset{
color:black;
font:bold 1.2em Helvertica;
width:400px;
margin: 20px auto;
padding: 10px;
border:1px solid grey;
background:url('../images/background.jpg');
}
form input {
font-size: .9em;
padding: 4px 6px;
border: solid 1px #AACFE4;
margin: 5px;
width: 200px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
form #submit {
cursor: pointer;
font: bold 1em Helvetica;
padding: 4px 2px;
border: solid 1px #AACFE4;
margin: 5px;
width: 100px;
}​

Your tags are not properly nested. You open with <form>, but close with </fieldset>. You need to swap the locations of the closing tags in the example below to correct the nesting issue.
<form ...>
<fieldset>
<!-- content removed -->
</form>
</fieldset>

Related

Size of bootstrap input field

I currently have:
<input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">
But the input box still takes up 100% of width.
If I remove the botostrap class form-control then I obviously lose the styling, but the box takes up the 4 character width I intended.
How do I get it to take the width of 4, while also keeping the bootstrap styling?
Its because of .form-control class ,which is bootstrap default class, you have to inherit this class.
for example:-
This is default
.form-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
width: 100%;
}
Use like this:-
<div class="wrap">
<input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">
<div>
.wrap .form-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
/*width: 100%;*/ remove this
}
Hope i'll helps you.
You can simple add new class with class="form-control new-input" like below
html
<input type="text" class="form-control new-input">
Css
.new-input{width:100px}
thats it :)
Add a local styling, somehow like:
<input name="test" type="text" class="form-control" placeholder="Type here" style="width:<size value here>" maxlength="4">
HTML:
<div class="form-group">
<input id="test" name="test" type="text" class="form-control" placeholder="Type here">
</div>
CSS:
.form-group #test{
width:50%!important;
}
Example: jsFiddle

Inline-block not working

http://jsfiddle.net/9FG4f/4/
I tried a different way to line up the labels and textfields in the form area along with the button horizontally, but the email label and txtfield is not aligned perfectly.
HTML
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname">
<label class="nick-3">Full Name:</label>
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email">
<label class="nick-4">Email Address:</label>
<input type="text" class="email2" name="email">
</div>
<div id="action3-button">
<input type="submit" class="btn2" value="JOIN NOW" name="submit">
</div>
</form>
</div>
CSS
#action3-fname {
display:inline-block;
}
#action3-email {
display:inline-block;
}
#action3-button {
display:inline-block;
}
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
float:left;
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
margin-top: -8px;
padding: 4px;
width: 210px;
}
.action3 .nick-3 {
color:#000000;
}
.action3 .nick-4 {
margin-left:23px;
color:#000000;
}
.action3 .btn2 {
background: none repeat scroll 0 0 #ff8400;
border: medium none;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 40px;
margin-bottom: 15px;
text-align: center;
width: 140px;
margin-left:10px;
}
I'd get rid of the floats and the margin-tops. Like so:
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
padding: 4px;
width: 210px;
}
Here's a fiddle: http://jsfiddle.net/disinfor/9FG4f/8/
EDIT
Updated with fiddle that closes all tags correctly and combines the first three lines of CSS into a class.
.actionClass {
display:inline-block;
}
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname" class="actionClass">
<label class="nick-3">Full Name:</label><br />
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email" class="actionClass">
<label class="nick-4">Email Address:</label><br />
<input type="text" class="email2" name="email" />
</div>
<div id="action3-button" class="actionClass">
<input type="submit" class="btn2" value="JOIN NOW" name="submit" />
</div>
</form>
</div>
Get rid of the <br>, get rid of the float's and it should all line up nicely.
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
/* float:left; <-- remove this */
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
Here is your updated fiddle
I actually made them float left and corrected a couple margins. Button and everything lined up together.
Here's my updated fiddle
#action3-fname {
float:left;
}
#action3-email {
float:left;
}

Include font awesome inside input type text

I´m trying to include a Font Awesome inside my input in left side but I´m not having sucess. I never used awesome fonts to this purporse. Anyone there knows how to include the font inside the input? Thanks!
The font Im trying to include in left side of my input:
<i class="fa fa-user"></i>
My html:
<form action="" method="post">
<input type="text"class="inputs" placeholder="e-mail" />
<br />
<input type="password" class="inputs"placeholder="Password" />
</form>
My css:
inputs:-webkit-input-placeholder {
color: #b5b5b5;
}
inputs-moz-placeholder {
color: #b5b5b5;
}
.inputs {
background: #f5f5f5;
font-family:"bariol_regularregular", Palatino, serif;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width:180px;
margin-bottom: 10px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
height:20px;
}
.inputs:focus {
background: #fff;
box-shadow: 0px 0px 0px 2px #96842E;
outline: none;
}
This can be achieved with some absolute positioninig. There are two different ways I can think of doing this so I will show you both. Fiddle with both examples here
Method 1
HTML
<label id="email-label">
<input type="text" id="email" placeholder="email here" />
</label>
CSS
#email {
padding-left: 20px;
}
#email-label {
position: relative;
}
#email-label:before {
color: #666;
content:"\f007";
font-family: FontAwesome;
position: absolute;
top: 2px;
left: 5px;
}
Method 2
HTML
<label id="email-label2">
<i class="fa fa-rocket"></i>
<input type="text"id="email2" placeholder="email here" />
</label>
CSS
#email-label2 {
position: relative;
}
#email-label2 .fa-rocket {
color: #666;
top: 2px;
left: 5px;
position: absolute;
}
#email2 {
padding-left: 20px;
}
I purpose this :
HTML
<i class="inside fa fa-user"></i>
<input type="text" class="inp" placeholder="Your account" />
CSS
.inside {
position:absolute;
text-indent:5px;
margin-top:2px;
color:green;
}
.inp {
text-indent:20px;
}
https://jsfiddle.net/ga6j5345/1/

Bootstrap styling issues. Styles are completely broken in ie9

As you see from the image, the styling is completely messed up in IE9. I checked bootstrap site and it appears to be compatible with all browers.
http://i.stack.imgur.com/tYnQE.png link to img for bigger version.
Below is the code I have:
html page:
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
...
</head>
<body>
<div id="container">
<form class="form-signin" id="frm_login">
<fieldset>
<input type="text" class="input-block-level" id="u" name="username" placeholder="Email address">
<input type="password" class="input-block-level" id="p" name="password" placeholder="Password">
Forgot Password?
<input class="btn btn-large btn-primary submitButton" id="btn_login" type="button" value="Sign In"/>
</fieldset>
</form>
</div>
</body>
</html>
the css:
.form-signin
{
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #f8f8f8;
border: 1px solid #e5e5e5;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin
{
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"]
{
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
.form-signin .submitButton,
.form-signin .submitButton:hover
{
margin-left: 86px;
background:#00A88F;
}
p {margin:20px 0;}
a {color:#666;}
a:hover {color: #333;}
What could be causing this problem?
ive tried all the settings i see in the ie9 debugger console. using ie9 browser mode, ie7 standard, ie8 standard looks similar to what i see in ff, ie9 standard completely breaks the styling. i was told to add in the html, but that breaks the css on ff/chrome/ie9.
You need to change
<div id="container">
to
<div class="container">

Styling Password Input Field W/ CSS

I just cannot seem to figure this out. I need another set of eyes.
I am trying to style my password input box to look/react the same way as my text input boxes.
Here is the HTML:
<fieldset class="contact">
<label for="full_name">Purchasing Account ID:</label>
<input type="text" id="acc_id" name="acc_id" size="13" />
<label for="email_address">Email Address:</label>
<input type="text" id="email_address" name="email_address" size="13" />
<label for="password">Password:</label>
<input type="password" id="pw" name="pw" size="13" />
</fieldset>
Here is the CSS:
form input[type=text], form input[type=password] {
width: 306px;
background: #f3f3f3;
border-top: 1px solid #dedede;
border-left: 1px solid #dedede;
border-right: 0;
border-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 10px 10px;
font-size: 12px;
color: #373737;
-moz-box-shadow:inset 3px 3px 5px #e9e9e9;
-webkit-box-shadow:inset 3px 3px 5px #e9e9e9;
box-shadow:inset 3px 3px 5px #e9e9e9;
}
form input[type=text]:focus, form input[type=password]:focus, form textarea:focus {
border: 3px solid #c70000;
}
Any thoughts as to why the password input field is not getting CSS at all? I inspected it with Google Chrome and the CSS is not getting applied at all to the password input field and Firebug shows the same thing.
What if you tried this approach?
Add a css class to your inputs, and then apply the styles via those classes.
http://jsfiddle.net/zr6yB/
<fieldset class="contact">
<label for="full_name">Purchasing Account ID:</label>
<input type="text" id="acc_id" name="acc_id" size="13" class="input-generic" />
<label for="email_address">Email Address:</label>
<input type="text" id="email_address" name="email_address" size="13" class="input-generic" />
<label for="password">Password:</label>
<input type="password" id="pw" name="pw" size="13" class="input-generic" />
</fieldset>​
CSS (abbreviated)
.input-generic {
width: 306px;
...etc...
}
Try this:
.Div_Class_Name input[type=text], .Div_Class_Name input[type=password] {
background:#e5e2b6;
border:2px solid #741a01;
}
Figured it out. The reference for the CSS include was still referencing my live copy and not my development copy.

Resources