How to resolve CSS conflict within one HTML document?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • minotto3
    New Member
    • Oct 2015
    • 3
    #1

    How to resolve CSS conflict within one HTML document?

    I'm not sure if this is the problem but i'm assuming it is since the problem occurred only after adding the CSS and JS in the head section of an HTML page.

    The page has 4 html embedded audio players which looked as styled and worked fine.
    I then added a slide player called Fancy Box. The CSS and JS files are linked to a separate folder than the CSS and JS files of the audio player.

    The audio players continue to work fine however, the style attributes no longer show up, instead the browser’s audio player shows. Fancy Box works fine.

    Is there a CSS or JS conflict of some sort?

    One other thing i noticed. By placing the code for the audio player after the Slide Show, the CSS for the audio players show up, but the Slide Show does not play.
    Last edited by minotto3; Oct 2 '15, 07:29 PM. Reason: clarification
    Tags: None
    • CSShunter
      New Member
      • Oct 2015
      • 5
      #2
      Hi minotto3,
      That the CSS and scripts for the slide player and the audio player are in separate folders doesn't have influence: in the page everything is combined by the browser.

      I think it will be indeed a CSS conflict: maybe caused by conflicting CSS priorities, maybe by the use of the same CSS class names, or maybe triggered by a javascript.
      And I guess your next question will be: what is the solution? ;-)
      - That's impossible to say without any code ...
      • Do you have or can you put a test page online, so we can see the page structure and all CSS and javascripts?

        Comment

        • minotto3
          New Member
          • Oct 2015
          • 3
          #3
          Thanks for your response CSShunter.

          You can see a live page at http://minotto.design/musica/musica.html.

          The links to CSS for the audio player:
          http://minotto.design/musica/css/styles.css


          CSS for slide player:
          http://minotto.design/source/jquery.fancybox.css

          http://minotto.design/source/helpers/jquery.fancybox-thumbs.css


          Links to JavaScript for audio player:
          http://minotto.design/musica/js/jquery-1.10.2.min.js

          http://minotto.design/musica/js/mediaelement-and-player.min.js


          JS for slide player:
          http://minotto.design/musica/js/jquery-1.10.2.min.js


          http://minotto.design/source/jquery.fancybox.js?v=2.1.5

          http://minotto.design/source/helpers/jquery.fancybox-thumbs.js


          Thanks.
          Last edited by minotto3; Oct 4 '15, 06:22 PM. Reason: clarification

            Comment

            • CSShunter
              New Member
              • Oct 2015
              • 5
              #4
              Hi again!
              Investigations take time ...
              It appears there are some issues that influence each other.
              Here some suggestions:
              • Javascript in the <head> is prohibiting the rendering of a page, as it is blocking the download of all needed items (css, images etc.) during the js-download. So all scripts go to the end of the page, just before the </body></html>. That doesn't harm, for javascript can only work if all other things are aboard.

              • The jquery-1.10.2.min.js file is called twice; one can be missed. That will be good for the page speed as well.

              • The <style type="text/css"> codes in the head have comment tags <!-- and --> inside (and one --> end tag is missing, good for a browser hiccup). Can be it's done by Dreamweaver, but these tags were for old browsers, which nobody is using anymore. So they can be deleted.

              • If you place your custom styles before the links to the external stylesheets, then the external files can overrule your changes. So first the links, then your adaptations (in this case I see no troubles, but better safe than sorry). -- Correction: with my added styles it's important to do this.

              • The scripts for the 3 MM_... functions can be missed (they aren't used); again a Dreamweaver residue from long ago.

              • The same function for the mediaplayer is called 3 times; 2 can be missed.

              • These functions didn't have the "document ready" wrapper, so it was called before some elements were in the html: script error, and no media player!

              • In fact the page has the wrong DOCtype. That is set as XHTML-transitional, while the <audio> tag needs the html5 doctype. But when you change the doctype for html5, then about 180 protests/errors appear if tested with the html-validator (https://validator.w3.org/nu/). Due to the use of tables for layout instead of proper css styling ... But as far as I can see (on desktop), happily the browsers don't protest against the wrong DOCtype: Firefox, Chrome, Internet Explorer (11) and Opera perform fine.

              • Then I should like a clear layout distinction for the audio players ("call for action"!) with some extra styling.

              • For my eyes the fancybox strip of CD Artwork is not so clear: is seems to be one big strip. I should give the thumbs some space, and a bit (hoverable) border.

              • And as bonus: I discovered a small script for hiding the tooltips (with the strange html-code in it) of the fancybox thumbs (at http://spigotdesign.com/hide-title-a...r-dont-remove/). When enlarged, the titles re-appear as captions for the big ones.


              To much talking? ;-)

              All together:

              BTW: O yes, I like the musical capriccio of things as Felini's Pickup Truck! (Fellini?)
              Last edited by CSShunter; Oct 5 '15, 03:42 AM. Reason: correction

                Comment

                • minotto3
                  New Member
                  • Oct 2015
                  • 3
                  #5
                  Wow CSShunter! Thanks so much. I didn't expect to be able to resolve this and you did it so effortlessly. I can't thank you enough.

                  I spent so many hours pulling my hair out over this one thing. I'm convinced that i should've hired a real designer instead of trying to do it on my own.

                  Anyway, I thank you once again.

                  And here is Felini's Pickup Truck and Dance of the Bouncing Hornballs by the primeTime sublime Community ORchestra that you can download.

                    Comment

                    Previous template Next
                    Working...