327 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United Kingdom
PaulWinslow says

I’m just very curious as to how you personally go about making your CSS compatible with IE7 /8 :)

I have to admit I’ve never been the most patient developer when it comes to supporting 7 & 8 and I would love to improve my work in this area, maybe pick up on some easier techniques. I’ve seen some very solid compatiblity in some themes here lately and I think I/we could learn from sharing our techniques in this thread.

And the reason I’m so curious is that after having a little snoop under the hood of a few solid author’s work here, most of the time I don’t see any conditional comments for IE or even any seperate stylesheets/javascripts – so I’m left wondering what these guys have done to have their layouts stand so tall and proud in 7 & 8.

I tested Dean Edwards’ IE7 .js project yesterday (http://code.google.com/p/ie7-js/) but it didn’t seem to have any affect whatsoever when testing on my new theme, but it really got me interested and I’d love to hear of any scripts similar to this or even people using this one who managed to get it working lol.

Please note: This is not me asking for help – it’s simply a thread to share your personal methods that may benefit others :)

381 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • Most Wanted Bounty Winner
  • Has been a member for 4-5 years
  • Referred between 500 and 999 users
  • Bought between 10 and 49 items
+1 more
redfactory says

I use the $is_IE within wordpress to disable or enable certain area’s in my code.

For styling I use css3pie: http://css3pie.com/ This will enable you to use rounded corners, gradients and shadows in IE. Be careful though, this can make your website quite slow!

Another one is the well know html conditional statement, like this:

<!--[if lte IE 8]>
css stuff for IE8 and lower
<![endif]-->

Another very handy method is adding special class to your body tag:

<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if IE 8]> <body class="ie8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
</body>

This way you can give special styles to elements for IE, all in one css file:

#header {
    margin-left: 20px;
    color: #fff;
    background: #000;
}
.ie7 #header {
    margin-left: 50px;
}

Hope this helps :)

255 posts
  • Bought between 10 and 49 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 250 000 and 1 000 000 dollars
  • United States
BuchmannDesign says

I didn’t know about $is_IE, or the conditional Body tag. Thanks for posting!

327 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United Kingdom
PaulWinslow says

I didn’t know about $is_IE, or the conditional Body tag. Thanks for posting!

That’s exactly why I wanted to make the thread :)

136 posts
  • Sold between 50 000 and 100 000 dollars
  • Referred between 50 and 99 users
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • United Kingdom
ThemeShaper says

Modernizr:

http://www.modernizr.com/

Start from a base layout that you know works cross browser, then as you start adding whistles and bells you can assign different styles for those things that dont work in ie7 and ie8 without having to use conditionals.

1148 posts
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • United States
fillerspace says

Modernizr:

http://www.modernizr.com/

Start from a base layout that you know works cross browser, then as you start adding whistles and bells you can assign different styles for those things that dont work in ie7 and ie8 without having to use conditionals.

That’s what I use, in addition to classes for each browser

456 posts
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 100 and 1 000 dollars
  • United Kingdom
godonholiday says

Id like a few more tutorials on getting the most out of modernizer, i feel like I am using it to address one issue and maybe its overkill, or just the way I am using it? Any good setup tuts out there I missed?

70 posts
  • Bought between 1 and 9 items
  • Canada
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 100 and 1 000 dollars
lastrose says

I try to code in such a way as browser specific stylesheets are not required. It may not look the same in all browsers, but as long as it still looks good (it may not have all the bells and whistles, css3 transforms, shadows, gradients etc.) and is usable than I consider it a success.

You also have to look at who the target market is. IE 7 /8 (and 6*gasp) users are generally the uninformed and computer illiterate, and business people with draconic IT departments that refuse to upgrade to a modern browser because of X reason (if we install a better browser … ‘this software application may stop working’, or ’ it will launch all nukes’).

one thing I do frequently is set a color, and then override that color with a rgba value, as an example color:#000000; color:rgba(0,0,0,.50); because of the way style sheets work, it will first take the hex value, then it will try to take the rgba value, older browsers will not recognize it and so they will just display the hex value

I also use it in gradients background-color:#ff0000; background-image:linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.2)); this way a flat color will show on older browsers, and a gradient in modern ones, it also allows for faster and easier color changes.

327 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United Kingdom
PaulWinslow says

What about layout in IE specifically? When it comes to CSS3 gradients, rounded corners, etc I tend to just leave IE without all that stuff.. as long as the content is intact there shouldn’t be a problem.. but what about getting your layouts to work in 7&8?

136 posts
  • Sold between 50 000 and 100 000 dollars
  • Referred between 50 and 99 users
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • United Kingdom
ThemeShaper says

Id like a few more tutorials on getting the most out of modernizer, i feel like I am using it to address one issue and maybe its overkill, or just the way I am using it? Any good setup tuts out there I missed?

Maybe ;) – It seems more complicated than it is tho tbh. You just include it at the top of the page, then it places a list of classes depending on the browser capabilities.

for example, on my html template in ff3 it places:

<html class="flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths cufon-active cufon-ready" lang="en" style="visibility: visible;"> </html>

into the html tag. So for IE it would have no-multiplebgs, no-csscolumns, and all the fun juicy stuff as no-

you then can apply styles for those elements in the css: e.g.

#navigation{ place code for multiple bg's here } #navigation .no-multiplebgs {place code no multiple bg's here}

So in reality its simply just include the js, then create the styles for browsers that dont support the thing. (or the other way around if you prefer).

It wont help if you have basic layout issues, but it will help nicely if you plan on including some progressive enhancement css3 stuff. How useful it is depends on how much of the newfangled stuff you want to use.

by
by
by
by
by
by