I am using two classes like as class:before and class:after for rounded corner purpose in IE7, but its not working in IE7. Could you please help me?
.round:before{backgourn:url(top-bg.png) no.repeat top left;}
.round:after{backgournd:url(btm-bg.png) no.repeat bottom left;}`
The :before and :after pseudo-element selectors are not supported in IE7.
See this reference for more on browser support.
Use this http://jquery.lukelutman.com/plugins/pseudo/
Check this:
http://my.opera.com/SublimeYe/blog/2011/07/01/addiing-before-after-and-other-elements-in-ie-with-expression
Setting styles with .selector .before and .selector .after for IE7
.round{
zoom:expression(runtimeStyle.zoom = 1, insertAdjacentHTML('', '<div class="before"></div>'), insertAdjacentHTML('', '<div class="after"></div>'));
}
.round .before{backgourn:url(top-bg.png) no-repeat top left;}
.round .after{backgournd:url(btm-bg.png) no-repeat bottom left;}
these tags are not working in less than IE9.write a separate style for less than IE9.
Method of displaying text or images before or after the given element's contents using the :before and :after pseudo-elements supports till : IE8
For rounded corner purposes you can use the PIE.htc for IE versions.
PIE supports Internet Explorer 6-9 capable of rendering all kind of the most useful CSS3 decoration features with this PIE.htc file.
Here is the dummy CSS for your IE Solution.
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc);
for more details about the PIE you can the read the article..... http://css3pie.com/
I hope this will help you.
Related
My problem:I have a link with display block. Everything goes well on IE9. But when I add a filter in order to obtain a gradient, the cursor only has the hand on the border and on the text, not on the rest of the box.
I have test my code in jsfiddle
May I have done something wrong ?
My code will work on all browsers and versions. I just have delete code for other browser in order to be much clear.
filter works "better" for IE8.
But for IE9 i would raccomend SVG gradients.
Here you can find Microsoft's official SVG gradient background maker
You'll obtain something like this:
/* SVG as background image (IE9/Chrome/Safari/Opera) */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc);
And you can add it to your rule this way:
a {
padding: 3px 5px;
margin:5px;
display:block;
border:1px solid #000;
background:#FAFAFA; /* fallback for browsers not supporting gradients */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */
background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */
}
Then, with conditional comments you can target IE8 again:
.ie8 a {
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
}
Anyway, i suggest you to google for "Visual CSS tool" for a complete cross-browser code.
You're using only -moz-linear-gradient and it works just for older version of Firefox Mozilla.
For IE9 you can also use CSS3: linear-gradient: { ... }
For older versions of Chrome and Safari you should use -webkit-linear-gradient and for Opera -o-linear-gradient and -ms- for IE (but not everything works fine with it).
One solution is to wrap your a in another div and apply your background properties on it instead of on the a;
<div class = "container">Glee is awesome!</div>
CSS:
.container {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
border: 1px solid #000;
padding: 3px 5px;
margin: 5px;
}
a {
display: block;
}
Here's a little demo: little link.
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
Working on my home page where I'm cycling through some images using JQuery's fadeIn and fadeOut methods.
The images have a border of 2px and a radius of 14px applied.
As you can see, the corners of the image are overlapping the border.
This behavior only happens in Safari and Chrome, not in Firefox and IE.
Anyone have any idea as to why?
You can see this behavior here:
http://www.findyourgeek.com/index-copy.php
Thanks.
Support for border-radius on images in Chrome/Safari (or rather Webkit) seems to be a bit buggy
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
The above post is from earlier in the year (~Chrome ver 10) when the support for border-radius on images wasn't working. Support is available know but like you're seeing it still has some issues. You may want to report the bug you're seeing to the Webkit/Chrome/Safari projects. I know there was a fairly easy to find bug reporting page for Chromium, not sure about the other two.
Here are two ideas for workarounds:
you can apply sort of a CSS3 hack by removing the 2px border and setting a 2px stroke box-shadow (box-shadow:0 0 0 2px #606060;). This would have a few drawbacks as it's only a fix for Chrome/Safari example jsfiddle
or of course the other option is to edit the photos to give them rounded corners (http://www.roundpic.com/ is a good site for this)
try removing the border styling from the image itself and adding it to #content #topStoriesTest
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}
I have the following CSS class defined:
.box .login {
border: 0;
float: right;
clear: both;
height: 48px;
background: url(../images/submitr.gif) no-repeat right;
line-height: 20px;
padding: 12px 42px 16px 23px;
margin: 8px 22px;
color: #FFF;
font-weight: bold;
}
The multiple background are working perfectly on Chrome, Firefox, Opera, Safari, and IE9. However, they're not working on IE8. Does anyone know why that is?
(if I only have one background, it DOES work on IE8. It's when I start introducing those other backgrounds that it starts to flip out.)
Thanks for the help! I really appreciate it :)
Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)
Well, I'm a tad late I guess, but there are ways to have multipe backgrounds with CSS2.1 which work in IE8:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Internet Explorer 8 doesn't support CSS 3 multiple backgrounds.
My css is not working with Iexplorer, can someone explain me why this isn't working?
The HTML
<div class="myBox"> Content <div>
The CSS:
.myBox {
margin: 0.0in auto;
color: #FFF;
width: 450px;
height:450px;
padding: 12px;
text-align: left;
background-color: #444141;
border: 0px solid #4e4b4b;
/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.myBox h2 {
color:#f57f20
}
IE doesn't support CSS3 rounded corners, I'd suggest a fallback to using PNG images.
Just use the CSS3 property border-radius. Sure, it probably won't work until IE9, which goes back to the age old question...
Do web sites need to look exactly the same in every browser?
You should use htc file to curve corners in IE6+. In IE9 the CSS3 declarations will work. How to use htc file to curve corners you can find here http://starikovs.com/2010/08/24/css3-rounded-corners/.
Because IE does not support custom Mozilla or WebKit properties.
An option could have been using CSS3 browser-independent round corner properties, but it is not yet widely implemented across major browsers. So for now you'll have to stick to images if you want cross-browser compatibility or function with JavaScript disabled.