I have a registration form where this CSS rules apply. when user submits with incorrect or empty data in some required fields, we highlight the error field by a RED BORDER around the error field. This is not working in IE. The RED Border appears in FF and safari.
I have a code like this:
#errorMsg {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background:#FEE !important;
border:1px solid #C33;
color:#C33 !important;
font-size:110%;
font-weight:bold;
margin: 20px 0;
padding:15px;
text-align:left;
}
.parentError {
background: #FEE;
border: 1px solid #C33;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
left: -10px;
margin-bottom: 10px;
padding: 10px;
position: relative;
top: 0px;
width: 635px;
}
[type=text].elementError,
[type=password].elementError,
select.elementError {
border: 2px solid #C33;
}
It works in Firefox 8 and Safari, but not in IE 8.
I am novice in CSS. Any help is appreciated.
In IE you can decide which css you want to present. You can also decide to present different css in different versions of IE.
You can Create an IE-Only Stylesheet
Example:
Target IE 8 and HIGHER:
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
This code will operate only in IE 8 and higher. means that you can create css file for 8 and higher. and a different file for lower version then 8.
This is just an example. This method give you a lot of power.
You can see this link.
IE8 don't have support for CSS3 elements like -moz-border-radius, -webkit-border-radius. But FF8 and Safari both support CSS3 elements. that's why CSS3 works in FF8 and safari.
You can also check the current implementation of CSS3 Modules statuses at http://www.css3.info/modules/
Also you can view the browser compatibility chart here .
Add the following line at the very start of your HTML document:
<!doctype html>
Without it, or some other doctype declaration of a specific kind, IE works in Quirks Mode. This means, among other things, that it does not recognize many CSS features such as attribute selectors (like [type=text]).
For robustness, to work even on IE 6 (which does not recognize attribute selectors in any mode), consider using simpler selectors like input.elementError and assign the class elementError to such input elements only for which you want that styling.
Related
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
I have a website which has a list of posts that numbers from 1 to 50. It works in Chrome, Firefox and IE 10, but not in IE 8 or lower....
I have this one: <ol id="post-list" class="lol" start="1">
CSS:
#entry-list > li:before {
border-bottom: 1px solid #D9D9D9;
color: gray;
content: attr(value);
width: 100%;
}
#entry-list {
list-style: none outside none;
margin-top: 0;
word-wrap: break-word;
}
#entry-list .content{margin-bottom:10px}
#entry-list>li{position:relative}
#entry-list>li:not(:last-child){margin-bottom:30px}
The problem: no border-bottom in IE 8 (or lower) and no attribute/value/ list starting with 1. How can I make it work? Why does my IE-specific stylesheet not respond to #entry-list > li:before?
See if this answer helps, for the :before issue: How can I get IE8 to accept a CSS :before tag?
As for "start" ... it should be working. Are you using any css normalization when doing this? We'd kind of need to see more code, however, to take a look. You do realize, however, that the CSS you posted would target an object with the id of entry-list, not post-list, right?
my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don't care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png
Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don't want to look for the css
here is the css:
.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
0 0 4px #7F241C;
cursor:pointer;
}
This is easily fixed if you create a conditional statement in your html head to wrap your new stylesheet in such as
<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->
and put the following CSS into your stylesheet this should fix the problem.
input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}
You already have a conditional statement in your head to create your HTML5 elements.
Any problems and I'll be happy to help.
Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).
(Using conditional classes makes it a lot easier to target IE-specific fixes like these)
If you could provide a jsfiddle of the button code that would help. IE dev tools aren't cooperating very will with me. If my memory serves, try adding float left on both input fields and see what happens.
Look at this site and at the search: it's really similar done but there's an extra div to do stretchy stuff : http://www.genesismedicalimaging.com
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons
There doesn't seem to be a way to support border-radius other than to provide the CSS for each engine separately. Right now it seems you have to declare the property three or four times (possibly more if you want to support more obscure engines).
My interim solution is to pass all of my CSS through this regular expression:
Regexp:
border(-)?(top|bottom)?(-)?(left|right)?-radius:(.+?);
Replace:
-moz-border-radius$1$2$4:$5;
-webkit-border$1$2$3$4-radius:$5;
-khtml-border$1$2$3$4-radius:$5;
border$1$2$3$4-radius:$5;
This searches for all instances of the official CSS3 selector and replaces it with itself, plus the engine-specific selectors for Mozilla, WebKit and KHTML.
Is there a better way?
When are WebKit and Mozilla planning to support the CSS3 selectors? (Do they already?)
It should be :
.myClass
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
with border-radius below the other one.
why ? Because, now that new browsers doesn't need their own engine hack anymore (like firefox 4 for example), they should use the last command they receive in the CSS file. That way, the rounded corner should be the same in all browser understanding CSS3 specifications and you won't have to change your CSS soon.
For all four corner you can use the following one
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
and if you want to add curve at any one corner (for now i show the bottom left) try the below
-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-radius-bottomleft: 4px;
Thanks
Like this in CSS:
.myClass
{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
IE is the only browser that currently doesn't support it (until IE9 makes its launch). But until then you can use this script: DD Roundies. This is a script that will round the corners in IE, with a little bit of setting up. There is another one here at Curvy Corners which looks for the webkit rule and adds them to IE as well.