Header appearance messed up by Coppermine - how?

rbodanyi · March 08, 2016, 08:15:18 PM

Hi all,
Newbie here. I'm having some trouble with the layout of my custom header and footer. If you go here - http://ryanbodanyi.org/index.html - (or any other page on my site) you'll see how the alignment is supposed to look in the very top blue bar; the search magnifying glass; and the social media icons in the footer. But here, where I've installed coppermine - http://ryanbodanyi.org/bodanyiproject/ - that lignment is all off. And I don't know why. The code of my header is pasted in below; it's exactly the same as it is for the rest of the site. Clearly something within coppermine is changing its appearance. This is true across all six coppermine themes that I have, so that isn't the issue.

Please help - I'd be grateful for any insight you may have!

Code Select

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= isset($PageTitle) ? $PageTitle : "Default Title"?></title>
    <!-- Additional tags here -->
    <?php if (function_exists('customPageHeader')){
      customPageHeader();
    }?>
<link rel="shortcut icon" href="images/fav.ico" type="image/x-icon" />
<link href="http://ryanbodanyi.org/css/custom.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="http://ryanbodanyi.org/css/color.css" rel="stylesheet">
<!-- color CSS -->
<link href="http://ryanbodanyi.org/css/mega-menu.css" rel="stylesheet">
<!-- Mega Menu -->
<link href="http://ryanbodanyi.org/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="http://ryanbodanyi.org/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="http://ryanbodanyi.org/css/materialize.css" rel="stylesheet">
<!-- Materialize CSS -->
<link href="http://ryanbodanyi.org/css/font-awesome.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link href="http://ryanbodanyi.org/css/owl.slider.css" rel="stylesheet">
<!-- Owl Slider -->
<link href="http://ryanbodanyi.org/css/prettyPhoto.css" rel="stylesheet">
<!-- Preety Photo -->
		<link rel="stylesheet" type="text/css" href="http://ryanbodanyi.org/css/elastislide.css" />
		<link rel="stylesheet" type="text/css" href="http://ryanbodanyi.org/css/custom2.css" />
		<script src="http://ryanbodanyi.org/js/modernizr.custom.17475.js"></script>
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
<!--
.style1 {font-size: 36px}
-->
</style>
</head>
  <body>

<!-- Main Wrapper Start -->
<div id="wrapper" class="wrapper"> <a name="Top"></a> 
  
  <!-- Header Start -->
  <div id="cp-header" class="cp-header"> 
    
    <!-- Topbar Start -->
    <div class="cp-topbar">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <ul class="toplinks">
              <a href="http://ryanbodanyi.org/index.html"><li class="waves-effect waves-button"><a href="http://ryanbodanyi.org/index.html">Home</li></a></a>
              <a href="http://ryanbodanyi.org/blogs.html"><li class="waves-effect waves-button"><a href="http://ryanbodanyi.org/blogs.html">News</li></a></a>
              <li class="waves-effect waves-button"><a href="#">FAQ's</a></li>
              <li class="waves-effect waves-button"><i class="fa fa-envelope-o"></i><a href="mailto:rbodanyi@gmail.com"> rbodanyi@gmail.com</a></li>
            </ul>
          </div>
          <div class="col-md-6">
            <div class="cp-toptools pull-right">
              <ul>
                <a href="https://twitter.com/rbodanyi"><li class="waves-effect"><i class="fa fa-twitter"></i></li></a>
                <a href="https://www.facebook.com/weareall.eachother"><li class="waves-effect"><i class="fa fa-facebook"></i></li></a>
                <a href="https://www.linkedin.com/in/rbodanyi"><li class="waves-effect"><i class="fa fa-linkedin"></i></li></a>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Topbar End --> 
    
    <!-- Logo row Start -->
    <div class="cp-logo-row">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="logo"><a href="http://ryanbodanyi.org/index.html"><img src="http://ryanbodanyi.org/images/logo.png" alt=""></a></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Logo row Start --> 
    
    <!-- Mega Menu Start -->
    <div class="cp-megamenu">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="cp-mega-menu">
              <label for="mobile-button"> <i class="fa fa-bars"></i> </label>
              <!-- mobile click button to show menu -->
              <input id="mobile-button" type="checkbox">
              <ul class="collapse main-menu">
			  <li class="slogo"><a href="http://ryanbodanyi.org/index.html"><img src="http://ryanbodanyi.org/images/logo-micon.png" alt=""></a></li>
                <li><a href="http://ryanbodanyi.org/aboutme.html">About Me</a>
                  <ul class="drop-down one-column hover-expand">
                    <!-- first level drop down -->
                    <li> <a href="http://ryanbodanyi.org/bio.html">My Bio</a> </li>
                    <li> <a href="http://ryanbodanyi.org/workhistory.html">Work History</a> </li>
                    <li> <a href="http://ryanbodanyi.org/education.html">Education & Publications</a> </li>
                    <li> <a href="http://ryanbodanyi.org/skills.html">Skills</a> </li>
                  </ul>
                </li>
                <li> <a href="http://ryanbodanyi.org/blogs.html">Blogs</a>
                  <ul class="drop-down full-width blog-menu hover-expand">
                    <li>
                      <ul>
                        <li> <a href="http://ryanbodanyi.org/cookingblog/"> <img src="http://ryanbodanyi.org/images/cookingmini.jpg" alt=""> </a>
                          <h3><a href="http://ryanbodanyi.org/cookingblog/">Cooking</a></h3>
                        </li>
                        <li> <a href="http://ryanbodanyi.org/travelblog/"> <img src="http://ryanbodanyi.org/images/travelmini.jpg" alt=""> </a>
                          <h3><a href="http://ryanbodanyi.org/travelblog/">Travel</a></h3>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <ul>
                        <li> <a href="http://ryanbodanyi.org/politicsblog/"> <img src="http://ryanbodanyi.org/images/politicsmini.jpg" alt=""> </a>
                          <h3><a href="http://ryanbodanyi.org/politicsblog/">Politics</a></h3>
                        </li>
                        <li> <a href="http://ryanbodanyi.org/blog/"> <img src="http://ryanbodanyi.org/images/othermini.jpg" alt=""> </a>
                          <h3><a href="http://ryanbodanyi.org/blog/">Everything Else</a></h3>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <ul>
                        <!-- column three -->
                        <li class="validation">
                          <h2>More Great Reading</h2>
                        </li>
                        <li> <a href="https://theintercept.com">The Intercept</a> </li>
                        <li> <a href="http://www.thestranger.com/blogs/slog">The Stranger</a> </li>
                        <li> <a href="http://www.mrmoneymustache.com">Mr. Money Mustache</a> </li>
                        <li> <a href="http://www.theestablishment.co">The Establishment</a> </li>
                        <li> <a href="http://www.dailykos.com/blogs/elections/">DailyKos Elections</a> </li>
                        <li> <a href="http://physicsworld.com/cws/channel/news">Physics World</a> </li>
                      </ul>
                    </li>
                    <li>
                      <ul>
                        <!-- column four -->
                        <li class="validation">
                          <h2>...And Listening</h2>
                        </li>
                        <li> <a href="http://www.onthemedia.org/archive/">On The Media</a> </li>
                        <li> <a href="http://www.thisamericanlife.org/radio-archives">This American Life</a> </li>
                        <li> <a href="http://www.radiolab.org/archive/">Radiolab</a> </li>
                        <li> <a href="http://themoth.org/radio/episodes">The Moth</a> </li>
                        <li> <a href="http://www.marketplace.org/">Marketplace</a> </li>
                        <li> <a href="http://www.wbur.org/series/dear-sugar">Dear Sugar</a> </li>
                        <li> <a href="http://www.savagelovecast.com/seasons">Savage Love</a> </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li> <a href="http://ryanbodanyi.org/tutor.html">Tutoring</a>
                  <ul class="drop-down full-width col-4 hover-expand">
                    <!-- full width drop down with 5 columns + images -->
                    <li>
                      <ul class="sub-menu">
                        <li> <a href="http://ryanbodanyi.org/tutor-stats.html">Statistics</a> </li>
                        <li> <a href="http://ryanbodanyi.org/tutor-accounting.html">Accounting & Fin. Management</a> </li>
                        <li> <a href="http://ryanbodanyi.org/tutor-writing.html">Writing</a> </li>                        
                        <li> <a href="http://ryanbodanyi.org/tutor-hsmath.html">Middle & High School Math</a> </li>
                      </ul>
                    </li>
                    <li><a href="http://ryanbodanyi.org/tutor-aboutme.html"><img src="http://ryanbodanyi.org/images/tutoraboutmemd.jpg" alt="">
                      <h3>About Me</a></h3>
                    </li>
                    <li><a href="http://ryanbodanyi.org/tutor-payments.html"><img src="http://ryanbodanyi.org/images/tutorpaymentsmd.jpg" alt="">
                      <h3>Payments & Discounts</a></h3>
                    </li>
                    <li><a href="http://ryanbodanyi.org/tutor-universitytutor.html"><img src="http://ryanbodanyi.org/images/tutoruniversitytutormd.jpg" alt="">
                      <h3>Review Me on UniversityTutor.com</a></h3>
                    </li>
                  </ul>
                </li>
                <li> <a href="#">Bhopal Photo Gallery</a>
                  <div class="drop-down full-width text-links hover-expand"> <!-- full width drop down with 4 columns -->
                    <ul>
                      <!-- column one -->
                      <li> <a href="#">About</a> </li>
                      <li> <a href="#">Testimonials</a> </li>
                      <li> <a href="#">Archives</a> </li>
                      <li> <a href="#">Gallery</a> </li>
                      <li> <a href="#">Contact Page</a> </li>
                      <li> <a href="#">404 Page</a> </li>
                    </ul>
                    <ul>
                      <!-- column one -->
                      <li> <a href="#">About</a> </li>
                      <li> <a href="#">Testimonials</a> </li>
                      <li> <a href="#">Archives</a> </li>
                      <li> <a href="#">Gallery</a> </li>
                      <li> <a href="#">Contact Page</a> </li>
                      <li> <a href="#">404 Page</a> </li>
                    </ul>
                    <ul>
                      <!-- column one -->
                      <li> <a href="#">About</a> </li>
                      <li> <a href="#">Testimonials</a> </li>
                      <li> <a href="#">Archives</a> </li>
                      <li> <a href="#">Gallery</a> </li>
                      <li> <a href="#">Contact Page</a> </li>
                      <li> <a href="#">404 Page</a> </li>
                    </ul>
                    <ul>
                      <!-- column one -->
                      <li> <a href="#">About</a> </li>
                      <li> <a href="#">Testimonials</a> </li>
                      <li> <a href="#">Archives</a> </li>
                      <li> <a href="#">Gallery</a> </li>
                      <li> <a href="#">Contact Page</a> </li>
                      <li> <a href="#">404 Page</a> </li>
                    </ul>
                  </div>
                </li>                
                <li> <a href="http://ryanbodanyi.org/projects.html">Other Projects</a>
                  <ul class="drop-down full-width col-5 hover-expand">
                    <!-- full width drop down with 5 columns + images -->
                    <li class="validation">
                      <h2 class="mm-title">Other Projects</h2>
                    </li>
                    <li><img src="http://ryanbodanyi.org/images/mm-2.jpg" alt="">
                      <h3><a href="category-layout-1.html">Web Design</a></h3>
                    </li>
                    <li><a href="http://ryanbodanyi.org/property.html"><img src="http://ryanbodanyi.org/images/propertymini.jpg" alt=""></a>
                      <h3><a href="http://ryanbodanyi.org/property.html">Property Management</a></h3>
                    </li>
                    <li><img src="http://ryanbodanyi.org/images/mm-3.jpg" alt="">
                      <h3><a href="category-layout-1.html">The Bodanyi Project</a></h3>
                    </li>
                    <li><a href="http://ryanbodanyi.org/cuisines.html"><img src="http://ryanbodanyi.org/images/cuisinesmini.jpg" alt=""></a>
                      <h3><a href="http://ryanbodanyi.org/cuisines.html">Ethnic Cuisine</a></h3>
                    </li>
                    <li><img src="http://ryanbodanyi.org/images/mm-5.jpg" alt="">
                      <h3><a href="category-layout-1.html">Nullam tincidunt lorem sit amet imperdiet sollicitu.</a></h3>
                    </li>
                  </ul>
                </li>
                <li> <a href="http://ryanbodanyi.org/campaigns.html">Campaigns</a>
                  <ul class="drop-down full-width col-5 hover-expand">
                    <!-- full width drop down with 5 columns + images -->
                    <li class="validation">
                      <h2 class="mm-title">Campaigns</h2>
                    </li>
                    <li><a href="http://michaelmoore.com/ArrestGovSnyder/#signup-form"><img src="http://ryanbodanyi.org/images/campaign-flintmini.jpg" alt=""></a>
                      <h3><a href="http://michaelmoore.com/ArrestGovSnyder/#signup-form">Gov. Snyder has to pay for what he's done to Flint.</a></h3>
                    </li>
                    <li><a href="http://www.1in3campaign.org/shareyourstory"><img src="http://ryanbodanyi.org/images/campaign-abortionmini.jpg" alt=""></a>
                      <h3><a href="http://www.1in3campaign.org/shareyourstory">Share Your Abortion Story</a></h3>
                    </li>
                    <li><a href="http://act.colorofchange.org/sign/tell-obama-ban-the-box/"><img src="http://ryanbodanyi.org/images/campaign-bantheboxmini.jpg" alt=""></a>
                      <h3><a href="http://act.colorofchange.org/sign/tell-obama-ban-the-box/">Tell President Obama to Ban the Box</a></h3>
                    </li>
                    <li><a href="http://www.ceasefireusa.org/page/unload-your-401k"><img src="http://ryanbodanyi.org/images/campaign-gunsmini.jpg" alt=""></a>
                      <h3><a href="http://www.ceasefireusa.org/page/unload-your-401k">Divest Your 401K From Guns</a></h3>
                    </li>
                    <li><a href="https://act.eff.org/action/tell-your-senator-to-support-the-patent-act"><img src="http://ryanbodanyi.org/images/campaign-trollsmini.jpg" alt=""></a>
                      <h3><a href="https://act.eff.org/action/tell-your-senator-to-support-the-patent-act">Tell Your Senator to Support the PATENT Act</a></h3>
                    </li>
                  </ul>
                </li>
                <li><a href="http://ryanbodanyi.org/contact.html">Contact Me</a></li>
                <li class="search-bar"> <i class="icon-7"></i> <!-- search bar -->
                  
                  <ul class="drop-down hover-expand">
                    <li>
                      <form method="post" >
                        <table>
                          <tr>
                            <td><input type="text" name="serach_bar" placeholder="Type Keyword Here"></td>
                            <td><input type="submit" value="Search"></td>
                          </tr>
                        </table>
                      </form>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Mega Menu End --> 
    
  </div>
  
</body>
</html>

ron4mac · March 08, 2016, 10:44:53 PM

If I understand correctly, you're using the path to custom header and footer feature available in the CPG configuration. This is designed to accept only html that is found between <body></body> tags. It looks like you are including entire html structures with DOCTYPE, html, head and body tags. That is sure to not work out well.

You could try removing all of the tag types that I just listed above from the files you are using to see if you could somehow be lucky enough that it would work. (if you modify those files, make sure they are not the same files that are used elsewhere in your site)

Your best bet is probably looking into running Coppermine in an iframe.

coppermine-gallery.com/forum

News:

Header appearance messed up by Coppermine - how?

rbodanyi

ron4mac