I am working on this site and in IE the nav menu spans 2 lines:
http://www.sandiegolawfirm.com/
I would like to either remove the space on the left of bankruptcy or reduce the font size by a point or two in IE. Allowing all the departments to fit on one nav menu line.
I am actively trying to fix this but would appreciate help with figuring out the best way to get this done.
Thanks - Raleigh
One way fix changes specific to use styles that are specific to IE. Depending on which version you're trying to fix for there are different rules you can use.
For example:
Target ALL VERSIONS of IE
<!--[if IE]>
#any rules you like
<![endif]-->
Target everything EXCEPT IE
<!--[if !IE]><!-->
#any rules you like
<!--<![endif]-->
Target IE 7 ONLY
<!--[if IE 7]>
#any rules you like
<![endif]-->
Target IE 6 ONLY
<!--[if IE 6]>
#any rules you like
<![endif]-->
There's a tutorial here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I think adding something like
ul li:first-of-type a{
margin-left:-20px;
}
to the IE styles could work
It looks like you're trying to use custom fonts and getting unpredictable results in IE since "Gotham" isn't available. You could try using a Google webfont or upload a webfont to your server to at least get similar font sizes.
Related
I have one line of CSS to change on a couple of classes on a Wordpress site to make it backward compatible to IE9 (it is currently on a localhost site in development).
The CSS i need to turn off is just one line and where I'll change the opacity from 0 to 1 so the headings show in older IE versions - the transforms etc won't be recognised so these won't be an issue.
If I use a conditional comment, because it's only one line of CSS - can I use the following:
<!--[if IE 9]>
<style>
span, .animate3, .animate4 {opacity: 1!important;}
</style>
<![endif]-->
I can't seem to find any info about using the style tag after a conditional comment. It would seem easier than setting up a stylesheet for one line of code?
Any help ideas would be awesome
Paul.
Yes, the way you set it up is correct and can be implemented in the <head> of the document.
As mentioned in the MSDN Compatibility documents about conditional comments:
<!--[if expression]> HTML <![endif]-->
is the way to write it. Any HTML element inside can be written, so <style> is valid to use.
<!--[if IE 9]><style>body { background-color: red; }</style> <![endif]-->
Read more about conditional comments at MSDN or at Quirksmode (with some better examples).
I have a CSS-created form that is great in all browsers, screen sizes, etc. except IE 8. It is not important enough to keep messing with it, and I want to just hide it for users of IE 8. Is there a simple CSS attribute I can add?
You could add a class to the html if ie 8 like :
<!--[if IE 8]><html class="ie8"><![endif]-->
and then style it based on that.
Using conditional comments you can simply add a line of CSS to hide whatever element you need out of the way. Something like this should work:
<!--[if IE 8]>
<style>
#id {
display:none;
}
</style>
<![endif]-->
I've spent most of today trying to work out why the css on my site isn't working correctly in IE7. You can see the site at http://www.ecocamel.com
When you land on the product scroller page with the shower heads. .. everything is a mess, with mouseover popups partly showing without any mouseover, and products flowing out of the container to the right..
I tried adding overflow:hidden, and position:relative, which did fix quite a lot of it.. but it then caused the website to chop off part of the left / right arrows on other browsers...
SO I've removed everything for now. Just infuriating that it works perfectly on every other browser. How can I work out the best way of fixing it without impacting other browsers? I guess I can add the overflow:hidden / postion:relative stuff with a conditional IE7 statement so it doesn't impact other browsers.. but that still doesn't resolve things properly.
A good method is to use conditional comments.
You could use:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
In this cases extra classes are put on the html tag for you to style explicit for IE6/7/8
Like:
div {color:#ff00ff}
.ie7 div {color:#00ff00;}
In the case of using conditional IE7 statements, while it seems a crap way to do it, if that is the only alternative without re-writing your CSS then that is the best solution.
As GordonM has mentioned, it's hard for us to know what's going on without seeing the code. But as you're using position:relative, I may suggest trying to use z-index so that the popup's display on top of everything (like they should do).
As well as this, have you followed the CSS box model correctly? What I tend to do is write these basic statements when I create a div or p tag:
div {
float:left;
width:100%;
margin:10px;
}
This is cross browser compliant, as I used to work for an agency who wanted their websites to use just one CSS file for all browsers. It is possible to build a web page with HTML and CSS and make it work on every single browser (excluding IE6) without the use of conditional statements. But as I think you've come/coming to the end of development, you aren't in a position to re-write your CSS completely. So try the z-index idea first, then try applying the above code to any affected div.
Google "conditional css for IE" and you'll find a plethora of tutorials showing you how to create conditional CSS for only IE version x+ or specifically ie7.. even all browsers but IE. Most websites require some, if not a ton of IE tweaking. Also, look in to a reset.css to set all margins and paddings to 0 to help with consistency.
I need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->
in ASP.NET application, how to design the pages in such a way that they are displayed properly in both IE6 and IE8 browsers? I would like to minimise the CSS work that I need to do if there are any general guidelines to follow which will work in both browsers. I may still need to tweak here and there, but I want to reduce bulk of the work. Please let me know if there are any such guidelines.
Thanks in advance.
I have been coding a recent project and used the ie7.js script from http://code.google.com/p/ie7-js/. It works marvels at fixing IE 6 to a reasonable level. Then use this block to declare your body. (This part was ripped from html5boilerplate).
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
You can how polish up any stray css my using the respective id like this...
#ie6 .element{
//special stuff for ie6
}
The ie7.js script should save you quite a bit of time though.
If you add the following line to your section it will force compatibility mode and help minimize the amount of CSS you need to write:
<meta http-equiv="X-UA-Compatible" content="IE=100" />
However, you probably won't get it perfect without writing custom CSS rules.
Start by making sure that basic layout of your page is working cross-browser. This can be quite trick, but the good news is that other people already did the heavy lifting for you. Just google for "one column", "three column", "holy grail" or whatever layout your are aiming for and you will find plenty of articles describing how to achieve it in any browser you want.
Starting for there, my suggestion is to code for IE8 and add hacks for IE6 when required. This should keep the hacks at a minimum since CSS that works in IE8 usually also works for Chrome, Firefox and the other decent browser.
Don't try to make your site pixel perfect across all browser, this will only drive you insane. Let your website "degrade gracefully" on the older browser. IE6 users won't care if the site don't have rounded corners or gradients anyway.
Using javascript to simulate modern CSS features in older browser is also a good idea. But I don't recommend using the ieX.js scripts. These scripts require too much CPU to run and can make your site unresponsive if your HTML is heavy.