CSS masters please...

Out of context: Reply #16

  • Started
  • Last post
  • 27 Responses
  • evilpeacock0

    So... Safari/Webkit should be fine with web gradients and transparency — I've used those going back years. And your gradient works in Safari on the generator called out in your source: http://www.colorzilla.com/gradie…

    The gradient CSS declaration appears correct, but there is a white fill being applied to the content underneath it. If I remove all the gradient styles there is white above the video in Safari, so the gradient itself isn't the issue. More than likely a default fill is applied or there are z-index issues and you would need to clean up or get more specific with your CSS assignments, e.g. make sure that all other elements are transparent as well as the gradient. There is a white fill applied to the parent class ".vc_column-inner" that Chrome ignores, but Safari does not. That class is in one of the *13* stylesheets used (probably a Bootstrap default). If that's the only cause then this is a relatively easy CSS specitivity fix by overriding conflicting framework styles in your custom page styles.

    And you're applying styles on the same .contentbg element multiple times, overriding one gradient with another and there are lots of code errors here. One issue is that "//" isn't how you comment out CSS (that's Javascript). CSS comments are bracketed by "/*" and "*/".

    The code errors are enough to cause CSS parsing errors on the page which could mean that Safari might be showing the *true* result of your invalid syntax — not all browsers are as strict about this sort of thing, hence the continued need for "web standards". This is actually a good thing when one browser shows that you need to beef up your code to a higher standard.

    As you finalize your page you're going to want to clear up as much syntax validation as you can to eliminate display voodoo. I've fixed huge, expensive corporate web sites with a five minute validation process that flagged bad syntax causing a mis-parsed CSS declaration which in turn rendered the page badly on some browsers (while on a conference call with 15 or so engineers listening in). These days with all the automated code there is actually quite a lot of this sort of thing in CMS's and other off-the-shelf web systems.

    The CSS validation errors can be seen here: https://validator.w3.org/unicorn…

    evilpeacock 0Permalink
    UpvoteDownvote
    Flag
    • Thank you! :)mg33
    • lol its here: https://codepen.io/a…sted
    • you're using visual composer with applied styles. it is recommended to export these styles to external css and give proper selectors like you're doing withsted
    • contentbg.sted
    • so its easier to give it just a blank div and add the gradient bg to that with the proper z-index.sted
    • It's weird, when you reload the page in Safari, you can see the transparency working for a split second, then the white shows up, even w/out contentbg cssmg33
    • It's definitely something in the js.composer css! :) Now to just isolate whatever it is. When I kill all that CSS in inspector, the white bg goes away.mg33
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread