473,545 Members | 2,032 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to resolve CSS conflict within one HTML document?

3 New Member
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 6293
CSShunter
5 New Member
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
CSShunter
5 New Member
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
minotto3
3 New Member
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
12961
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 scripts. Being a javascript newbie and after significant testing, I suspect that the document.write fails after finding a </script> within pageVar....
2
5691
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 must be stored somewhere in order for the scroll bars to be enabled when the body is larger than the container. Also, I have noticed that if I...
0
1731
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 document should then be added to the html file at a specific spot and the file reloaded with the new document added to the html file showing. This new...
9
1819
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 I achieve this? Any pointers are appreciated. Thanks!
2
2123
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: http://msdn2.microsoft.com/en-us/library(d=robot)/ms171712.aspx or
2
4580
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 reference in a database so that i can retrieve the html document. Basically i dont have a clue how to convert a string in HTML format (taken from the...
4
4453
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 server. Does anyone have any examples on how to do this ?? I dont really understand how to get from HTML string to HTML document. I can probably...
3
6347
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 must be static this way. I want to use the DOM interface to build SVG dynamically inside an HTML document. I am guessing I can build it inside...
2
10993
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 folders/files What I want to do is run medical.bat from within default.htm when the user clicks on a launch button or image. The medical.bat file contains...
11
5109
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 code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>My first HTML...
0
7409
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7921
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
5982
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5343
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4958
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3446
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1900
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1023
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
720
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.