I have the following markup on a page and unfortunately I do not have direct access to it. . This page is opened in an iframe. There is other code on the page but it is not relevant so I have not posted it.
The only access to target the code in via css.
I want to not display the close button so I added this to the css file
img[alt='Close'] {display:none !important;}
this is the markup
<td align="center"><a href='javascript:window.close()'><img src='v/vspfiles/templates/100/images/buttons/btn_close.gif' alt='Close' border=0></a></td>
It works as expected in all browsers that i have tested (firefox, Opera, Safari) but in IE8 it seems to ignore this css and shows the button. Not sure if it doesn't like the selector or perhaps I have a syntax error.
Not sure where to go from here.
IE8 supports Attribute Selectors, but only when the page is setup for "standards-compliant mode". The following provides more information:
http://msdn.microsoft.com/en-us/library/aa770069.aspx [Read the Remarks Section]
http://msdn.microsoft.com/en-us/library/cc288325.aspx
Also the following link tells you what DTD turns standards compliance mode "on" in IE8
http://msdn.microsoft.com/en-us/library/ms535242.aspx [Scroll to the table]
Related
I'm debugging a style problem in Internet Explorer 9.
It look's like ie9 doesn't apply all style rules defined in my css file. As I look in the network tab of Developer Tools, I see for example the '.mobileMenu' class present.
But the style is not applied to the element, if I use 'Inspect element', the browser simply doesn't know about any related style rules. A large portion of the css file (but not all of it) is simply ignored by ie9.
It works in Chrome, Firefox and IE 10. There are a couple of CSS validation errors, but none that look really troubling.
My guess, which is a guess, is that perhaps some stylesheet property (CSS3?) is causing ie9 to stop rendering and skip the rest of the file. Is that possible?
Anyone any experience?
Thanks !
In the end, it had nothing to do with CSS3.
Ie9 did stop rendering, not because of anything in the css file itself, but because the style sheet was to large..
According to Microsoft:
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
We split the Style Sheet into two seperate files and the problem was resolved.
Some CSS3 properties are not accepted by IE9. See this page for which browsers support which properties.
If the CSS3 properties are not support by IE9, you can try using a plugin like:CSS3PIE
So, I've tried everything I can think of, or have found regarding how to make sure that IE 8 will work with the 'content' property in my page.
No matter what I try though, when viewing in IE9 using F12 dev tools to view in IE8 standards mode, the page simply won't load AT ALL. I get a "page error" when viewing in Adobe's browser tester as well.
As soon as I remove my "content" property line from my css, then it works fine, but of course, then I lose my cool drop-shadows that I'm wanting to use in all the other browsers.
here's the page: http://saks-jewelers.com (the featured product section towards the bottom).
Any thoughts on what I'm missing? (this site is run using magento CE 1.7)
The content property will not work in IE8 unless you specify a doctype. This is according to W3C.
Put this at the top of your code and let us know if it works:
<!DOCTYPE html>
Both people on IE8 are going to be disappointed! Did you try checking the inspect element in ie8 to see if the error is more specific?
Is your drop-shadow defined in the last CSS loaded?
curved css corners for some reason dont seem to work in IE9. I know it supports it however i have looked all over the web for a solution and cant find one that works for me. I tried putting <meta http-equiv="X-UA-Compatible" content="IE=9" /> but that did'nt work. I used the .htc file and behavior: url(border-radius.htc); however that only works sometimes when switching to compatibility mode. I even tried declairing all 4 values, and didnt make a diffrence. Work beautifuly in firefox, chrome, and safari but not in IE. Any help? Check it out: my web page If you have some debugging tool might help you help me.
I found if your using the CSS style filter for IE8 and below browsers it will interfere with IE9 styles causing border-radius to not work and possible other ill effects.
To fix it add this to your html head:
<!--[if gte IE 9]>
<style type="text/css">.elementClass { filter: none !important; }</style>
<![endif]-->'
Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag.
Detail explanation here Investigating Document Mode Issues
Use the vendor extensions, -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;
You really only need the -ms version for what you want, but if you include them all you provide a broader spectrum of coverage.
I found that my border radius in ie9 is working on localhost but not on a server. Im using css3PIE to acomidate ie8 and below, would this be interfering with ie9?
IE9 don't need any prefix for border-radius (for sure you don't need -ms- prefix at least for this property!). Your browser probably have a problem. Maybe you're running beta or something like that.
Please test this demo in another IE9 running computer or have your IE restarted and try it to see IE9 renders border-radius just fine.
Quirks mode is where IE9 switches back to IE5 functionality
(added following link to #seanmetzgar post also)
Detail explanation here Investigating Document Mode Issues
With a site I look after, which had ASP code right at the top of page, I added
<!DOCTYPE html>
just in front of the tag, below the code, and IE9 stopped going into Quirks Mode.
I'm working with a custom app that doesn't allow classes to be applied to the tag and the original CSS we were working with uses this methodology. Instead, the app requires an individual CSS file for each browser (lame, I know).
Our company has a sample page that has the working code applied with browser specific overrides placed on the HTML tag. So, what I'd like to do is load up the page in each version of IE and see what specific CSS is actually applied, then just upload each CSS file to the app. Does anyone know a tool that will do that?
Note, I did find this: How can I see which styles in my stylesheet are actually being applied to the current page?
But the answers were for firefox. :(
If you press F12 in Internet Explorer it will bring up Developer Tools.
From here you can inspect the HTML/CSS and see the specific CSS rules applied.
With these tools you can then change the browser mode Internet Explorer runs in e.g. If you are using IE9 you can set it to run in IE9 Compatibility Mode, IE9, IE8, IE7.
You can also change the document mode IE9 Standards, IE8 Standards, IE7 Standards and Quirks mode.
EDIT : You could try http://unused-css.com/
I'm debugging a site that has problems with element positioning when printing (I have a separate print.css file linked by a link element with the media="print" attribute). This problem only occurs in IE7 and IE8.
What I'm looking for is a way to view the page using the print media type, but while still having IE8's developer tools available to view element details and edit in real-time, etc.
The function I'm looking for would be similar to the "Display CSS by Media Type" feature in Chris Pederick's Web Developer Extension for Firefox. (But this problem doesn't occur in firefox...nor in safari, or even in IE6.)
Why not just assign the screen attribute to the print stylesheet for your debugging session (and remove the screen version or swap the media attributes)?
What I have always done, is I have disabled (commented out the "screen" style sheet) and converted the media="print" style sheet to be media="screen". Only way I know how with out printing a bunch of test pages.
i've always used print preview, never had a problem with it. just open it up in IE; i'd target it with conditionals, but "hacks" work just as well.
you're seeing differences....what media attributes do your other link elements have? if you have one for all, switch it to type="screen, projection">