473,395 Members | 1,677 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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.
Oct 2 '15 #1
4 6282
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?
Oct 4 '15 #2
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?)
Oct 5 '15 #4
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.
Oct 5 '15 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

6
by: Mike Daniel | last post by:
I am attempting to use document.write(pageVar) that displays a new html page within a pop-up window and the popup is failing. Also note that pageVar is a complete HTML page containing other java...
2
by: gregl | last post by:
Anyone know how to obtain the true size of the html document's body? The control contains the size that the control was set to. The body object appears to contain the same size. That information...
0
by: purespam | last post by:
How can I dynamically add file links to a html document? I need to be able to click an image icon and the "Open file" box should pop up where I can select a document from my harddisk. The...
9
by: Yeah | last post by:
I have web document A which contains six links that all go to document B. However, all hyperlinks must go to a different location within that document (similar to anchors: A NAME= etc.). How do...
2
by: Filippo Bettinaglio | last post by:
Hi, I use, VS2005 C# I have a Windows Forms UserControl hosted within Internet Explorer According to MIcrosoft documentation: ...
2
by: csgraham74 | last post by:
Hi, I have a requirement in work that i give a person the ability to create a html document using a richt text editor. What i then want to do is save the HTML doct to my server & insert...
4
by: csgraham74 | last post by:
Hi, Ive posted on this previously but had no response. Basically i need to build some html using a rich text editor. Then i want to actually create an html document from this and save it to my...
3
by: SMH | last post by:
Normally an SVG document is loaded/parsed/interpreted inside an HTML document using an 'object' (or 'embed') element, although there are supposedly other ways too. The problem is, the SVG document...
2
by: sicklern | last post by:
Hello, I have searched for this answer and the posted solutions do not work for me or they are slightly different. I have a USB flash drive that contains default.htm, medical.bat, and java...
11
Dormilich
by: Dormilich | last post by:
Lately I have seen so much awful HTML, that I like to show what a HTML document should look like, regarding the requirements from the W3C. the absolute minimum is defined as: or expressed in...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.