Jump to content

Strange Footer Issue


Recommended Posts

I'm having a <footer> 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 us identical HTML and CSS 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;    
}
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>');
}

Yes, I know, the CSS is politically incorrect because I don't use margin and padding.  That does not cause this kind of issue.  

So, 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!

Link to post
Share on other sites

It might be related to this: https://stackoverflow.com/questions/2545542/font-size-rendering-inconsistencies-on-an-iphone It's an issue I've encountered before where iPhone browsers try to enlarge text that's too tiny in order to make it readable.

Try adding this to your stylesheet to see if that fixes the issue.

body {
    -webkit-text-size-adjust: 100%;
}

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...