Announcement

Collapse
No announcement yet.

How to remove bg image from PopUp - CSS specificity?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    How to remove bg image from PopUp - CSS specificity?

    here is the site I am trying to correct

    Click any of the product sections, and click the 'more info' link and a Pop Up window appears containing full product details. At standard size, the Popup appears fine, but it someone maximises the browser window the pop up is in, they get the background image of the main page below where the content (in this case the spec of the product) of the pop up finishes.

    I have tried to fix this by giving the body of the Pop Up window an id="popup" in the page code and then specifying the following in the actinic.css

    .popup html,body {
    padding: 0px 0px 0px
    margin-left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    background-image: none;
    }

    However, in Safari and Firefox I can still see the background image below the content - any ideas how I could fix this?
    Tags: None
    #2
    Override the body tag in the extended info layout with inline CSS is one way. The css you say you have added i cannot see as the same, perhaps it needs a refresh to update. Having said that, opening them as a popup is madness anyway, why not open them in the same window and have seamless nav, popups opening and having to be closed (if allowed in first place) is really crap IMO. Add to that they have to be resized and you have a very annoying concoction going on.

    Comment

      #3
      Lee, I agree with the popups - I advised against it but sometimes you just have to give the customer what they want, if you know what I am saying.

      I'll try some inline CSS on the pop up page.

      Take it you just mean adding...

      <style type="text/css">
      <!--
      html,body {
      padding: 0px 0px 0px
      margin-left: 0;
      width: 100%;
      height: 100%;
      background: #FFFFFF;
      background-image: none;
      }
      -->
      </style>

      in the <head> section kind of thing?

      Comment

        #4
        That's what i would do yes, but i'd only have in the styles i wanted to get rid of or change, not all the other stuff. That still leaves me with one central place to style things then. Just the override stuff in other words.

        Comment

        Previous template Next
        Working...
        X