Jump to content
Sign in to follow this  
AARRGGHHH

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!

Share this post


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%;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×