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">
Related
I have a custom-made radio button, green colored.
everything works well both on chrome and IE11, except the color. On chrome, the color is green as planned and on IE11 the color is black.
I attached here the css and HTML.
here is my HTML:
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
<span class="formText">Kitzva</span>
<input id="radioKitzva" type="radio" />
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
<span class="formText">Itra</span>
<input id="radioItra" type="radio" />
<asp:HiddenField ID="HiddenField_Itra_Kitzva" runat="server" />
</div>
css:
/*EDIT RADIO BUTTONS*/
/* When the radio button is checked, add a green background */
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input[type=radio]:checked {
border: 6px solid #008053;
}
input[type="radio"]:focus {
outline: 0px;
}
Print screen attached :
IE11 : IE11 - checked , IE11 - not checked
Chrome: Chrome - checked , Chrome - not checked
Thanks alot for the support.
To apply a similar effect to the radio button in the IE 11 browser, I suggest you add the CSS code below in your above-mentioned code.
input[type="radio"]:checked::-ms-check
{
border: 6px solid #008053;
color: white;
}
Full modified code:
<!doctype html>
<html>
<head>
<title>demo</title>
<style>
/*EDIT RADIO BUTTONS*/
/* When the radio button is checked, add a green background */
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
margin-right: 5px;
position: relative;
top: 4px;
}
input[type="radio"]:checked {
border: 6px solid #008053;
}
input[type="radio"]:checked::-ms-check {
border: 6px solid #008053;
color: white;
}
input[type="radio"]:focus {
outline: 0px;
}
</style>
</head>
<body>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
<span class="formText">Kitzva</span>
<input id="radioKitzva" type="radio" />
</div>
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
<span class="formText">Itra</span>
<input id="radioItra" type="radio" />
<asp:HiddenField ID="HiddenField_Itra_Kitzva" runat="server" />
</div>
</body>
</html>
Output in IE 11 browser:
Further, you can try to modify the code as per your own requirements.
IE doesn't support appearance, not with nor without prefix. See here.
The attribute selector is supported since IE 7.0. See here.
edit: I do suggest that you change your [type=radio] to [type="radio"]. Either should be fine, but the latter is more conforming to standards.
I have an email opt in form for Mail Chimp at the top of my site and I cannot get the size of it to change. I want the subscribe button to be on the same line as the email field. Am I doing something wrong?
This is my form code:
<div id="mc_embed_signup">
<form action="//gleefulthings.us12.list-manage.com/subscribe/post?u=0277df98c0e296a094149262c&id=87ac16e6a6" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="your email address" name="EMAIL" class="email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_0277df98c0e296a094149262c_87ac16e6a6" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
And this is my CSS:
<!-- Defines how wide the opt-in will be and centers everything -->
#mc_embed_signup {
width: 880px;
margin: auto auto !important;
}
<!-- Moves the form to the left and sets the width -->
#mc_embed_signup input.email {
float: left !important;
width: 700px !important;
}
<!-- Defines the height of the div surrounding the form -->
#mc_embed_signup .mc-field-group {
min-height: 20px !important;
}
<!-- Moves the button to the right, removes the rounded corners, pushes the button up 45px -->
#mc_embed_signup input.button {
background: #bbcf14 !important;
color: #fff;
font-weight: 600;
display: inline-block !important;
border-radius: 0px !important;
float: right !important;
margin-top: -45px;
}
Here's a link to my test site: http://gleefulthings.com/WPtestblog/. Any help is much appreciated! I've been Googling and can't figure out why it's not working.
input[type="button"], input[type="reset"], input[type="submit"], .button
{
background-color: #111;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 300;
padding: 16px 24px;
text-transform: uppercase;
width: 140px;
float: right;
height: 52px;
}
#mce-EMAIL
{
width: 89.9%;
float: left;
}
Dear Friend, I am edit your website online as my inspect element Chrome tool, it work fine.enter image description here This is screen shot of afterward applying CSS into your website.
Still you have any problem feel free to contact me.
I am trying to align some stuff in a login page. I want the pictures to appear left to the input boxes and the buttons on the down part of the div to be left and right. Something like this:
But this is what is happening (on Safari. Chrome works kinda OK as you can see on top image)
The problem is that although it partially works on Chrome, the input boxes are too small and I can't increase their size.
This is the code I am trying to use:
// Outer white DIV for the forms and buttons:
.login-form {
width: 360px;
height: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
}
// Login field for e-mail:
.login-field-up {
margin-bottom: 5px;
margin-top: 10px;
margin-right: 100px;
float: left;
display: inline-block;
}
/ Login field for password:
.login-field-down {
margin-top: 10px;
margin-bottom: 15px;
float: left;
}
// DIV for Icons of user credential and golden key:
.login-icon {
margin-top: 15px;
margin-right: 15px;
float: left;
display: inline-block;
}
// Right checbox:
.right-col {
float: right;
text-align: center;
margin-top: 10px;
}
Left blue login button:
.left-col {
float: left;
margin-left: 10px;
}
If there is any other easy way to do it, I am up to it. Since I have always worked with backend, I suck with CSS.
<section id="banner">
<h2>Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="login-icon">
<img src="{% static "icons/identity.png" %}" class="icons">
</div>
<div class="login-field-up">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-icon">
<img src="{% static "icons/key_user.png" %}" class="icons">
</div>
<div class="login-field-down">
<input type="password" name="password" id="username" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</form>
</div>
</section>
</section>
You can increase the size of your input boxes by setting the "font-size" attribute in your style sheet, for example,
input {
font-size:2em;
}
And you can align images with input boxes by using <label></label>, for example,
<label for="email"><img src="image.png" /></label>
<input type="email" placeholder="E-mail" name="email" />
Or, you can also place the images in a separate div and the inputs in another div and then adjust the width, margin or padding to align them the way you want.
But as Billy said, if you post your html code, it will be easier to provide a solution.
EDIT: Thanks for your code. I think you wanted to achieve something like this. I added some borders to help you understand the positioning of the divs. Remove them and change the urls for the images once you are done debugging.
<!DOCTYPE html>
<html>
<head>
<style>
.login-form {
width: 360px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
border:1px solid black;
}
#title-header {
text-align:center;
}
#username, #password {
margin-left:20px;
}
input {
font-size:1em;
}
img {
width:16px;
height:16px;
}
.login-field-up {
margin-left:50px;
width:250px;
border:1px solid black;
}
.login-field-down {
margin-left:50px;
width:250px;
border:1px solid black;
margin-top:20px;
margin-bottom:20px;
}
.login-icon {
border:1px solid black;
}
.right-col {
float:left;
width:160px;
margin-left:30px;
border:1px solid black;
}
.left-col {
margin-left:50px;
float:left;
width:60px;
border:1px solid red;
}
.inner-wrapper {
margin-top:50px;
width:350px;
height:150px;
border:1px solid red;
}
</style>
<section id="banner">
<h2 id="title-header">Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="inner-wrapper">
<div class="login-field-up">
<img src="image.png">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-field-down">
<img src="image.png">
<input type="password" name="password" id="password" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</div>
</form>
</div>
</section>
</section>
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;
}
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>