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.
Related
I'm trying to finish this site http://jolaga.laohost.net/topsleva/. Almost all looks good in all normal browsers. But IE8 looks like in mobile mode - all containers are 100% width.
Respond.js and html5shiv.js are included. Meta is in head section. I don't know what else should I do ? For sure IE ignores media queries - but I didn't figure out why.
shot in the dark, because i don't have ie7/8 installed at the moment, but here goes:
offhand, it looks like you are targeting less than ie9, so here ie7/8, with ie7.css.
i never use bootstrap, but i'm assuming you are using the regular repo, and not one you've tweaked on your own.
if thats the case, i'm positive that style sheet is only for ie7, and that is why ie8 is all busted up.
you have two options here:
1) get rid of existing conditional comments. create a style sheet for ie8 and place it inside its own conditional comments targeting ie8 and only ie8/
keep the existing ie7.css style sheet and wrap it up in its own set of conditional comments targeting itself.
<!--[if lt IE 9]>
<script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type='text/javascript' src="js/respond.js"></script>
<![endif]-->
<!--[if IE 8]>
<link href="/css/bootstrap-ie8.css" rel="stylesheet">
<![endif]-->
<!--[if IE 7]>
<link href="/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
2). keep ie7.css, create new styles for ie8 within ie7.css file, but you have to target one of the ie versions with a hack, specific to that version. you can read all about it, and view examples here:
http://www.impressivewebs.com/ie7-ie8-css-hacks/
Solved. The problem was that bootstrap css was before custom styles. I swapped them and everything works like charm
The css top or margin-top values in chrome is so different with firefox and opera,what should I do?
For example in chrome when I put (top:0px;) my menu is in its right place,but in firefox I have to put (top:-80px;).
What should I do?please help;Thanks in advance.
and also firebug doesn't have any errors.
Sorry I couldn't post a jsfiddle link because the site contains lots of pictures and I reaaly wanted to post pictures so that you can understand what I mean better,I tried but I needed 10 reputation but I have only 8.
You need to reset all the styling that a browser applies, then it will only apply your styling, instead of adding it's own aswell. To do this include a redet style sheet such as Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
I am compiling several stylesheets into one min stylesheet in a staging environment The styles are applied locally in IE where each stylesheet is separate, but they are not being applied in the staging environment in IE where the stylesheets are compiled into one min stylesheet. I have run the stylesheets through a CSS validator and have gone through each stylesheet and corrected any syntax errors that I found. I don't necessarily need to know how to solve the problem, I mainly want to know where the problem exists. The IE developer tools aren't giving me any feedback related to the problem of styles not being applied.
Here is a link to the login page in the staging environment: https://s-app.joinhere.com/manage/sessions/new. The styles are in the stylesheet, they just aren't being applied in IE. Here's a link to the compiled min stylesheet: https://staging.joinhere.com/assets/manage-d4f70cefc93b170b5f2a04509db697c8.css
Thanks!
I tried your page, and it works fine in Chrome. However it looks weird in IE9, as if the CSS styles are not being applied, just as you described. For example, the style body#manage-sessions #main_container #login_container is not getting applied. I looked at the css tab in the developer tools, and it turns out the style is not even there, which explains how it is not working. To find out why, I used the networks inspector from the developer tool and examined the response when IE9 is downloading the css, and the style body#manage-sessions #main_container #login_container is indeed in the response. This lead me to believe that there must be some limit on the max css file size for IE. It appears that this is indeed the case as described here. Apparently IE simply ignores additional styles if the css file gets past a certain size. So this explains why everything works when the css files are separate, and why things fall apart after you combine them. To solve the problem try splitting up your large css file into 2 or more smaller ones that fall under the IE limit, and see if this corrects the problem.
I'm not sure about your personal setup, however, anything < IE 10 can only handle 32 individual stylesheets, anything after will still show up in the Dev tools like its working but rest assured, the 33 stylesheet is committed to a life of silent failure.
I'm having an issue with a WordPress theme project I'm working on (the theme is based on the Roots Theme for WordPress).
I'm having trouble controlling the font color of the main navigation sub-menus: but only in IE8. The font appears to be the same color as the background for the submenu, making it invisible to the user. Oddly, this issue only happens in IE8, and doesn't happen in chrome, firefox, IE7 or IE9.
The site is http://precisionmfgmn.com, to see the error try hovering over the "companies" link on the main navigation.
Here are some details that may be relevant:
I am using cufon font replacement.
Any ideas?
It looks like cufon is using canvas with IE8 and not IE7. IE8 doesn't seem to support it but IE9 does. Here is 2 possible solutions :
- modify the source code of the module, if the browser is IE8 then it should not use canvas
- force the IE7 compatibility view, you can do that by adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
in your template file
The first solution is probably the best but the second is easier.
hmm very odd, Cufon is usually pretty universal with the way it displays, I have used it before and not had a problem. Do you have any style sheets on Wordpress that are browser specific ?, I know they have them on Joomla, but not sure if they have them on Wordpress or not. If there is, one of those may be applying a slightly different style to IE8 that is breaking Cufon somehow, if there is a IE specific stylesheet try renaming it to temp remove it, to see if it makes any difference.
I have just taken a look at it with IE9 in IE8 compatibility mode and cant see a problem with it ?, have you tried clearing your browser cache and reloading the page ?, it might have cached previous changes you have made, so the text is showing an old version.
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)