I tried with everything like proper style tags and all. but still site is not working in Firefox and IE
Link: http://webkurn.com/chrysler/index.html
Thanks a lot in advance
As per your CSS Statements they apply only on webkit-based browsers (Chrome, Safari, etc.). If you are pointing to a specific browser then you have to use webkit. Here you are making your queries to run on specific browser chrome or safari.
Try removing the webkit -webkit-min-device-pixel and check. Hope this help you
Most of the time, the problem is with the cache only if all the stylesheet tags are perfectly written. First try to remove your cache from your browsers of your website.Also, there are great tools like firebug(firefox) and inspect element tools(almost all browsers) which can be used to check the stylesheet file if it is updated or not.
Related
I'm working with WP website now and stuck with one problem.
The website is working fine in Chrome, Firefox, Safari, Opera and IE10, but in older IE versions (like IE9) it looks very strange. It seems that my custom CSS doesn't loaded properly. The interesting thing is that CSS styles partly applied to the website (icon font) but not styles which overrrides Foundation framework styles.
Maybe someone can explain me what I'm doing wrong and put me into right direction?
P.S. I'm not sure that it's important, but I based my WP theme on Foundation WP theme.
Thank you in advance!
Alex
have you tried adding this to the top of the head tag above the title tag to make sure IE uses the highest version in IE
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
also when viewing in IE are you checking the in the inspector (F12) making sure the Document Mode matches the Browser Mode so if your checking IE9.. you would
Browser Mode: IE9
Document Mode: IE9 Standards
The class .dl-menu is using the code:
opacity: 0;
Which is not very cross browser. You need to use a few versions for better support of opacity.
This is only the one point, and it looks like there may be others to me, but see if changing this helps you.
This page will explain the cross browser opacity properties well: http://css-tricks.com/snippets/css/cross-browser-opacity/
The problem appeared because the main CSS file was too large for IE8 and lower, and it just croped my CSS styles. I've broke it into 2 files and this fixed the problem :)
Thank you everyone who tried to help, and especially Spudley for pointing into right direction!
I am newbie to web development, in specific browser related css compatibility issues.
I have the following css in my home page, which works fine in Firefox, and I can see the css properties when I inspect the element using firebug. But the same css rules are missing when I use chrome. when I inspect, I can't even see the rules in chrome. I wonder why this happens. I understand that some css rules are browser dependent. But now am really confused by thinking how could I resolve this.
Please refer to this link to see my css rules.
Any suggestions regarding why and how this happens. Any useful link also will be appreciated.
Thanks in advance.
Try using a media query, selecting only webkit specific stuff such as:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Your CSS */
}
This query checks the device pixel ratio in webkit. Safari & Chrome are the only big browsers using webkit, so this will not affect FireFox or IE.
I am using conditional comments to apply different style-sheets for IE. This seems to work fine with IE7, but no matter what I try, I cannot get IE8 to load more than one stylesheet at a time. Both stylesheets appear as options in the Page -> Style menu and I can switch between them but IE8 will NOT apply both at the same time.
Example: http://www.davidapfel.com/booknow.html. I have applied a pink background in IE for testing purposes. IE7 displays the page as I intend it, but IE8 completely ignores the iefix.css and iefix2.css stylesheets. (I tried removing the conditional comments but that made no difference).
Thanks in advance for any clues
Edit: Just found that the same problem exists with IE9 - it also ignores the extra stylesheets.
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
Can you guys point out what I am doing wrong on with the navigation on this site? It works fine on webkit, but not firefox!
http://datatables.dyndns-web.com/
vs intended
The NAV-tag isn't a block-element by default in current versions of Presto, Trident and Gecko. Only WebKit has a default stylesheet for HTML5-elements included already. You should use a basic-/reset-CSS to format all HTML5-elements.
See: http://html5doctor.com/html-5-reset-stylesheet/
BTW, if someones asking for an image, you should upload an image of the desired result, not one of the broken view…