IE doesn't support CSS3 columns — no big deal, right? Even though, I'm trying to find any modernizr-like library to do the trick. I don't really want to code different CSS for IE, as that would be giving way too much care and attention to something we all despise. Any suggestions?
As of IE10, there is now native (and un-prefixed) support for CSS3 columns.
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Pragmatic Programmer's HTML5 and CSS3 book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQuery for IE.
Without seeing your code, I would suggest putting each column in a div. Then redefine the body tag after you load the stylesheet for IE only, and add the styles for the divs.
For IE only:
<!--[if IE]>
**** your styles ****
<![endif]-->
You could even take it a step further and move the body style into it's own style sheet and load the style sheet you need depending on the browser. It'll depend on how far you want to take it.
Try setting display: inline-table; on the items you want laid out as a table
Related
I have researched a lot regarding why my JSTree is renderering really badly in IE8, while working perfectly in Chrome. At least one of the problems is IE8's lack of support for the css-property background-size. I am using custom icons to represent folders and files. Each line in the tree structure has a height of 24px in IE8 , when it is 40 in chrome. The latter browser calculates the line height, by automatically wrapping around the icon size, using background-size: auto;. IE8 does not.
I've tried to implement lots of different solutions to make up for IE8's lacking functionality, like:
How do I make background-size work in IE?
IE 8: background-size fix
and the linked-to https://github.com/louisremi/background-size-polyfill
However, due to the complexity of the jstree, and it's default css-files, I am having a really hard time implementing any of these solutions into the existing code, as I am lacking the experience to fully understand the structure of the default.css.
What would be the correct course of action to make this work? I've also searched for compatible .css files for IE8, but found nothing.
An answer which confirms my fears of having to create my own .css from scratch, and understanding it completely, would also be very welcome. However, I would love a second opinion, before I invest the time to do that.
EDIT:
These are screenshots from my current situation:
Chrome has nice spacing, and visible chevron/arrows/expanding icons. Also, the font works.
IE8 has no auto-size, which makes the height 24px instead of 40px. Ive tried manually setting them to 40, but no luck. The lack of visual finesse does not bother me too much, but the lack of the arrow expanding icons are vital to my application's usability.
Working edits of the current theme, will be accepted as an answer. So will link to alternative themes that are compliant with IE8. Or anything that helps me understand how to fix the problem myself.
The best way is create a separate style sheet for IE8
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
there are many other things like in page like you need to add meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and one more thing please post some of your code in a fiddle so that we can better trace the actual cause of problem.
Update:
also check after adding this fix..
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
I hope this will add something positive.
Update:
After checking jsTree Demo I can conclude one more problem the jQuery Version.
If you are using jQuery v1.10.1 or later. that jQuery does not have support from older browsers like IE8 for that one must use v.1.9.1 which is the last version which supports IE8.
Try respond.js which made your ie8 browser to compatible for css3 pseudo elements and other stuff.
https://github.com/scottjehl/Respond/tree/master/src
I updated some of my CSS styles to use normalize.css recently but discovered an apparent inconsistency - it seems that in IE9 it won't let me set margins 0 around a checkbox element. But I couldn't find any specific mention of the problem. Here's an example of my test. And here's a screenshot of what it looks like in Firefox, Chrome and IE9
The reset styles are copy pasted from latest version of html5 boilerplate, which itself uses normalize.css by Nicolas Gallagher.
As I understood normalize.css, the idea is to keep some browser defaults but create a consistent layout for the components. However, from my quick testing, it looks like in fact there should not be a margin:0 around (checkbox/radio) inputs in order to create consistent layout, like so.
Having said that, smarter people than me worked on both normalize.css and html5 boilerplate, so either I'm missing something, or misunderstanding something.
IE9 adds padding. I guess that reset script doesn't take that into account. Add padding: 0 and you'll be set.
for my project I once rendered IE9 as IE8 by rendering it with meta tag of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
so the same css worked for both
I am having problems with my webpage. On all browsers the div aligns perfectly. However, on all versions of Internet Explorer the Div shows out of line. Here is an image of the difference:
Here is the page so that you can view the source:
Contact Page
I would really love the help, IE has done this to me several times. I would love to learn what to do in these types of situations. I read somewhere about an IE specific CSS file that would fix this but I did not fully understand what needed to be changed in this new CSS file. All help appreciated.
-Noah
Try fixing the issues presented by the W3 validator. http://validator.w3.org/check?uri=http%3A%2F%2Fkynikosdesign.com%2Fcontact.php&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1
You can add this and it should work (at least it did just through in-browser modifications)
after your normal css
<!--[if IE]>
<style type="text/css">
#mainbox{padding-left:0;}
#servicesright{float:left;}
</style>
<![endif]-->
That aside, you're also missing some closing tags it would seem and probably the reason for the weirdness.
Issues I detected on your page structure so far (which are causing the display issue):
#main-container should not have width
you are using table for your form layout which is a big mistake (it's pushing the whole content together down)
as a workaround removing width in (1) and width=100% in (2) will fix your problem butI highly recommend to follow good practices for your page layout. (i.e. using div instead of table).
I'm building a web site that uses a fair amount of drop shadows and gradients. I can accomplish a lot of this via CSS's box-shadow properties.
Alas, we're still supporting IE, so we need to add background images in those situations.
I could be lazy and just give everyone the background images, but I'm trying to streamline things for those that are using the modern browsers. Ideally, I'd like to have those users not have to request the images.
So, I'm adding an extra class via javascript if the browser supports the box shadow (box-shadowSupport) and my CSS ends up looking like this:
.box {
background: url('myImage.jpg');
}
.box-shadowSupport {
background: none;
[box shadow properties go here]
}
If the HTML ends up looking like this:
<div class="box box-shadowSupport"></div>
Will the image be requested? Or does the browser understand that it isn't needed due to the second style over-riding the background image property?
If the image is requested, I need to rearrange my CSS and javascript so instead of over-riding a style via the cascade, I'll have to swap out the classes so the first isn't even referenced in the HTML.
I believe every web browser will treat this in it's own way - as usual :) My suggestion is to use a web proxy like Charles and see, if the image has been requested or not. And of course, test this in the different browsers.
What you might want to consider is defining the IE specific styles in a separate sheet and loading it with conditional comments, like this:
<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
type="text/css" media="all" />
<![endif]-->
This will only load the sheet with IE-specific settings and you can override the other classes with !important markers. Conditional comments have been around since IE5, and any other browser will ignore the block above.
I would recommend just to skip the shadows in IE.
Most people use only one browser and they won't know that there have to be shadows. It isn't a big deal if the site looks different in different browsers as long they look normal (that means not glitchy).
Otherwise use with a if tag for ie specific css, and you can do drop-shadow there with:
.box {
filter: progid: DXImageTransform.Microsoft.dropShadow(
color=#818181,
offX=5, offY=5,
positive=true);
}
For more about that see here.
I am pretty sure that all modern browsers will load 'myImage.jpg'. Actually, the code you provided described the pure CSS way of preloading images without using javascript :)
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.