Hi i created a label with some css. The label css is working fine Firefox , chrome but when i run in IE the css is not coming properly.
label.formInputField {width:119px; height:26px; margin:3px 0px 0 0; padding:11px 6px 0 6px; background: #dadada url('css-images/labelBG.png') 50% 50% repeat-x; float:left; display: block; font-size: 12px; font-weight: normal; line-height: 1.1; color:#333; text-align:right; border: 1px solid #AAAAAA; border-right: 1px solid #dadada; }
.div_form_textbox { width:200px; float:left; text-align:left; background-color:#E6E6E6; height:29px; margin:3px 2px 0 0; padding:5px 0 3px 5px; border-right: 1px solid #AAAAAA;border-top: 1px solid #AAAAAA;border-bottom: 1px solid #AAAAAA; background: #e6e6e6 url('siva_images/form_input_bg.png') 50% 50% repeat-x;}
.ui-corner-left { -webkit-border-bottom-left-radius :4px;-webkit-border-top-left-radius :4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-right { -webkit-border-bottom-right-radius :4px;-webkit-border-top-right-radius :4px;border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
<label class ="formInputField ui-corner-left" for="Pdoctor">Doctor First Name:</label>
<div class="div_form_textbox ui-corner-right">
<input id="fname" name="fname" type="text" size="30" class="textbox ui-corner-all"/>
</div>
The proper output in mozilla and chrome like this
So the same thing in IE is coming like this:
The left side is the label and the right is the div inside there is a textbox. my problem
Only half of that is coming in the label of doctors first name . Please help me to get out this issue
I get that exact behaviour in IE when I look at it in Quirks Mode.
You probably just need to add a valid doctype as the very first line, such as:
<!DOCTYPE html>
If you already have that, then there are other possible reasons for Quirks Mode.
IE8 and less browsers cannot render CSS3 -webkit commands. Like the one you have used in css style:
.ui-corner-left { -webkit-border-bottom-left-radius :4px;....
Related
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
http://jsfiddle.net/g54p4/
HTML and CSS is in jsfiddle in case if you need to see.
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
CSS
.box-input{
border-left: 7px solid transparent;
cursor: pointer;
display: block;
vertical-align: middle;
width: 100%;
}
.box-input:hover,
.box-input:focus{
border-left: 7px solid green;
}
.box-input input{
width: 100%;
border: 0;
padding-left: 80px;
}
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
}
.input-icon-email{
display: inline-block;
position: relative;
vertical-align: middle;
height: 34px;
width: 34px;
background: url('http://mbsales.com/WebAssets/email_icon1.gif') left center no-repeat;
padding-left: 30px;
}
Tried fake input div so that it would display border-left green but realized when go to next field by entering tab, it won't show border-left green. other problem is if try to add border-left green in input css, it will display when focus, and image icon will be jumpy. Also wanted to push the icon away with padding left but nothing happened.
Perhaps might be doing it wrong.
Help appreciated.
You can try this:
working DEMO
add this:
.box-input input{ border-left: 7px solid transparent;}
and return the hover style to the input:
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
border-left: 7px solid green;
}
You can as well use box-shadow : DEMO outset - DEMO inset
input:focus {
box-shadow: -7px 0 0 0 green;
}
or even
input:focus {
box-shadow: inset 7px 0 0 0 green;
}
This will be added to any borders already here and remains as long as input has focus. ouset box-shadow may change outline renderer from browser to browser , inset should not and inset will drawn hover background if any.
i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.
Can you help me out finding whats wrong with this code please:
CSS:
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
padding:5px;
}
HTML
<select>
<option>hey</option>
<option>hey2</option>
<option>hey3</option>
</select>
Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!
http://jsfiddle.net/wL8Rs/
I'm using Chrome latest 34.0 version and Firefox latest 29.0 version
Add padding to select
select{
min-width: 100%;
width:inherit;
background: #fff;
height: 33px;
border-radius:5px;
font-size: 15px;
padding:5px;
border:none;
box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}
http://jsfiddle.net/wL8Rs/3/
How to stylize input box like image below using pure "CSS". I know this can be done via jquery, but I am enthusiast if there is way to do so using CSS. I took image from Android's Developer website.
What I did is HTML,
<form>
<label>Email Address: </label>
<div class='left'></div>
<input type='text' class='input'/>
<div class='right'></div>
</form>
And CSS,
.left {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
}
.right {
display:inline-block;
height:7px;
border-left:1px solid #ccc;
position:absolute;
margin-top:23px;
margin-left:-1px;
}
.input {
display:inline-block;
height:30px;
font-size:16px;
width:250px;
border:1px solid #ccc;
border-width:0px 0px 1px 0px;
padding:0px 5px;
outline:none;
}
.input:hover, .input:focus {
border-color:#4ab5d9;
}
What I am trying is => Also on jsfiddle link
The only problem is, I can't found way to change the color of left and right border on hover & on focus.
One option is this
I used the sibling selector to get the hover and focus working:
.input:hover, .input:focus,
.input:hover + .right,
.input:focus + .right {
border-color:#4ab5d9;
}
and removed the "left" div. Then made these changes to the right one:
margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;
I was having the same problem, and I've just created a style like this that doesn't require additional markup. See http://codepen.io/killercup/pen/CBeAq for a demo.
My solution was to use multiple background images (actually, linear-gradient) which are resized using background-size. It works on Android 4.3, but I haven't tested it on any other mobile platform.
The following works in Chrome (and supports focus/hover color changes) using the background CSS property without any additional tags in the HTML:
HTML:
<input type='text' class='holo'></input>
CSS:
input.holo[type='text'] {
/* You can set width to whatever you like */
width: 200px;
font-family: "Roboto", "Droid Sans", sans-serif;
font-size: 16px;
margin: 0;
padding: 8px 8px 6px 8px;
position: relative;
display: block;
outline: none;
border: none;
background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}
Demo: http://jsfiddle.net/QKm37/
EDIT: Just to be completely clear. My primary interest is NOT IE6 but whatever solution I use does need to work in IE6 without looking completely hideous.
So a solution in which the rounded corners ended up square in IE6 would be fine.
A solution where the rounded corners ended up in random locations in IE6 would not be OK.
I have used this tool/technique http://www.spiffycorners.com/index.php?sc=spiffy&bg=FFFFFF&fg=000000&sz=5px to produce some simple rounded corner divs.
Can anyone tell me how to adapt the CSS output by this tool so that the div only has a border (and no fill) ? At the moment you get a solid block of colour (black in this example).
I'm open to completely different techniques but must be imageless and must degrade reasonably for IE6 ('reasonably' includes no rounded corners but still get a box)
I've tried channging the 'background-color' to 'inherit' but then I lost the left and right hand sides of the box.
Sample css/html follows:
<style type="text/css">
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#000000}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #919191;
border-right:1px solid #919191;
background:#3f3f3f}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
background:#303030}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #303030;
border-right:1px solid #303030;}
.spiffy4{
border-left:1px solid #919191;
border-right:1px solid #919191}
.spiffy5{
border-left:1px solid #3f3f3f;
border-right:1px solid #3f3f3f}
.spiffyfg{
background:#000000}
</style>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!-- content goes here -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
jQuery UI does a great job at only applying the radius to the border, using native CSS:
/* Individual Corners */
.ui-corner-tl {
-moz-border-radius-topleft: 4px/*{cornerRadius}*/;
-webkit-border-top-left-radius: 4px/*{cornerRadius}*/;
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-tr {
-moz-border-radius-topright: 4px/*{cornerRadius}*/;
-webkit-border-top-right-radius: 4px/*{cornerRadius}*/;
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-bl {
-moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
-webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-br {
-moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
-webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
/* All Corners */
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
Then you can set border or border-color to apply only a border to it.
See the jQuery-UI Themes.css file for more styles.
Currently achieving the border radius is only mastered in FireFox (-moz-border-radius: 5px;) and in Chrome (-webkit-border-radius: 5px;).
There are scripts to implement the same effect in IE, however, they are not that great. Mainly when it comes to patterns as background-images.
Lets take an example, that you got a pattern as background-image and solid block container with rounded borders on top. The script will produce the borders indeed, but the corners will be solid color and not transparent.
However, there is a way! Its called CSS3 PIE. Learning to use it at first is a nightmare. However, if you get it working..it will be the ultimate solution! CSS3 PIE will add radius to your corners and keep the corner-background transparent. Also, it works great in IE6.
Now, as I understand.. You simply want a border and the container not filled. Well, try the demo on the bottom, in FireFox or Chrome. Is this what you meant? If so, then still CSS3 PIE, is your best bet!
<style>
#demo_container {
/* The actual trick: */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* For making demo more fun: */
border: 2px solid black;
padding: 10px;
margin: 10px;
}
</style>
<div id="demo_container">Stack Overflow</div>
This is the closest I could get :P
.spiffy1 {
margin-left: 4px;
margin-right: 4px;
padding-left: 1px;
padding-right: 1px;
border-left: 1px solid #919191;
border-right: 1px solid #919191;
background: #3F3F3F;
}
.spiffy2 {
margin-left: 2px;
margin-right: 2px;
padding-right: 1px;
padding-left: 1px;
border-left: 2px solid #303030;
border-right: 2px solid #303030;
background: #303030;
}
.spiffy3 {
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid #303030;
border-right: 1px solid #303030;
}
.spiffy4 {
border-left: 1px solid #919191;
border-right: 1px solid #919191;
}
.spiffy5 {
border-left: 1px solid #3F3F3F;
border-right: 1px solid #3F3F3F;
}
<div style=" height:100px; border: 1px solid black; border-width: 0px 1px;">
Seriously... use border-radius! I don't think it's a good thing to have a lot of code, only to have a great effect for an ancient browser...