Search code examples
csshtmltagsconflict

two external css files with the same div ID '#container' name tags causing positioning issues for two objects

I have an issue with two different objects on a webpage that are using an external CSS and external js to call each of their respective functions. When only one script (a page peel script) is used, the page peel effect display normal on all pages (www.cxchelp.com). However, when the script is added to a page that has a CSS form script, the peel effect moves from its position and goes to the middle edge of the page in alignment with the CSS form (See: http://www.cxchelp.com/contact_error.html).

I checked both external script and realise that they are both positioned by '#container'

I know that the fact that they are both using the '#container' is causing the positioning problem. But my question is what do I do to prevent this conflict?

This thing has been beating me world without end for a few hours now, and I am kind of fed-up.

This is (part of) the first .js script (for the page peel effect) where the '#container'is mentioned;

$('#container').prepend('<div id="jcornerSmall" style=" position:absolute;width:100px;height:100px;z-index:9999;right:0px;top:0px;">

This is (part of) the CSS script for the contact form, and position that both objects are stuck at;

#container {    
  margin: 0 auto;
  background: #fff;
  width: 580px;
  padding: 20px 40px; 
  text-align: left;
}

Any ideas here guys?

Solution

  • Add a class of page-peel-container to main container of every page you want to peel effect. This means the very first <div> on the page!

    On the homepage, this would look like:

    <body>
    <div id="container" class="page-peel-container">

    On the contact page, this would look like:

    <body>
    <div id="containermain" class="page-peel-container">

    And so on.

    Now, like last time, find the 2 bits in the Javascript where it says $("#container").prepend or $("#containermain").prepend if you haven't changed it back after our first failed attempt. Replace it with $(".page-peel-container").prepend

    Let me know if this still doesn't work.