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.
Related
Having issues with aligning my button text across browsers. I've combed similar questions and have tried the suggestions but to no avail (display: inline-block for my hyperlinks, line-height: 1). There is too much headroom in firefox with my buttons (see homepage slider) and it looks just fine though in Chrome. Site is: jdd.meteor.com
*I was told this question was "off topic" when I tried to ask before. Please let me know what I can do to keep this question active if it is not on topic, whatever that means, so I can make changes.
Thanks!!
Screen captures (Chrome then Firefox):
#middle-section #slider .item .content hgroup a.call-to-action {
background: #820024;
color: white;
padding: 20px 30px;
letter-spacing: 0px;
font-size: 1.2em;
}
a {
color: #00aab5;
display: inline-block;
line-height: 1;
}
I had the same issue this morning, you need to define a height as well, that solved the problem for me, it looked great in Chrome but without height it looked squished in Firefox. Hope this helps.
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.
Being a web designer I hope to make websites that at least work in as many browsers as possible. I still try to design for IE 7 for those visitors only using IE and who don't know anything else. However I'm not too familiar id IE and it's spacing and it's hacks.
My website looks good, you can view it here, in every browser except IE. :s Thankfully it's only the footer now.
I'm hoping someone can give me advice and help me fix this hiccup and then maybe give me some references or articles about IE & it's spacing issues & hacks.
My footer doesn't work in either IE 7 or 8.
IE 7:
IE 8:
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; margin-top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89 !important; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
I've tried a bunch of different ways but I'm not sure whats happening in IE with this footer. If anyone can shed some light on what might be happening, it would be greatly appreciated!
you have an unclosed aside element for starters. if you view it in ie8 and use f12 developer tools you can see how the footer is now a child of the element. close that guy out....should help out.
I'm not sure of the root of the problem but instead of using "float: right;", using "position: absolute; right: -2px;" seems to solve the issue (also ensure #searchform has a relative position).
I believe this question has been asked a lot of times, and I have managed to overcome this problem before whenever it occurred. Just now, I feel stuck with it and can't find a proper solution to make it work in all browsers: it does work properly only in Firefox, while in IE and Safari its elements are somehow apart from each other. You can see the result here:
http://img813.imageshack.us/img813/8393/firefox.png
http://img812.imageshack.us/img812/8041/10990669.png
This is the code I use:
http://pastebin.com/n6KEjazp
Thank you very much in advance!
In addition to the padding misspelling (invalid CSS), those other browsers calculate the cell heights differently. In IE, the height is added to the padding.
Change this:
.top_menu {
background-image: url(images/header.png);
background-repeat: no-repeat;
height: 155px;
font-family: LilyUPC;
padding-left: 184px;
padding-top: 120px;
}
To this:
.top_menu {
background-image: url(images/header.png);
background-repeat: no-repeat;
font-family: LilyUPC;
padding: 120px 0 1em 184px;
}
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.