Grow your CSS skills. Land your dream job.

Cross Browser Woes – Transparent Popup Windows

  • # March 27, 2014 at 9:29 am

    Hi All,

    Our site was designed about 5 years ago and targeted IE6 and 7. The CSS was written by someone with lots of Microsoft-centric experience and little else. As you can imagine, our site doesn’t play well at all with other browsers.

    One of the main problems is tables appearing with only one column. I managed to discover IE’s non-standard way of handling display: block styles and fixed it by removing the display style from table cells.

    The other issue is that our pop-up windows appear correctly in IE but are transparent in other browsers. Playing around with a page in development mode, (in Safari), I found that removing the float: left style on the <div> that represents the window removes the transparency. Not intuitive at all, to say the least!
    Certainly, there must be some other interaction taking place that is affecting the pop-up but this is the only attribute I could change in dev mode that had the desired affect. But darned if I can discover it.

    Are there any known cross-browser incompatibilities that could lead to this behavior? I realize that a lot more detail may be necessary to really fix the issue but I’m really just asking for a general principle that may not be obvious to non-experts.

    Thanks!

    # March 27, 2014 at 9:57 am

    Without seeing the site it’s going to be hard to help.

    I found that removing the float: left style on the div that represents the window removes the transparency.

    Can’t say I was aware of this and, if true, it’s an odd interaction.

    # March 28, 2014 at 4:07 am

    I found that removing the float: left style on the
    div that represents the window removes the transparency.

    It may be that by floating an element you inadvertently collapsed a non floated parent element and therefore the parent’s background would not show at all.

    That’s just a guess of course without seeing the site in question :)

    # March 28, 2014 at 10:23 am

    Thanks for the answers guys. I figured it was complex enough a situation that there wasn’t an easy answer but thought by some miracle, others had run across a similar situation.
    The site is a proprietary enterprise application and isn’t available outside an internal network so unfortunately I can only go by generalities.

    Thanks again.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".