RadioButton has shadow in Firefox, but not in Google Chrome - html

Here's what it looks like in Firefox:
What is looks like in Chrome:
Here are the CSS rules I'm using:
<div class="checkbox-field">
<p>Mr.</p>
<input type="radio" name="prefix" value="mr" />
<p>Mrs.</p>
<input type="radio" name="prefix" value="mrs" />
</div>
.checkbox-field input {
float: left;
margin-right: 46px;
border: 1px solid #A97232;
padding: 3px;
width: 22px;
-webkit-box-shadow: 0 1px 3px -1px black;
-moz-box-shadow: 0 1px 3px -1px black;
box-shadow: 0 1px 3px -1px black;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
color: #636363;
behavior: url(/Public/stylesheets/PIE.htc);
margin-top: 5px;
}
JSFiddle example here:
http://jsfiddle.net/zFNRy/


Please normalize your styles: http://necolas.github.com/normalize.css/

Related

Can't get form button link to open in new window

I've build a small form button but somehow I can't get the link to open in a new tab. I've tried the target blank attribute but no results. I've also tried changing onclick="window.location.href to onclick="window.open.href but nothing seems to work.. Here is the HTML:
<form>
<input style="width: 100%;
min-width: 50px;
max-width: 300px;
padding: 20px;
cursor: pointer;
box-shadow: 6px 6px 5px; #999;
-webkit-box-shadow: 6px 6px 5px #999;
-moz-box-shadow: 6px 6px 5px #999;
font-weight: bold;
background: #9b5103;
color: #000;
border-radius: 2px;
border: 1px solid #999;
font-size: 150%;" type="button" value="Kayak Tarifa" onclick="window.location.href='https://stackoverflow.com/'" />
</form>
</body>

Use window.open()
onclick="window.open('https://stackoverflow.com/')"
working demo : https://jsfiddle.net/gaq23jbL/1/

Use onclick="window.open('https://stackoverflow.com/', '_blank');" instead
input {
width: 100%;
min-width: 50px;
max-width: 300px;
padding: 20px;
cursor: pointer;
box-shadow: 6px 6px 5px #999;
-webkit-box-shadow: 6px 6px 5px #999;
-moz-box-shadow: 6px 6px 5px #999;
font-weight: bold;
background: #9b5103;
color: #000;
border-radius: 2px;
border: 1px solid #999;
font-size: 150%;
}
<form target="_blank">
<input style="" type="button" value="Kayak Tarifa" onclick="window.open('https://stackoverflow.com/', '_blank');" />
</form>

Unwanted Boldness in input - HTML

I have to buttons "YES" and "NO" as shown in below images
For YES
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn cursor-pointer padding-left-1em padding-right-1em" value="YES">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258;
background: #15DB00;
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
For NO
HTML
<div class="margin-1half-em padding-zero text-center" >
<input type="button" class="login-btn padding-left-1em padding-right-1em" style="background-color: red; color: white;" value="NO">
</div>
CSS
.login-btn {
border: 1px solid #999999;
padding: 0.15em 0.75em;
color: #012258; // Overridden for no
background: #15DB00; // Overridden for no
font-weight: bold;
font-size: 1.2vw;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 2px 0px #666;
-moz-box-shadow: 0px 1px 2px 0px #666;
box-shadow: 0px 1px 2px 0px #666;
font-family: FTR55;
}
Problem: Text NO is more bold then text YES. I have no idea why this happens ?
P.S: Padding and margin classes are just for padding and margins nothing else.

How do I create a border for an image?

I want to create a colored thick border with rounded corners around an image.It would look like this:
How do I do this using HTML and CSS?

You can use this, it will definitely work as you requested.
img {
border: 13px solid blue;
border-radius: 10px;
}

How to do this in CSS and HTML:
CSS:
.ImageBorder
{
border-width: 5px;
border-color: Blue;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
HTML:
<img src="MyImage.gif" class="ImageBorder" />

you can put img inside a wrapper div and then give a border-radius value to make a rounded border. by this technique image will also appear as a rounded.
.image-wrap {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
}
.image-wrap:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 3px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.image-wrap img {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Here is the working Demo. http://jsbin.com/jicikalo/1/edit

Something like the following...
img {
border:2px solid black;
border-radius:10px;
}
Modify it to what looks best for you.

Box shadow is not appearing, no reference to it when I inspect element

I am trying to make a custom button with a border radius and box shadow. Here is my html and css
.selectOptionButton{
display: block;
-webkit-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-moz-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 50px;
width: 100px;
background-color: #e7e6e0;
}
<div class="selectOptionButton text-center">Test</div>
For some reason when i inspect the element i see this :
.selectOptionButton {
background-color: #E7E6E0;
border-radius: 100px 100px 100px 100px;
display: block;
height: 50px;
width: 100px;
}

it's an inset color that is the same as the background color
check out this Fiddle with
-webkit-box-shadow: inset 0px 0px 15px 2px #333aaa;
-moz-box-shadow: inset 0px 0px 15px 2px #333aaa;
box-shadow: inset 0px 0px 15px 2px #333aaa;

Inline-block form elements wrap when padding is applied and whitespace exists between

My problem is that for the div classes form-profile and form-profile-side, if I want 2 of those divs, they must be on the same line within the HTML:
<div class="span13">
<form class="form-profile-side"></form><form class="form-profile"></form>
</div>
if I put the second class on a new line, it messes up the layout (this is what I'm trying to do):
<div class="span13">
<form class="form-profile-side"></form>
<form class="form-profile"></form>
</div>
CSS:
.form-profile-side {
display: inline-block;
vertical-align: top;
width: 120px;
background-color: #fff;
border: 1px solid #d6d6d6;
border-right: 0;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-profile {
display: inline-block;
width: 817px;
padding: 15px 15px 15px;
background-color: #fff;
border: 1px solid #d6d6d6;
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
How do I make it so that I can create a new line in the HTML using the class, instead of having it all on one line?
JSFiddle: http://jsfiddle.net/VzTxM/4/

I believe the issue you're having (if i understand the question right) is that the display:inline-block; is adding a lil spacer when the HTML is on two seperate lines - you can fix this by flaoting the elements instead?
CSS
.form-profile-side,.form-profile {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border: 1px solid #d6d6d6;
background-color: #fff;
float:left;
}
.form-profile-side {
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
vertical-align: top;
border-right: 0;
width: 120px;
}
.form-profile {
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
padding: 15px 15px 15px;
width: 817px;
}
.clear {
clear:both;
}
HTML
<div class="span13">
<form class="form-profile-side"><br><br></form>
<form class="form-profile"><br><br></form>
<div class="clear"></div>
</div>