This simple code is not working in Chrome or Safari...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<style>
:required {box-shadow:0 0 5px red;}
</style>
<body>
<form>
<textarea required></textarea>
</form>
</body>
</html>
It works just fine in Firefox and Opera. Also, border:1px solid red works just fine in webkit browsers. What's the deal? I even tried textarea {display:block;} thinking that it could have been an inline issue.
You need to add
-webkit-appearance: none;
to force the awesome webkit render textarea as an ordinary block and apply all the CSS you write.
See jsfiddle
If you give the textarea a background declaration of none (or a background-color declaration for some reason anything except white) the shadow will work.
<style>
:required {
background: none;
box-shadow:0 0 5px red;
}
</style>
Try this
textarea:required {
box-shadow: 0 0 5px red;
-webkit-box-shadow: 0 0 5px red;
-moz-box-shadow: 0 0 5px red;
border: solid 0px transparent; // or border: none;
}
DEMO. and Read this.
try selecting the Textarea via a class or id instead of the :required selector
Related
Building a div container with a triangle in lower right hand corner using :before and :after to create orange triangle with white border. Working well in FF and Chrome. Not working in IE8. Tried adjusting z-index and other attributes but not able to figure out what is wrong here. Any help is appreciated.
.homepage-banner-main:after {
content: " ";
position: absolute;
z-index: 100;
bottom: 0px;
right:5px;
border-top: 100px solid transparent;
border-bottom: 0px solid transparent;
border-right:100px solid #e66c23;
zoom:1;
}
.homepage-banner-main:before {
content: " ";
position: absolute;
z-index: 100;
bottom: 0px;
right:5px;
border-top: 110px solid transparent;
border-bottom: 0px solid transparent;
border-right:110px solid white;
zoom:1;
}
<div class="homepage-banner-main" id="banner-1" >
<img src="http://fillmurray.com/g/710/400" >
</div>
There might be a number of reasons. Out of the top of my head, can you check that:
Your page is NOT running in Quirks Mode.
Your page is passing HTML validation (go to W3C Validator to do a quick check.)
Make sure following in your header
<!DOCTYPE html>
Make sure you are closing meta as well. <meta ------- />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
similarly
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Most of the resources I could find on this related to gradients. This is NOT about gradients.
Has anyone discovered a way to enable rgba for use in a border-color property with IE7 and/or IE8?
Example:
p {
background-color: #D00;
border: 1px solid rgba(0,0,0,.75);
}
If you have full control of the HTML you want to apply this to, it is possible to achieve using a wrapper that has a second background colour (which acts as the borders)
<style type="text/css">
.p-wrapper {
background-color: rgba(0,0,0,.5);
padding: 1px;
}
.p-wrapper p {
background-color: #D00;
}
</style>
<!--[if IE]>
<style type="text/css">
.p-wrapper {
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
zoom: 1;
}
</style>
<![endif]-->
And then as the HTML:
<div class="p-wrapper">
<p>Hello World</p>
</div>
Although if this is really just for 1px, I'd do as Cristy suggests and just specify a RGB fallback
I have to apply the border-radius CSS property to a button, but only when the browser is not Internet Explorer 9. Otherwise I want to use the background-image property. I tried to apply the background-image for IE9 using conditional comments, but it is not working (the border-radius property from the "general" CSS is being applied to IE9 also, instead of the background-image).
How do I change this to make it apply the desired CSS according to the browser version?
/*For IE9*/
<!--[if lte IE 9]>
.PopupBtn
{
background-image: url("../Images/new-btn.png");
height: 28px;
width: 99px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
<![endif]-->
/*Style.css(general)*/
.PopupBtn
{
-moz-box-shadow: inset 0px 2px 1px 0px #0d0d0d;
-webkit-box-shadow:inset 0px 2px 1px 0px #0d0d0d;
box-shadow:inset 0px 2px 1px 0px #0d0d0d;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fffcff), color-stop(1, #000000));
background:-moz-linear-gradient(center top, #fffcff 5%, #000000 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcff', endColorstr='#000000');
background-color:#fffcff;
-moz-border-radius:22px;
-webkit-border-radius:22px;
border-radius:22px;
display:inline-block;
color:#fcfcfc;
font:bold 13px trebuchet ms;
text-decoration:none;
text-shadow:1px 0px 0px #000000;
min-width:90px;
height:30px;
cursor:pointer;
border-style:none;
}
Better use jQuery for this.
if ($.browser.msie && parseInt($.browser.version, 10) == 9)
$('.PopupBtn').css({'background-image':'url(../Images/new-btn.png)','height':'28px','width':'99px'});
See http://api.jquery.com/css/ The advantage is that you not only have to use less code, but you can adjust everything, not just css. This is only just an example, you have to fill in the rest :)
IE's conditional comments are actually html comments, so you cant have them in a css file they have to be in a webpage. Somewhere in you webpage you'll have
<!--[if lte IE 9]>
<style>
.PopupBtn
{
background-image: url("../Images/new-btn.png");
height: 28px;
width: 99px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
</style>
<![endif]-->
or even an external style sheet link betwwen the comments
May be it will use full for You:
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"> </script>
use this java script in head tag.
You need to place the Internet Explorer Conditional Comments on the actual web page and not in the CSS file.
Avoid adding inline CSS code. Instead, put them in their own CSS file. It's a good idea to separate your CSS files. Make one for the IE "hacks" and another for your regular stylesheet.
So, for example, put your IE specific CSS in ie.css file:
ie.css:
.PopupBtn {
background-image: url("../Images/new-btn.png");
height: 28px;
width: 99px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
cursor: pointer;
}
Place your regular stylesheet in style.css.
In the <head> tag put:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
</head>
Note:
IE will still apply any styles from your regular style sheet that it understands. So,
make sure the Conditional Comments and ie.css style sheet is applied after the regular style sheet. This way, it can override any styles you don't want.
Make sure you explicitly override any styles you don't want in ie.css, otherwise, it will "bleed" through and show up in IE
See my JSFiddle link below. If you run it in IE 9, you'll see a green gradient with the word "Hello" in red. If you run it in any other browser, you should see a black gradient with the word "Hello" in white.
http://jsfiddle.net/mKrRL/
I am hoping someone can help me with a css problem...
I am using a listview to display some results, there is required to be a concept of grouping, to achieve this i am using 2 background colors alternating between groups. I am trying to add a border to these elements, but as the border-top and the border-left may be different colors, is there any way of removing the triangle where they meet?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border-top:10px solid red;
border-left:10px solid white;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
You can write like this:
p{
width:200px;
height:200px;
background:red;
border-left:5px solid pink;
-moz-box-shadow:inset 0 5px green;
box-shadow:inset 0 5px green;
}
Check this http://jsfiddle.net/nRWux/1/
box-shaow not work in IE8 & below.
Here's a solution compatible with IE8+ using :before pseudo:
Fiddle http://jsfiddle.net/PhilippeVay/hXrW5/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
position: relative;
border-top:10px solid red;
border-bottom-style:dotted;
border-left-style:none;
}
p:before {
content: '';
display: block;
width: 10px;
position: absolute;
top: -10px; /* top: 0; if you want red over blue (top over left) */
bottom: 0;
background: blue;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
You can use box-shadow for the border-top,
In your example: http://jsfiddle.net/C7jnJ/
margin-top:10px;
box-shadow:0 -10px 0 10px red;
Instead of border-top. The margin-top is added because the shadow is displaying outside the 'p', If you would like it inside, then it would be: http://jsfiddle.net/C7jnJ/1/
box-shadow:inset 0px 10px 0px red;
No, it is not possible to remove the triangle where they meet. borders are implemented that way and there is no way around.
I am trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}