I have a ul/li based side menu, styled with two CSS rules, the following of them is ignored by IE8 Quirks mode, and I assume IE6:
ul { padding-left: 15px; }
I can reproduce the problem in FF by removing this rule completely. I have also tried using jQuery to apply the rule, with no change in IE8:
$("ul.menu-class").find("ul").css("padding-left", 15);
Is this a box model issue, and, how can I reduce the UL 'padding' in IE Quirks Mode?
Try margin-left for IE - browsers have a unique look on that matter.
Related
I have created a CSS rule that's being applied to a SPAN element residing within a TD element.
The rule is supposed to add content to the span. I'm using the :after selector for doing this.
So far so good. IE8 displays everything correctly. But with my IE10 I don't see the content added to the SPAN element.
Using Internet Explorer Development Tools (F12), I can see that both rules have been disabled by IE10:
What's causing this to happen? Why are these rules disabled? There are no overriding substitution rules defined in the stylesheet to do this.
Your help is appreciated.
Inserted elements are inline by default. Try setting it to inline-block.
I ran into a similar problem today with IE10 with an :after setting for an image. Turns out I had two errors; I didn't have <!DOCTYPE html> at the top of the file, and in Compatibility View Settings the Display intranet sites in Compatibility View option was checked. After I fixed my webpage and unchecked the value the page displayed as expected.
Here is the css I am using:
.foo:after {
content: url(images/foo.png);
position: relative;
top: 2px;
left: 8px;
}
I'm trying to have our Wordpress blog display a little better in IE8 and below (it works great in IE9, Firefox & Chrome). A big issue seems to be IE8's lack of support for negative margins, so the gap which we have between the posts column and the side widgets is non-existent in IE8.
URL: http://trekcore.com/blog
The CSS controlling that separation is here:
#secondary {
float:right;
width:300px;
margin-right:-320px;
}
Any help on suggestions for conditional CSS to fix this in IE8 and under would be most appreciated!
you should validate your html markups, 35 Errors and 11 warnings wont help.
in the meanwhile, try this fix :
.negative-margin-element {
zoom: 1; /* ie hax*/
position: relative; /* ie forced behavious*/
}
You are using HTML5 elements and IE8 does not understand them and will ignore them and you can't apply CSS to them because IE8 won't know they exist. To fix IE, you need to add the html5shiv. This will add those elements to IE8's DOM tree and set them to block level.
You can write your own code and CSS to do the same thing but the shiv is convenient.
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
http://www.streetstyles4all.co.uk/test4.html
Can anyone please advise. I have finished my menu now and it works in most browsers apart from IE9. The menu itself works but the drop down doesn't. The GENERAL and SHOP menu items should drop down and reveal many other sub menu items. Just not in IE9 :-(
Can anyone help?
The page in question is http://www.streetstyles4all.co.uk/test4.html
If you remove the filter property from the following rules:
#menu
#menu li:hover
then the display is fixed for IE9.
https://stackoverflow.com/a/6901105/637889 explains that you should probably be using -ms-filter for IE8+ (although clearly filter is still supported in IE9 as the gradient is working). Also see http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx for the newer syntax (as property values need quoting).
As an alternative you may want to explore the answers on IE9 Gradient using -ms for a more cross browser gradient solution, if you have not already seen it.
Lastly, may I also recommend Paul Irish's approach using Conditional Comments to including CSS rules for problematic (i.e. IE) browsers without cluttering the less problematic browsers.
i remove in your css stylesheet z-index two think
1. #menu li:hover (Remove z-index this )
2. #menu (remove z-index this )
#menu li:hover {
z-index: 5;}
#menu {
z-index: 11;
}
and now check to Your layout in IE
I want to style all my th elements the same (white text on black background) apart from a couple of usages where this formatting is not wanted - in which case I add a class of no-headers to the table element.
th {background-color: #000000; color:#FFF;}
table.no-headers th {color:inherit; background-color:inherit ;border:inherit; }
So here is some example markup if you needed some
<table><tr><th>This has a black bground</th></tr></table>
<table class="no-headers"><tr><th>This inherits bground from parent</th></tr></table>
This works fine in IE 8/9 and FF and Chrome but not in IE 7.
IE 7 just will not use the 2nd rule - despite it being more selective.
In fact I have tried all sorts to fix this problem - all to no avail.
I have tried adding the no-headers class on the th element too
th {background-color: #000000; color:#FFF;}
th.no-headers {color:inherit; background-color:inherit ;border:inherit; }
<table><tr><th class="no-headers">This inherits bground from parent</th></tr></table>
and even that doesn't work - I am left feeling like I am doing something really obviously stupid / wrong - but then again it works fine in other browsers!
Any help greatly appreciated.
IE7 does not recognize the inherit keyword (except on a few obscure properties).
Your best bet is to specify the default colors manually.
According to this SO post: IE7 CSS inheritance does not work IE didn't suport inherit until IE8. So you will have to specify the color, background, and border specifically.
IE7 does not support style inheriting. That was introduced in IE8.
See: IE7 CSS inheritance does not work
This is not a huge problem, since IE8 is a universal upgrade from IE7, unlike IE9, which is only available for Windows NT6 and above.