Simple CSS positioning not working

Hi Experts,

I need help with positioning a footer in this theme. My css validates but something is obviously wrong. I know to code for Firefox but the positioning is wrong in all browsers, so if it's wrong in FF there must be something wrong with my css. Firefox also blinks for me when I try to scroll to the footer. There is way to much room between the end of the body content and the beginning of the footer and I would like to have it center as well.

I have the footer set to 'float:left' right now only because margin and padding does nothing to position the footer and if I remove 'float:left'  then everything just floats to the right.

I've attached the custom.css ( the footer file starts at the bottom with /* Start Footer Here */ ) and the para-footer.php file where the divs live (starting at <!-- site-info footer data table --> and ending with <!-- End site-info footer data table -->). I have not touched anything in this  php file before <!-- site-info footer data table -->  or after  <!-- End site-info footer data table -->).  The rest came with the theme. The scroll thingy also came with the theme. I don't want it but can't find the code to eliminate it so just trying to deal with it.

Looking at the attached files, please advise what I need to do with my css so I can control this footer.
You can see the issue at: http://www.ammusicentertainment.com/WordPessSite/

TIA

Warm Regards,

Deidre
custom.css
footer-para.php
dmullisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Deidre, there are still duplicate id attributes and unclosed div tags.  These things may be the cause of the problem, and in any case they should be corrected.  I can't tell you what to do to correct them because I do not know what you want the site to look like.  I don't think this is a PHP problem; PHP may be peripherally related, but WordPress themes are all about HTML and CSS.  Once the HTML is correct, it will be easier to get the CSS right.

If you don't know about them yet, give yourself a chance to learn about Chrome Dev Tools.  I find them more helpful than anything in Firefox and Firebug.  They are all open-source and free of cost.
https://developer.chrome.com/devtools
http://discover-devtools.codeschool.com/
0
dmullisAuthor Commented:
Ray,

I did not develop the Harmonic theme. If you keep looking at the entire theme in the HTML validator then that does not help me. If I had developed the theme from the ground up then I would know where to find these files to fix  THEIR theme html inconsistencies that have nothing to do this time with this issue. I can not give the validator a link to a footer html file because there is not one. The divs (HTML) had to be added to the footer-para.php file that I uploaded. The only ccs file I am concerned with is the custom.css file I uploaded.  The only HTML file I am concerned with is the para-footer.php file where the HTML divs live.  Both files validate for me. Their Harmonics theme THEY built that is not validating for W3C  works otherwise.  I have been doing this for about 20 years now. I am just not used to have to search 3 hours for a file to be fixed in a theme someone else created in wordpress that has everything automated and I am rusty on CSS plus I have not had time to learn PHP fully. Trying to recreate and fix all the validator issues W3C finds on THEIR theme is not helping me with the present request. It is going way out of scope of this issue.
0
Ray PaseurCommented:
Deidre. I'll try to get some other E-E experts to look at this.  The browser (like the validator) can only see the entire HTML document - these programs do not know what part you wrote and what part someone else wrote - they have a single integrated view of the HTML document and do not know that your only concern is the footer - they have to have a complete document to work with.  So if you're using a theme from source "X" and integrating changes from source "Y," well, that doesn't matter to the programs that render the web page.  All the parts are expected to work together, whatever the source.

Just to be clear, when you say "both files validate for me" please tell us what that means and how can the E-E experts see the validation?

Thanks and regards, ~Ray
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

dmullisAuthor Commented:
Hi Ray,

The php file I uploaded validates for me in a php validator ( not fail proof). The css file I uploaded validates with W3C the css validator. Both copy and paste into the validators - don't put the link to the entire site in.

If this theme is a mess, I can't help that at this point. If I need a css work around, then that is what I need simply for the footer. Honestly it is a css issue. So it is within the 2 pages I uploaded. Probably I am doing something wrong with the css and need a good css eye on it.

Warm Regards,

Deidre
0
dmullisAuthor Commented:
I am using the harmonic theme which I replaced every single file with today with the latest files. I am using a child theme and I have included those files as an attachment above. The rest pull from the parent that has not been changed. All css works but I can't control the footer.
0
dmullisAuthor Commented:
In case needed - Here is the front page which is HTML. The front page is where I am concerned about the footer issue. It also validates with W3C,  and coincides with the custom.css I already uploaded. This is all that is on it:

<div class ="page">

<div class="entry-content centered">

<div class="rollover1" > <a href="http://www.ammusicentertainment.com/WordPessSite/engagement-parties/"></a> </div>
<div class="rollover2" > <a href="http://www.ammusicentertainment.com/WordPessSite/wedding-parties-and-receptions/"></a> </div>
<div class="rollover3" > <a href="http://www.ammusicentertainment.com/WordPessSite/wedding-parties-and-receptions/"></a> </div>

</div>

<div class="entry-content centered">
<div class="rolloverS7" > <a href="http://www.ammusicentertainment.com/WordPessSite/old-school-hiphop/"></a> </div>
<div class="rolloverS6" > <a href="http://www.ammusicentertainment.com/WordPessSite/live-dj-artists/"></a> </div>
<div class="rolloverS5" > <a href="http://www.ammusicentertainment.com/WordPessSite/rb-and-soul/"></a> </div>
<div class="rolloverS4" > <a href="http://www.ammusicentertainment.com/WordPessSite/wedding-receptions/"></a> </div>

</div>
</div>

*************************

Far as I can tell, this has nothing to do with positioning the footer.
0
dmullisAuthor Commented:
I am very familiar with validators but you are checking the entire wordpress theme that I have no control over and not checking the uploaded files I have a question about and that I can control.

Why upload files if you are just going to run out an plop the url in a validator?
0
Ray PaseurCommented:
Maybe I am misunderstanding something!  Both the browser and the validator will look at the whole HTML document, not just at a fragment.  Are you saying you uploaded an entire HTML document and the URL is not the thing we need to look at?  I just want to make sure that we are seeing and understanding exactly what the browser sees.  That is the most likely way to discern the problem.

I've also reached out to other E-E members who are WP experts.  I only saw this because of the PHP designation and I do not think it is a PHP problem, per se.
0
dmullisAuthor Commented:
Hi Ray,

I appreciate your input. This is an css issue.

I stated: "I've attached the custom.css ( the footer file starts at the bottom with /* Start Footer Here */ ) and the para-footer.php file where the divs live (starting at <!-- site-info footer data table --> and ending with <!-- End site-info footer data table -->). I have not touched anything in this  php file before <!-- site-info footer data table -->  or after  <!-- End site-info footer data table -->).  The rest came with the theme. The scroll thingy also came with the theme. I don't want it but can't find the code to eliminate it so just trying to deal with it.

 Looking at the attached files, please advise what I need to do with my css so I can control this footer.
 You can see the issue at: http://www.ammusicentertainment.com/WordPessSite/"

I entered the <div>s in the footer-para.php file. I made the custom.css file.
0
dmullisAuthor Commented:
again. NO I did NOT upload the entire HTML document and this is not an HTML only site. Are you guys not seeing the 2, TWO, 2 files I uploaded?
0
dmullisAuthor Commented:
If you want to email the harmonic developers about how they need to clean up their theme then have at it. I only uploaded 2 files I need help with.  2 files, they are attched - 2 files, just 2 files
0
dmullisAuthor Commented:
Are the files not uploading? My experts-exchange screen shows that custom.css and footer-para.php were uploaded successfully. I see them now still attached to my original question.
0
dmullisAuthor Commented:
Can I just change this question to I need help with css? The only reason the footer-para.php file is included is because this is where the "HTML" had to be added and when somebody is trying to help with css, they need to see where it is being called from. Sorry it is not being called from a simple html file. I need css help. This question is being made way more complicated than it is.
0
dmullisAuthor Commented:
how many times do I have to repeat this? "Hi Ray,

The php file I uploaded validates for me in a php validator ( not fail proof). The css file I uploaded validates with W3C the css validator. Both copy and paste into the validators - don't put the link to the entire site in.

If this theme is a mess, I can't help that at this point. If I need a css work around, then that is what I need simply for the footer. Honestly it is a css issue. So it is within the 2 pages I uploaded. Probably I am doing something wrong with the css and need a good css eye on it.
"
0
David S.Commented:
I received the notification earlier and you keep posting even when no one has responded for a while, presumably out of frustration from spending so much time wrestling with this issue. Therefore, I'll reply but be warned I tend to put things more bluntly than Ray does. Also remember this is the weekend, so fewer experts are online.

Firstly, I suppose I should say that it's not even clear to me how you want the footer to look differently. However, I do see the blinking scroll issue in both Firefox and Chrome. That would be caused by some of the JavaScript, presumably "skrollr", which seems to be using 3 JS files.

Arguing with a top expert, like Ray, is rather counterproductive. The number of PHP files used to create an HTML document doesn't matter. Web browsers only see one HTML page at a time (iframes just display an additional page within another but they're still separate). If you don't normally use Wordpress (I don't either), what do you use?

This theme has structural HTML errors. That kind of HTML error makes it very difficult to predict whether different browsers will correct the error differently. HTML is the foundation upon which your CSS is built. To search for the problems, I recommend downloading all of the files for the theme to your computer and using a text editor, like Notepad++, to search across all of the files in the theme for specific things, like the duplicated ID. "Search/find in files" is a very useful feature.
0
Slick812Commented:
greetings dmullis, , you have TERRIBLE  in your custom,css , it is SO BAD, and your view for the footer shows it. You use a whacky CSS as-
   .table {
       display: table;
       width: 100%;
      border: 0px; }

WHY, WHY , WHY would anyone do that for this type of display? ?
But I have told you that before and you did not listen to me? Why?

So , Here is some Html5 and CSS3 to maybe get a Start to begin to develop a workable FOOTER -
<style>
#footer{background:#000;
  padding:8px 1px;
  }
.site-info{
  display:inline-block;
  margin:1px auto;
  color:#fff;
  }
.state1{
  display:inline-block;
  margin:3px 1px;
  vertical-align: top;
  padding: 2px;
  background:#557;
  border-radius:6px;
  }
.twoC {display: none;}
.threeC {display: none;}

@media screen and (max-width: 733px){.twoC{display:inline;}}
@media screen and (max-width: 363px){.threeC{display:inline;}.twoC{display:none;}}
</style>
<div id="footer">
<div class="site-info">

<div class="state1">
<b>NEW YORK</b><br />
New York City<br />
Brooklyn<br />
Queens<br />
Bronx<br />
Manhattan<br />
Staten Island<br />  
West Chester county<br />  
Long Island<br />
</div>

<div class="state1">
<b>NEW JERSEY</b><br />
Bergen County<br />   
North + South New Jersey<br />
Monmouth county<br />
</div>
<br class="threeC" />
<div class="state1">
<b>PENNSYLVANIA</b><br />
Philadelphia<br /> 
Bucks County<br />  
</div>
<br class="twoC" />
<div class="state1">
<b>CONNECTICUT</b><br />
Hartford<br /> 
Fairfield<br />  
New Haven<br />
Middlesex Counties<br /> 
</div>
<br class="threeC" />
<div class="state1">
<b>VIRGINIA</b><br />
Richmond Area Mainly<br /> 
</div>

<div class="state1">
<b>FLORIDA</b><br />
Miami<br />  
Dade County<br />   
Broward<br /> 
Palm Beach County<br />  
Tampa Area<br /> 
</div>

</div>
</div>

Open in new window

Please Notice that I have replaced your -
   <div id="footer-nav-wrapper">
with my own -
    <div id="footer">
because I can NOT see that it is workable in what you say you want? ?
the   <div id="footer-nav-wrapper">
 has all of this  JUNK code -
<nav id="footer-navigation" class="main-navigation" role="navigation">
<a class="skip-link screen-reader-text" href="#content">
Skip to content</a>
<ul class="menu">
<li id="menu-item-two" class="menu-item"><a href="#slide-3" class="scrollfixed"></a></li>
</ul><!-- .menu -->
</nav>

Open in new window

which does not even display, on the footer, why is it there? A Menu, for What?
Who wrote this mess?

Sorry, I get flabulgased at bad web site code, you really need to hire a web developer that knows something about web sites as you site seems to be a "Professional" site.

I was Unable to see where your font-size comes from, maybe in the footer-nav-wrapper class definition?, but if the font-size is to big , I can change it.
0
Slick812Commented:
@Kravimir
what makes you think that Ray knows anything about CSS3 ?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
First, there are some validation errors you can ignore. There are plenty of popular sites that don't 100% validate.  However, things like unclosed tags may visually work in some or even all browsers, but once you start adding css or javascript, it becomes very difficult to work with.  I just went through this very thing with somebody else http:/Q_28631922.html  In this case, there is probably just one error that cascade to several.  The unclosed error is what I am talking about.  When you look at the validator, the error sometimes is only a clue and you may have to hunt for it.

Beyond that, I get the feeling you may have tried a few things to correct and perhaps started overlapping.  There seems to be an id#footer-navigation that is taking up a little space but no content.  If I delete that while using chrome console, then start unchecking the overlapping float left and rights it starts taking shape like you would expect although in this image not perfect yet.
screenI think this may be a good time to strip out the footer css and start fresh.   The good news is your footer code does validate on it's own.
<!-- #footer-navigation .main-navigation -->
<!-- site-info footer data table -->
<div class="site-info">
<div class="table">
  <div class="row">
    <div class="cell">
      <div style="padding-bottom:5px;"><b>NEW YORK</b></div>
<div>New York City</div> 
  <div>Brooklyn</div>
  <div>Queens</div>
  <div>Bronx</div>
  <div>Manhattan</div>
  <div>Staten Island</div>  
<div>West Chester county</div>  
  <div>Long Island</div>
</div>

<div class="cell">
      <div style="padding-bottom:5px;"><b>NEW JERSEY</b></div>
    <div>Bergen County</div>   
<div>Northern and South New Jersey</div>
<div>Monmouth county</div>
</div>
<div class="cell">
      <div style="padding-bottom:5px;"><b>PENNSYLVANIA</b></div>
<div>Philadelphia</div>   
<div>Bucks County</div>    
 </div>
<div class="cell">
      <div style="padding-bottom:5px;"><b>CONNECTICUT</b></div>
<div>Hartford</div>   
<div> Fairfield</div>   
 <div>New Haven</div>   
 <div>Middlesex Counties</div>   

 </div>
<div class="cell">
      <div style="padding-bottom:5px;"><b> VIRGINIA</b> </div>
<div>Richmond Area Mainly</div>   
 </div>
<div class="cell">
      <div style="padding-bottom:5px;"><b>FLORIDA</b></div>
<div>Miami</div>   
 <div>Dade County</div>   
 <div>Broward</div>   
 <div>Palm Beach County</div>   
 <div>Tampa Area</div>   

 </div></div>

  </div>
</div>

<!-- End site-info footer data table -->

<!-- #footer-nav-wrapper -->

Open in new window

Instead of converting all of this to tables, you may want to consider using a responsive library like bootstrap or foundation.  Or any grid system for that matter.  I didn't look but perhaps your theme has one.

In bootstrap you can easily make columns as below sample that will be 4 columns until the viewport goes to a phone size. Then you will see 4 rows making it easier to read rather than shrinking text.  Using bootstrap or foundation's grid system already has all the resets and floats worked out as well as the grid.
<div class="row">
     <div class="col-sm-3">col1</div>
     <div class="col-sm-3">col2</div>
     <div class="col-sm-3">col3</div>
     <div class="col-sm-3">col4</div>
</div>

Open in new window

0
David S.Commented:
What's wrong with "display:table"? It's (currently) simpler to use than Flexbox and is fairly flexible. I probably use "display:inline-block" more often but both are useful. Media queries can be used to provide an alternative style for small viewports. However, I should point out that (if I recall correctly) only very old versions of Opera (e.g. version 8) required an element with "display:table-row" to be used when making a single-row "CSS table".

@Slick812 I said Ray is a top expert but did not say in what he is an expert. He doesn't need to be an expert in CSS3 to know that it's best to make sure that HTML errors aren't causing a problem before trying to adjust the CSS.

I've had the same problem with some people here ignoring my advice and yet continuing to ask questions.
0
dmullisAuthor Commented:
Slick and Scott Thank YOU!, Thank You!! Thank You!

To the other first responders. Thank you for trying to help as well. I pay for this service to use when I am truly stumped and not to argue with experts. Some experts are less advanced than I am and want to keep arguing with me about elementary things I already know, and is not the answer. Others are way more advanced than me in their area of expertise, thank goodness!

I also have trouble with experts going out of the scope of the original question and not thoroughly reading the original question then arguing with me about something they do not understand. Just don't answer the question then, and I won't feel like I am supposed to keep replying and trying to explain myself. I am well aware about not having closed tags causing HTML and other issues for the past 20 years. I know how to compare every file on a server. This stuff is very elementary. I appreciate your input and suggestions but you didn't get why this is not the answer in this case.

 Also thank you for your suggestion but as far as: "However, I do see the blinking scroll issue in both Firefox and Chrome. That would be caused by some of the JavaScript, presumably "skrollr", which seems to be using 3 JS files."

I completely removed all "skrollr" JS files from the server 2 days ago but because the blinking, scrolling issue was still there, I put the files back. The blinking also was NOT there UNTIL I messed with adding a footer to a wordpress theme that did not come with one. The only files that were touched were the 2 I uploaded in my original question before all this back and forth.

Slick and Scott again think you for coming to the rescue. This wordpress theme has been driving me nuts for days. I even replaced every folder and file on the server. I will work with your solutions tomorrow and get back to close the question out.

Warm Regards,

Deidre
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I did this over a few times.  I think what was able to do is get rid of the floats on the nav#footer-navigation then add text-align:center to the nav. I also removed div.site-info.  (I would check if you can remove it in your theme admin panel before playing with the template file)  Or you can also remove it with css.  You can see the small changes rendered the navigation to be centered.

screen
<div id="footer-nav-wrapper" style="

">
			<nav id="footer-navigation" class="main-navigation" role="navigation" style="
    text-align: center;
">
				<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
				<ul class="menu">
											<li id="menu-item-one" class="menu-item"><a href="#slide-2" class="scrollfixed">Latest</a></li>
					
											<li id="menu-item-two" class="menu-item"><a href="#slide-3" class="scrollfixed">About</a></li>
					
											<li id="menu-item-three" class="menu-item"><a href="#slide-4" class="scrollfixed">Explore</a></li>
					
									</ul><!-- .menu -->
			</nav><!-- #footer-navigation .main-navigation -->

			<!-- *** DELETE THIS *** <div class="site-info">
								<a href="https://wordpress.com/?ref=footer_blog">Blog at WordPress.com</a>.
				<span class="sep"> | </span>
				<a href="https://wordpress.com/themes/harmonic/" title="Learn more about this theme">The Harmonic Theme</a> by <a href="https://wordpress.com/themes/" rel="designer">WordPress.com</a>.			</div> --><!-- .site-info -->

		</div>

Open in new window

I did this with the sample site because I was not sure what css you added and wanted to start fresh. I trust you can bring this to your current site.

A grid system will make using columns much easier.  I didn't see it in this theme.  I am used to using bootstrap. You may want to just load the portions of the css that have the grid such as below.  This is just my personal preference.   I'm sure you can make it work with the css table as well.
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
position:relative;
min-height:1px;
padding-right:15px;
padding-left:15px;
}

.col-xs-11 {
width:91.66666667%;
}

.col-xs-10 {
width:83.33333333%;
}

.col-xs-9 {
width:75%;
}

.col-xs-8 {
width:66.66666667%;
}

.col-xs-7 {
width:58.33333333%;
}

.col-xs-6 {
width:50%;
}

.col-xs-5 {
width:41.66666667%;
}

.col-xs-4 {
width:33.33333333%;
}

.col-xs-3 {
width:25%;
}

.col-xs-2 {
width:16.66666667%;
}

.col-xs-1 {
width:8.33333333%;
}

.col-xs-pull-12 {
right:100%;
}

.col-xs-pull-11 {
right:91.66666667%;
}

.col-xs-pull-10 {
right:83.33333333%;
}

.col-xs-pull-9 {
right:75%;
}

.col-xs-pull-8 {
right:66.66666667%;
}

.col-xs-pull-7 {
right:58.33333333%;
}

.col-xs-pull-6 {
right:50%;
}

.col-xs-pull-5 {
right:41.66666667%;
}

.col-xs-pull-4 {
right:33.33333333%;
}

.col-xs-pull-3 {
right:25%;
}

.col-xs-pull-2 {
right:16.66666667%;
}

.col-xs-pull-1 {
right:8.33333333%;
}

.col-xs-pull-0 {
right:auto;
}

.col-xs-push-11 {
left:91.66666667%;
}

.col-xs-push-10 {
left:83.33333333%;
}

.col-xs-push-9 {
left:75%;
}

.col-xs-push-8 {
left:66.66666667%;
}

.col-xs-push-7 {
left:58.33333333%;
}

.col-xs-push-6 {
left:50%;
}

.col-xs-push-5 {
left:41.66666667%;
}

.col-xs-push-4 {
left:33.33333333%;
}

.col-xs-push-3 {
left:25%;
}

.col-xs-push-2 {
left:16.66666667%;
}

.col-xs-push-1 {
left:8.33333333%;
}

.col-xs-offset-12 {
margin-left:100%;
}

.col-xs-offset-11 {
margin-left:91.66666667%;
}

.col-xs-offset-10 {
margin-left:83.33333333%;
}

.col-xs-offset-9 {
margin-left:75%;
}

.col-xs-offset-8 {
margin-left:66.66666667%;
}

.col-xs-offset-7 {
margin-left:58.33333333%;
}

.col-xs-offset-6 {
margin-left:50%;
}

.col-xs-offset-5 {
margin-left:41.66666667%;
}

.col-xs-offset-4 {
margin-left:33.33333333%;
}

.col-xs-offset-3 {
margin-left:25%;
}

.col-xs-offset-2 {
margin-left:16.66666667%;
}

.col-xs-offset-1 {
margin-left:8.33333333%;
}

Open in new window

http://getbootstrap.com/css/#grid
0
Slick812Commented:
Looked again at the display on your page at AM music entertainment, although you can add a responsive grid system like bootstrap to a wordPress theme, you may find that there are difficulty's for that integration, it is much mo better if you get a wordPress theme that already is responsive (has bootstrap in it already), and you can avoid the sometimes difficutlties of trying to slap bootstrap on a theme  that has many positioning factors in it to deal with.

AS to your current Footer problems, here is my second development cycle, for your footer, I have added some background gradient for the state titles like New York, and I have added a graphical touch to the black footer with the box-shadow inset, to have a visual "3D" look , it IS RESPONSIVE and breaks the State blocks to three column AND two column narrow display,
without the baggage of a Javascript grid system by adding in the CSS media -
@media screen and (max-width: 699px){ .twoC{display:inline;} }
@media screen and (max-width: 403px){ .threeC{display:inline;} .twoC{display:none;} }

-
<style>
#footer{
  background:#000;
  font-family:sans-serif;
  padding:3px 1px;
  }
  
.site-info{
  display:inline-block;
  margin:1px auto;
  color:#fff;
  font-size:11px;
  }
.state1{
  display:inline-block;
  margin:3px 1px;
  vertical-align: top;
  padding: 2px;
  border-radius:6px;
  }
  
.state1 b{ /* this Changes the b to a div and gets a gradient backgnd */
  display:block;
  margin-bottom:3px;
  padding:0 2px;
  border-radius:4px;
  background:#444;
  background: -moz-linear-gradient(top, rgba(115,115,115,1) 20%, rgba(44,44,44,1) 90%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(125,125,125,1)), color-stop(90%,rgba(44,44,44,1)));
  background: -webkit-linear-gradient(top, rgba(115,115,115,1) 20%,rgba(44,44,44,1) 90%);
  background: -o-linear-gradient(top, rgba(125,125,125,1) 20%,rgba(44,44,44,1) 90%);
  background: -ms-linear-gradient(top, rgba(125,125,125,1) 20%,rgba(44,44,44,1) 90%);
  background: linear-gradient(top, rgba(125,125,125,1) 20%,rgba(44,44,44,1) 90%);
  }
  
.twoC {display: none;}
.threeC {display: none;}

.drkBlend {
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  box-shadow: -3px -3px 8px #999 inset, 3px 3px 8px #999 inset;;
  }


@media screen and (max-width: 699px){ .twoC{display:inline;} }
@media screen and (max-width: 403px){ .threeC{display:inline;} .twoC{display:none;} }
</style>
<div id="footer" class="drkBlend">
<div class="site-info">

<div class="state1">
<b>NEW YORK</b>
New York City<br />
Brooklyn<br />
Queens<br />
Bronx<br />
Manhattan<br />
Staten Island<br />  
West Chester county<br />  
Long Island<br />
</div>

<div class="state1">
<b>NEW JERSEY</b>
Bergen County<br />   
North + South New Jersey<br />
Monmouth county<br />
</div>
<br class="threeC" />
<div class="state1">
<b>PENNSYLVANIA</b>
Philadelphia<br /> 
Bucks County<br />  
</div>
<br class="twoC" />
<div class="state1">
<b>CONNECTICUT</b>
Hartford<br /> 
Fairfield<br />  
New Haven<br />
Middlesex Counties<br /> 
</div>
<br class="threeC" />
<div class="state1">
<b>VIRGINIA</b>
Richmond Area Mainly<br /> 
</div>

<div class="state1">
<b>FLORIDA</b>
Miami<br />  
Dade County<br />   
Broward<br /> 
Palm Beach County<br />  
Tampa Area<br /> 
</div>

</div>
</div>

Open in new window

0
dmullisAuthor Commented:
All, I have read all your comments above and greatly appreciate all the help and suggestions. While working this out with your suggestions, I discovered something that may help simplify this whole thing although it fixes one thing, it causes another.
In the css below, I found the culprit that was causing firefox to blink. It is  #footer-nav-wrapper { positon: ANYTHING; ( tried static, intitial, relative,  and absolute) } Anything I use here makes FF blink on scroll. Remove anything from   #footer-nav-wrapper { } and you can see that the footer at the bottom is okay, but the body content scrolls beneath it.  http://www.ammusicentertainment.com/WordPessSite/

I am using a child theme and only the custom css I made. #footer-nav-wrapper { positon:xxxxx} comes from the harmonic theme parent css, but I used it in my custom css to override the parent css to stop the body from scrolling beneath the footer.  Putting a position: something;  fixes the body going beneath the footer sort of but evidently this is not the right way to go because anything you put in it causes FF to blink. Any suggestions on a different way to fix the body scrolling beneath the footer without the blink?

Newest CSS:
/* Start Footer Here */

#footer-nav-wrapper {
 
}


.table {
    display: table;
    width: 100%;
    border: 0px;

   
}
.row {
    display: table-row;
    border: 0px solid red;
 
}
.cell {
    display: table-cell;
    border: 0px solid green;
  font-size: 9pt; color:white;
 padding-right:30px;
  text-align:left;
 
}

.copyright {
font-size: 10px; color:white;
  }

/* End Footer Here */


Thank you for all you help. I was just hoping this may be any easier fix.
0
dmullisAuthor Commented:
slick, I just saw your comment after I wrote the above but I decided to let everyone know what I found and it may be easier to deal with?
0
dmullisAuthor Commented:
Here is the parent themes footer css. I don't touch this - I just change my child custom css:

#masthead,
#footer-nav-wrapper {
    background: #111;
    position: relative;
    width: 100%;
    z-index: 11111;
}

#footer-nav-wrapper {
    bottom: 0;
    position: relative;
    overflow: hidden;
}

.site-info {
      color: #999;
      text-align: center;
}
#footer-nav-wrapper .site-info {
    float: right;
    padding: 20px;
}

#footer-nav-wrapper .site-info a {
    color: #999;
}
0
Slick812Commented:
? You seem to think that having the css for a table-
.table { }
is going to be workable, , but from experience I can tell you that for a responsive column display it is disaster, bad idea, not going to work.
0
dmullisAuthor Commented:
slick I will change the table to your suggestion above. I am still trying to work with the other code that is causing FF to blink.
0
dmullisAuthor Commented:
Slick you can see now that I have used your code a t http://www.ammusicentertainment.com/WordPessSite/. I appreciate this tremendously and will find a way to award you 500 points for this help alone!

However, you will see I have the same problem with the body scrolling beneath the footer as I stated above. The footer issue is still not resolved :(
0
Slick812Commented:
I looked at your site with My footer added, your problems are in the other containers, that are causing your problem,
First you have the code I gave you Inside of the -
    <div id="footer-nav-wrapper">
and you do not have a CLOSING tag </div> for that  id="footer-nav-wrapper" <div>

I believe that all of the added css you have for that #footer-nav-wrapper is a PROBLEM.

I meant that for to use my code you do NOT have the -
<div id="footer-nav-wrapper"> </div>
at all, none, not on this page.. . Can you have code like -

	</div><!-- .hsContainer -->
	</div><!-- .bcg -->
</section><!-- #slide-3 .homeSlide -->	</div>
</main><!-- #para-template -->
<!-- LEAVE OUT that div id="footer-nav-wrapper" -->
<div id="footer" class="drkBlend">
<div class="site-info">

Open in new window

and see what that does?,
0
Slick812Commented:
I have been looking at the source code for your page, and I have been resizing the width, your page has much in it to be responsive, but there seems to be something in the theme or in a functional add on, that is suppose to deliver a NON scrollable one page view for larger monitor screens. If I narrow the width, then it will change to a page scrollable display, the footer is in a Fixed place at the bottom of the page, and so it covers up the elements above it, since it's fixed.
I do not see any css for your #footer-nav-wrapper  in the source for that page, I thought maybe it's in the  custom.css  but I do not see a
   <link rel='stylesheet'
for a custom.css
0
dmullisAuthor Commented:
Slick everything I have personally  touched, in this "footer-para.php" file  begins with the comment <!-- start custom footer --> and ends with comment <!-- End Custom footer -->
Every single piece of code above and below those 2 comments were created by the makers of the theme. I am trying not to break the entire theme just trying to add a footer that the theme didn't come with. There is nothing in my custom css that I updated with  your suggestions that even calls id="footer-nav-wrapper". The parent calls it though.

I know there is not a closing tag for <div id="footer-nav-wrapper"> and I also know there is not a <body> or <html> starting tag. When I tried to repair any of these, it breaks their Harmonic theme so I don't touch it. I am not a php guru so I don't why it is worked out this way in their theme.

I am trying to leave their code alone as much as possible. I made a child footer-para.php file and added to my child theme.

I will show you what removing their 'footer-nav-wrapper'  code from my child footer-para.php page does.  One sec.
0
Slick812Commented:
I navigated to other pages there, and this one -
   http://www.ammusicentertainment.com/WordPessSite/rb-and-soul/
is set up all wrong, as if I try to scroll it it "Will NOT" scroll to the bottom, and jumps - blinks - returns to a position that it was in before scrollin. Bad Karma if you ask me.

But upon viewing the other pages, there is a "FIXED" black footer on the pages that says -
  "Proudly powered by WordPress | Theme: Harmonic by WordPress.com."
and thats your problem, you are trying to over ride the height of this especially made footer, but the set up for the footer distance for it's Height, IS not associated with the footer css, but with css that changes a Margin or a blank space distance at the bottom of the scrollable page, so that the fixed footer does not cover up the viewable content. there seems to be something (code wise) for a fixed footer.
0
Slick812Commented:
I looked at the recent page update without the -
<div id="footer-nav-wrapper">

and I think there is some javascript that is altering the display for the footer <div> , as if I narrow the browser, at a certain point, the footer div displays according to the css that I wrote, but as the width gets wider, it changes to a display with All text aligned to the right like the default wordpress footer, and it places a black extention on top of the footer, and it changes the css for the footer div to have some of the default properties.
0
Slick812Commented:
Just had a thought, Since you no longer need this custom footer to be fixed, lets move it up to the <main> section and see what happends, It may be possible that the javascript finds the "footer" div by its ID, so to try and avoid that, please change the id -
    <div id="footer" class="drkBlend">
to -
    <div id="ooter" class="drkBlend">
and change the css to -
  #ooter{



move the total of code for -
<div id="footer" class="drkBlend">
<div class="site-info">

<div class="state1">
 to a place before the close tag for the <div id="skrollr-body">
see below
</section><!-- #slide-3 .homeSlide -->	

<!-- Move all footer <div> here -->

</div>
</main><!-- #para-template -->

Open in new window

you might replace the default menu back into it, for the first trial, like this, and if this seems to display right, maybe the default footer can be eliminated.

Sorry I am not hitting this on the first try, but this theme structure and javascript is very complex.
0
Slick812Commented:
I just got a call, so That's all the time I can afford for this today. Be back some time tommmorw?
0
dmullisAuthor Commented:
Slick please do not look at the other pages. They have not been touched and when I get the footer working on the home page, I know how to add the code to those other pages and control whatever else you are seeing on them right now - they are just place holders for pages. For now I need to concentrate on this footer issue on the home page.

I Have uploaded the parent theme css (which I have not touched) and the parent them para-footer.php file ( which I have not touched) in case you would like to see what the theme makers have coded for the entire theme.  I  also  uploading the Child css that I am working with and that I made with your changes and the Child para-footer file I am working with that Imade with your changes. Look at these and the site again.

Next I am going to remove their 'footer-nav-wrapper'  code from my child footer-para.php page and show you what it does, but first take a quick loo at the website again before I do this so you can see the difference when I remove their  'footer-nav-wrapper' div  .
PARENT-css-UNTOUCHED.txt
PARENT-para-footer-php-UNTOUCHED.txt
CHILD-para-footer-php-PRESENT.txt
CHILD-css-PRESENT.txt
0
dmullisAuthor Commented:
Slick, I changed footer to ooter in the child css and the child para but I don't see this code anywhere in the child para:

</section><!-- #slide-3 .homeSlide -->      

<!-- Move all footer <div> here -->

</div>
</main><!-- #para-template -->

same problem.

Removing all the nav header code and leaving only the footer code we fashioned helps the body not scroll beneath the footer but puts the blink back in FF like position: anything{} does.

I also move all the new footer code above all the code on the page and FF blinks. Also, moved it directly below <div id="footer-nav-wrapper"> and same issue. FF blinks.
0
dmullisAuthor Commented:
I am still working with this.

In this theme, the front header image, front footer, etc are all called "-para". All the other pages in the site other than the front page that need the header image and footer are all called from  "featureimage". Header.php and Footer.php do nothing with what I am working with.  You have to put the same code in both 'para' and in 'featureimage'. This is what the Harmonic theme makers named these files.

I've uploaded the latest child theme custom css I made ( This  css includes some comments of what I may try but need to know what to put in the classes and make sure I call them correctly) and the child theme custom footer-para.php page and  footer-featureimage.php I made and in addition this time I have added an uploaded the front page content which is actually a 'page' in wordpress like you would normally make a page in WP, because this is the only page I have added any content too, that you see the other css for in addition to the footer css we have been working with. The code on this front page is hiding behind the footer when you look at: http://www.ammusicentertainment.com/WordPessSite/

If you want to see the theme's parent css and parent para-footer pages. Those were uploaded above.
CHILD-css-Notes.txt
footer-para.php
footer-featureimage.php
Home-Page.txt
0
Slick812Commented:
I spent some time today doing web searches for your word press Harmony theme, specifically for Footer-Options, Custom-Footer, resize-footer, and others, and I did not get a SINGLE usable link, for the most part I get a link to the elegantthemes.com for the harmony theme -
    http://www.elegantthemes.com/gallery/harmony/
and a bunch of links about some various wordPress footer  problems and a few solutions, but NONE I could relate to this harmony theme footer, all I wanted was information about the footer options and how to deal with footer height adjustments in the actual Harmony theme, but I got nothing useful.
For you - - you might do well to go to their Support and user forum at -
    https://www.elegantthemes.com/forum/
and see if you can find forum entrys about custom footers, , OR ask a question there about your problem.

I looked at your new page at -
    http://www.ammusicentertainment.com/WordPessSite/
which looked to be the same exact problem that you started out with in the very first for this question, the fixed footer covering the main content. .

and as I have told you, your custom "Footer" is Much taller than the standard harmony footer, which i guess is about 80 pixels high.  AND most Important, this coverage problem CAN NOT BE FIXED in anything you do with the footer, except reduce the footer content, so it is the same height as the DEFAULT footer.

SO if you add content to your custom footer and it gets taller than the default, you need to adjust the "Main CONTENT", not the footer to get things so your footer does not cover the display elements of the main content.
Why you ask? Because when you do a FIXED footer (or header), it does not react to anything else (is relative to anything else), , SO you have to add "Dead Space" at the bottom of your main content that scrolls, so the height of the "Dead Space" is equal to the height of static-fixed content, so there is always an AREA of the main scrolling content at the very bottom, that is covered up by fixed content at bottom. That's just how it works.
If you are in command of your web page development, I mean YOU know what to do, then you know how to add "dead space" at the bottom of the scrolled main to have the custom fixed footer NOT COVER up YOUR needed main content., I tried to find out some about this in my web searches, but could not find it, So I will tell you that I am Too Ignorant about the Harmony footer with your  skrollr.js  add-on to much help for this. BUT, you can add a <section> at the bottom the current main content, and just add content to it so it's height is enough to compensate for the footer height.
But I do NOT like the way the page looks with a Fixed Footer.

- - - - - - - -
Now on to the footer, In your Home page I do NOT think that the -
  <div id="footer-nav-wrapper">
is a correct designation for the harmony footer, this is for a footer Navigation wrapper, I think that this harmony uses the <footer> tag for footers.
I went to your page for "live DJ artists" at -
   http://www.ammusicentertainment.com/WordPessSite/live-dj-artists/
and the "Footer" there is something we may can work with. You need to REMOVE this -
        <div id="ooter" class="drkBlend">
and it's closing </div> tag
so it may look like this -
<footer id="colophon" class="site-footer" role="contentinfo">

<div class="site-info">

<div class="state1">
<b>NEW YORK</b>
New York City<br />
Brooklyn<br />
Queens<br />
Bronx<br />
Manhattan<br />
Staten Island<br />  
West Chester county<br />  
Long Island<br />
</div>

<div class="state1">
<b>NEW JERSEY</b>
Bergen County<br />   
North + South New Jersey<br />
Monmouth county<br />
</div>
<br class="threeC" />
<div class="state1">
<b>PENNSYLVANIA</b>
Philadelphia<br /> 
Bucks County<br />  
</div>
<br class="twoC" />
<div class="state1">
<b>CONNECTICUT</b>
Hartford<br /> 
Fairfield<br />  
New Haven<br />
Middlesex Counties<br /> 
</div>
<br class="threeC" />
<div class="state1">
<b>VIRGINIA</b>
Richmond Area Mainly<br /> 
</div>

<div class="state1">
<b>FLORIDA</b>
Miami<br />  
Dade County<br />   
Broward<br /> 
Palm Beach County<br />  
Tampa Area<br /> 
</div>

</div>

<!-- #footer-nav-wrapper --><!-- .site-info -->

			</footer>

Open in new window

Please NOTICE, that this uses a more correct  <footer>  tag, AND this footer is NOT fixed, , I am feeling that there is javascript that sets the footer to go to the right, and be right text aligned. Although you might try to change this -
      <div class="site-info" style="text-align : center;">
and see if the states text centers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dmullisAuthor Commented:
HUh? Did you see the above files where I narrowed it down to what the issue is in the css?  That's okay, I can tell you  are tired of this. I am too.
Thanks for trying to help. I will look at your suggestions above and try all. Sorry you are frustrated. You are an excellent designer. This goes beyond 'hey that page looks ugly'.
0
dmullisAuthor Commented:
Hi everyone.  Thank you all for your research and insights into this issue. I appreciate all of you. I am going to award points. I am limited to 500 and I think each of you deserve some points. Slick put in the most work and even did a great design so I feel he needs 500 points just for that. I am not sure how to get a moderator to do that yet. If anyone knows, let me.  I would give Scott 300 , slick 500, Ray and Kravimir 100 each for trying to help, and putting up with my frustration. Ray thanks for tip on Dev Tools.
0
dmullisAuthor Commented:
Moderator is there any way to increase the points I am giving to these folks? This was a pretty intensive Q and A for all.

Warm Regards,

Deidre
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
dmullis, your appreciation pays 1000 times more than points... Thanks for the follow up.
0
dmullisAuthor Commented:
Thanks Scott. :)

Deidre
0
dmullisAuthor Commented:
Ok, thanks Modalot
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.