I currently have a ribbon effect on my headers but have only just discovered these are not supported in IE7 & 8. This is my code: .ribbon h1 {display: block; height: 18px; line-height: 1.3; width:855px; margin-left:5px; margin-top:0px; margin-bottom:15px; padding: 12px 10px; position: relative; left:-27px; top:5px; color:#fff; font: normal 11.5px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif; font-weight:bold; border-bottom: 1px solid #668823; background-image:url(../img/nav-bg.gif);} .ribbon h1:before,.ribbon h1:after, h3.widget-title:before, h3.widget-title:after { content: ''; display: block; width: 0; height: 0; position: absolute; bottom: -11px; z-index: -10; border: 5px solid; border-color: #242424 transparent transparent transparent;} .ribbon h1:before, h3.widget-title:before {left: 0;} .ribbon h1:after,h3.widget-title:after {right: 0;} Is there anything I can do to make this more presentable in the two older versions of windows. It doesn't have to be a ribbon but a box header would look much better that it does now. Not sure how I would target the older versions. Can anyone help??
IE8 should support your code as long as you have a complete <!DOCTYPE> statement to put it into Standards Compliance Mode, but IE7 doesn't support pseudo classes like :before and :after. By the same token, IE7 usage is down to less than 2% and so I wouldn't go to a lot of effort just for a special effect like this.
Uhm, sorry rainborick, but IE7 DOES support :before and :after, though it is a bit buggy (it depth sorts under the originating element ALWAYS). I'm not entirely sure what it is the OP is trying to do (given that CSS without the HTML it's applied to is gibberish), but I'm pretty sure there's some heavy duty nonsensical and pointless code in there. Of course it would be a lot easier to deal with if it wasn't re-re compressed into one illegible run-on line... bothered using condensed properties, was debugged so values like the padding were actually applied, removed the redundant/overlapping properties, actually had content to be genereated so it actually... uhm, did something, used font-size:1px on the generateds to get around IE's minimum size restriction, used a valid font-size (since half a px is gibberish), etc, etc... I actually get the odd feeling you're trying to use generated content to do border's job... but I'd have to see what it is you are trying to do to actually weigh in on the best way to fix it -- I'm just 99% sure this isn't it. I mean, absolutes are inherently block, so don't say that... why say 'normal' then 'bold' on the next statement? Why have line-height separate if you're declaring a condensed font property? why use relative positioning instead of just padding (or not padding) .ribbon? Could we see the CSS for .ribbon to make sure it's apo or relpo? One should REALLY avoid using padding or border same time as width if you care about older versions of IE... Not that I understand why the topmost heading under which all other headings is a subsection would be in a 'ribbon' either... or even what you mean by a 'ribbon' for that matter. (do you mean like that useless rubbish Microsoft pissed on the functionality of Office with?!?) Though you may have to suck it up and just use an image -- simple since it's a fixed width, and given the effect is monochrome it would probably be LESS bandwidth than the mess of code you're trying to use now. (seriously if a GIF or PNG to do that was more than 256 bytes I'd be shocked, and you've got almost 1k of CSS there!)