338 posts
  • Has been part of the Envato Community for over 4 years
  • Located in United Kingdom
  • Made it to the Authors' Hall of Fame
  • Sells items exclusively on Envato Market
+3 more
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
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+6 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 :)

258 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
BuchmannDesign says

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

338 posts
  • Has been part of the Envato Community for over 4 years
  • Located in United Kingdom
  • Made it to the Authors' Hall of Fame
  • Sells items exclusively on Envato Market
+3 more
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 :)

138 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
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
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
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
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
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
  • Has been part of the Envato Community for over 4 years
  • Has sold $100+ on Envato Market
  • Located in Canada
  • Has collected 1+ items on Envato Market
+1 more
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.

338 posts
  • Has been part of the Envato Community for over 4 years
  • Located in United Kingdom
  • Made it to the Authors' Hall of Fame
  • Sells items exclusively on Envato Market
+3 more
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?

138 posts
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by