Oh the fun we have working on so many different projects! Today I had to put a style on the actual embedded object since the div around it didn’t work out for it. Obviously, it couldn’t be as easy as it sounds so I thought I would pass on my workarounds for all of you. The following code assumes you are using the conditional IE CSS code from our blog at https://www.corephp.com/blog/easy-ie-conditional-css-with-no-hacks/
For the most part, it’s pretty straight forward to style an object. For my example I will be putting an orange border around the object. I start with common sense by using:
.wrapping_div object {
   border: solid 2px #fe7600;
   display: block;
}
NOTE: It’s important to have the display:block in the code for Firefox & IE to wrap the border all the way around the object. Safari wrapped it fine without it.
This worked well for standards compliant browsers, but then there’s IE to deal with. IE doesn’t seem to see the object, instead it creates EMBED instead, so I tried the following code:
#ie .wrapping_div embed {
   border: solid 2px #fe7600;
   display: block;
}
Wow! It worked!!! But wait… IE8 now has borders on both the object AND the embed. Not good! Let’s fix that:
#ie8 .wrapping_div object {
   border: none;
}
I believe we now have a winner! This has been checked in IE6-8, Firefox on Mac and PC, Safari, Chrome and the latest Opera and it all looks the same. Amazing!
