Unusual Footer Behavior

HTML & CSS
1

I’m having a issue that I cannot figure out. The footer displays exactly as expected on my desktop at several different resolutions. On my iPhone, sometimes the footer displays normally, and sometimes it displays at a font size of 100% (it should be quite a bit smaller).

The part that’s confusing me is that all of the pages use identical HTML, CSS, and JS code:

HTML: 

		</main>
		<footer>
			<script>footer()</script> <!-- footer() is in an external .js page so all pages read the same footer() -->  
		</footer>  
	</body>
</html>

CSS: 

html
{
background-color:#000000;
width:100%; 
margin-left:auto;
margin-right:auto;
}
 
header 
{
background-color:#000000;
width:100%; 
max-width:1024px;  
margin-left:auto;
margin-right:auto;
}

body 
{
background-color:#000000;
width:100%; 
max-width:1024px;  
margin-left:auto;
margin-right:auto;
}

nav 
{
background-color:#000000;
width:100%; 
max-width:1024px; 
margin-left:8px;
margin-right:auto;
}

main
{
background-color:#000000;
width:100%; 
max-width:1024px;   
margin-left:auto; 
margin-right:auto;
/* float:right; */ 
}


h1, h2, h3, h4, h5, h6 
{
font-family:calibri,verdana,arial,sans-serif;
color:#938FEB;  
text-align:center; 
margin-left:auto;  
margin-right:auto; 
}

p, form, ul, td   
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
/* text-align:left; */ 
}

li     
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:left;
font-weight:bold;
}

div  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;  
}

span  
{
font-family:calibri,verdana,arial,sans-serif;
color:#FF0000; 
text-align:center;
}

footer
{
background-color:#000000; 
width:100%;  
max-width:1024px;   
bottom:0; 
/* float:right; */
/* position:fixed; */  
margin-left:auto;
margin-right:auto;
font-size:10px; 
font-family:calibri,verdana,arial,sans-serif;
color:#FFFFFF; 
text-align:center;
}

#wrapper
{
width:100%; 
}

button 
{
background-color:#8000FF; 
border:none;
border-radius:12px;
color:white;
padding:12px 24px;
text-align:center;
text-decoration:none;
display:inline-block;
font-family:calibri,verdana,arial,sans-serif;
font-size:14px;
}

button:hover
{
background-color:#CC0000;
box-shadow: 10px 10px 10px RGBA(255,255,255,0.8);
}

a:link
{
font-family:calibri,verdana,arial,sans-serif;
color:#00CCFF;
text-decoration:underline; 
}

a:hover
{
font-family:calibri,verdana,arial,sans-serif;
/* color:#00CCFF; */
color:FF0000; 
}

a:visited
{
font-family:calibri,verdana,arial,sans-serif;
/* color:#800080; */ 
color:#938FEB;    
}

JavaScript:

function footer()
{
			document.getElementsByTagName("footer")[0].innerHTML = 
			'<p>Line 1<br>' + 
			'Line 2<br>' +
			'Line 3<br>' + 
			'©2018 Line 4<br></p>'; 	
}

I also tried: 

function footer()
{
			document.getElementsByTagName("footer")[0].innerHTML = 
			'<div>Line 1<br>' + 
			'Line 2<br>' +
			'Line 3<br>' + 
			'©2018 Line 4<br></div>'; 	
}

and tried: 

function footer()
{
		document.write('<div>Line 1.<br>');  
		document.write('Line 2<br>'); 
		document.write('Line 3<br>');
		document.write('©2018 Line 4<br>');
}

How can the same HTML, CSS, and JavaScript cause different pages to print the footer in different ways on the same iPhone?

Thank you very much!

2

Hi there AARRGGHHH,

you really should consider using Server side PHP include to do this
rather than Client side Javascript..

Further reading:-

http://tizag.com/phpT/include.php

If you are unwilling to take the sensible route then your code should
look something like this…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body> 

<footer></footer> 
	
<script>
( function( d ) {
   'use strict';   
    d.getElementsByTagName('footer')[0].innerHTML = 
      '<p>Line 1<br>' + 
      'Line 2<br>' +
      'Line 3<br>' + 
      '©2018 Line 4<br></p>'; 	  
 }( document ));
</script>

</body>
</html>

coothead

2 Likes
3

How is your footer function any different in how it works versus mine? I don’t see it.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.