I am using :before and :after but they are not showing in IE10 and below.
Here is the link to the site: wrdtempsite.com.au/da
When viewing dev tools (F12) all of the css is struck through... ?
Any help would be appreciated.
Thanks.
You may need to add empty CSS rule for :hover before adding rules for :before and :after
Check the below link, it deals with the same issue. hope it helps
::after on :hover does not work in IE
Why does IE10 require the presence of a p:hover {} rule for transitions to work on a pseudo element?
The issue was I had declared 0 0 no-repeat at the end; when I removed these it worked fine.
Thanks
Related
I am doing a site for my php class and have just about finished my project except for a weird floating issue in IE. I'm only floating left and right, but the site seems to be clearing left and not sure why IE is causing this issue. Any suggestions? http://ectweb.cs.depaul.edu/AHARDEN2/project/index.php
This is probably because IE8 and lower do not recognise tags such as <nav>, <section> and so on. Consequently they do not match your CSS selectors like nav ul li a {...}
Try rewriting your CSS to not use these tags in their selectors.
Side-note: IE9 works fine.
You could try adding a css reset like this one:
http://meyerweb.com/eric/tools/css/reset/
And an html5 shiv like this one:
http://code.google.com/p/html5shiv/
I am using css :target property but it is not working in IE8, is there any hack to make it work?
IE8 supports :before and :after - http://msdn.microsoft.com/en-us/library/cc304082(v=vs.85).aspx
Perhaps it is being overridden by something else?
According to http://www.w3schools.com/cssref/sel_after.asp a Doctype has to be declared on the page for the :after property to work. Does this help? Would also help if you posted code.
try using this at the start of HTML file. Then it supports :before, :after property.
<!DOCTYPE HTML>
:target property is CSS3 property. IE8 doesn't support most of CSS3 styles.
you can use .next() or .closet() method in jquery
for example
$(function() {
$('span').next().css('color','red');
})
<span>hiiii</span>
<p>byeee</p>
the red color apply on p tag
So I have built a website and I looked at it on internet explorer 7 and the menu bar is seriously misaligned. I looked into conditional comments and tried it out, and I don't know if I'm missing something. I put the conditional comment in the head tag of the website and then created a css style sheet just for ie7 and it didn't seem to do anything. Can someone tell me if there is a quick fix to this situation or a step by step to the conditional comment and custom stylesheet method? Any kind of help would be appreciated. Thanks. The website is here http://sgconstruction.org. The CSS involves a float of the page links to the left and a float right on the facebook and yelp icons within the blue bar. Both positions are relative. Thanks!
The issue involves the CSS you are using for your #connectguy <div>. This element is a block-level element which you have set to display: inline-block. Unfortunately, Internet Explorer 7 only recognizes inline-block on elements which are inline by default. You can work around this by setting the <div> to display: inline in your IE7 stylesheet.
check applying * before the css property you likes to apply for ie7 and below browsers only.
for eg:
#test {*color: #999; /*hack for IE7 and below*/
color: #F00;/*for all other browsers*/}
I tried to add an image using :before in css. It worked fine in firefox 4 but when I tested it in IE 7,it didn't display me anything..How can I solve this issue in IE7?
#vimal; :before is css2.1 property which is not supported by ie7.
Check these for more:
http://css-tricks.com/9189-browser-support-pseudo-elements/
http://www.quirksmode.org/css/contents.html
IE7 doesn't support the :before pseudo class.
There is nothing you can do with CSS alone to make it work. You could possibly use a background-image on the li element itself.
You could mimic it with JavaScript.
I have a hover effect in css. It works correctly in all other browser except in ie6.
The problem is if I give a link then the hover works in that page but if I take href from the page hover doesn't works, please help me.
You can't use :hover on anything not a link in IE 6.
Here is the quote from quirksmode:
IE 5/6 supports both only on links. IE 7 supports :hover, but not
:active, on all elements.
You can find that on this page.
Maybe you could use Whatever:hover: http://www.xs4all.nl/~peterned/csshover.html
Suckerfish is a tried-and-true IE6 fix for :hover
http://www.htmldog.com/articles/suckerfish/dropdowns/