jason310771 Posted June 20, 2014 Share Posted June 20, 2014 (edited) I just can not get my head around this one at all. I have copied exactly the same code from my own template site and added in new content to the head, main body and footer and no matter what I change I can not get the footer text to show the same on a mobile and a pc like my site I took the code from does. The size of the text just goes large on mobiles, yet the same code is used apart from the slight formatting differences, it should still show the text the same. I opted to copied the resulting source code from the browser for both my site and the new site i am doing and stripped out the main content and header and left just the footer and the main body container html for both and my own site show perfectly on all but still the new site is not playing ball. Below is the code for the new site. Can anyone spot anything that I may have missed that is causing the text to show differently (larger) in the footer on mobile devices. New site <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="keywords" content=""> <meta name="description" content=""> <style> body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #464646; text-decoration: none; background-color: #8C8C8C; margin: 0em; padding: 1.125em; } a, a:visited { color: #164365; text-decoration: underline; } a:hover { color: #6F6F6F; text-decoration: none; } .clear { clear: both; } #main { width: 46.188em; margin:auto; } #main-inner { padding: 0em 1.063em 0.313em 1.063em; border: 0em solid red; min-height: 12.5em; background-color: #FFFFFF; } #footer { margin: 0 auto; clear: both; /*font-size: 0.74em;*/ color: #FFFFFF; text-align: center; width: 46.188em; border: 0.1em solid #ddd; } /* 727 */ #footer a:link, #footer a:visited { color: #FFFFFF; text-decoration: none; } #footer a:hover { color: #FFFFFF; text-decoration: underline; } </style> <meta name="ROBOTS" content="INDEX, FOLLOW"> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head> <body> <div id="main"> <div id="main-inner"> </div> <div class="clear"></div> </div> <div id="footer"> <div style="margin: 0em; text-align: center; font-size: 9pt; border: 0px solid #000;"> <a href="#">clickable link one</a> | <a href="#">clickable link two</a> | <a href="#">clickable link three</a> | <a href="#">clickable link four</a> | <a href="#">clickable link five</a> |© 2014 my shop ™ </div> </div> </body> </html> and just to show what my original code does.. <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="keywords" content=""> <meta name="description" content=""> <style> body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #464646; text-decoration: none; background-color: #8C8C8C; margin: 0em; padding: 1.125em; } a, a:visited { color: #164365; text-decoration: underline; } a:hover { color: #6F6F6F; text-decoration: none; } .clear { clear: both; } #main { width: 46.188em; margin:auto; } #main-inner { padding: 0em 1.063em 0.313em 1.063em; border: 0em solid red; min-height: 12.5em; background-color: #FFFFFF; } #footer { margin: 0em auto; clear: both; color:#FFFFFF; text-align: center; padding: 0em 0em 0em 0em; width: 46.188em; border: 0em dashed #ddd; } #footer a:link, #footer a:visited { color: #FFFFFF; text-decoration: none; } #footer a:hover { color: #FFFFFF; text-decoration: underline; } </style> <meta name="ROBOTS" content="INDEX, FOLLOW"> </head> <body> <div id="main"> <div id="main-inner"> </div> <div class="clear"></div> </div> <div id="footer"> <div style="float: left; width: 6em; border: 0em solid #000;"> </div> <div style="float: left; width: 130px; font-size: 7pt; border: 0px solid #000;"> </div> <div style="float: left; width: 275px; font-size: 8pt; border: 0px solid #000;"> <div style="float: left; width: 200px; border: 0px solid #000;"> © <abbr title="">My company</abbr> </div> <div style="float: left; width: 20px; border: 0px solid #000;"> <a href="[redacted]/sitemap.xml" target="_blank" style="text-decoration: none;">sitemap</a> </div> <div class="clear"></div> designed & hosted by <abbr title="">More footer text</abbr><br>images are copyright of their respective owners </div> </div> </body> </html> Edited June 15, 2017 by requinix Quote Link to comment Share on other sites More sharing options...
gristoi Posted June 20, 2014 Share Posted June 20, 2014 you have to be aware that html will render differently based on the browser / device Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted June 20, 2014 Share Posted June 20, 2014 I tried the code and the text seems fine on my desktop computer in Chrome and my iPhone. What mobile device(s) are you using? Have you tried adding text to other portions of the page to see if the "large" text only appears in the footer? Have you compared other websites on your desktop / mobile devices? Quote Link to comment Share on other sites More sharing options...
jason310771 Posted June 20, 2014 Author Share Posted June 20, 2014 The new site did have a lot of text and images and all shows on my windows mobile and our tablet and on the pc almost 99% the same. 1% is good for me. But having the text so large in the footer is like it being only 10% fine! The footer is the only issue which is why I stripped out the rest of the page, I work with static pages to rule out any other issues with includes and stuff. I gave both version so it could be seen what was needed. But can not get my head around why it fails. The original template code I created for my other site works fine, but has a difference foter layout, but the text is the correct size on all devices, if not identical. I know that trying to cater for al devices with one code is not the best way, but so far I have never had a problem until now. At first I thought it would be an extra font-size in the code or something like a missing div or something. But the code validates and seems to be ok. Ok there is a missing page title, still validates when there is one. I just dont understand why both are almost the same apart from one being contained within divs and the other isn't and yet both show different. I'm going to try to place the link in the new site within divs and left align into one line and see if this works. Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted June 20, 2014 Share Posted June 20, 2014 Have you tried right-clicking the footer in a desktop browser and clicking Inspect Element to see what styles are applied to the footer? Perhaps that will give you a hint as to what's going on. Quote Link to comment Share on other sites More sharing options...
jason310771 Posted June 20, 2014 Author Share Posted June 20, 2014 Ok just in case it is not obvious to me here is the complete results of the styles for each of the elements... for each line I click in the code inspector this is what the right side panel shows...<div id="footer">clear: both;color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;margin-top: 0px;text-align: center;width: 739px;-------------------------------------------------------------------- <div style="float: left;">color: #FFF;floatleftfont-family: Verdana,Arial,Helvetica,sans-serif;text-align: center;-------------------------------------------------------------------- <div style="float: left;">color: #FFF;floatleftfont-family: Verdana,Arial,Helvetica,sans-serif;text-align: center;-------------------------------------------------------------------- <a style="font-size: 8pt;" href="#">clickable link one</a>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;text-decoration: none;-moz-text-decoration-color: #FFF;-moz-text-decoration-line: none;-moz-text-decoration-style: solid;-------------------------------------------------------------------- <span style="font-size: 8pt;"> | </span>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;-------------------------------------------------------------------- <a style="font-size: 8pt;" href="#">clickable link two</a>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;text-decoration: none;-moz-text-decoration-color: #FFF;-moz-text-decoration-line: none;-moz-text-decoration-style: solid;-------------------------------------------------------------------- <span style="font-size: 8pt;"> | </span>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;-------------------------------------------------------------------- <a style="font-size: 8pt;" href="#">clickable link three</a>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;text-decoration: none;-moz-text-decoration-color: #FFF;-moz-text-decoration-line: none;-moz-text-decoration-style: solid;-------------------------------------------------------------------- <span style="font-size: 8pt;"> | </span>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;-------------------------------------------------------------------- <a style="font-size: 8pt;" href="#">clickable link four</a>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;text-decoration: none;-moz-text-decoration-color: #FFF;-moz-text-decoration-line: none;-moz-text-decoration-style: solid;-------------------------------------------------------------------- <span style="font-size: 8pt;"> | </span>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;-------------------------------------------------------------------- <a style="font-size: 8pt;" href="#">clickable link five</a>color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;font-size: 10.6667px;text-align: center;text-decoration: none;-moz-text-decoration-color: #FFF;-moz-text-decoration-line: none;-moz-text-decoration-style: solid;-------------------------------------------------------------------- </div>-------------------------------------------------------------------- <div class="clear"></div>clear: both;color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;text-align: center;-------------------------------------------------------------------- </div>-------------------------------------------------------------------- <div class="clear"></div>clear: both;color: #FFF;font-family: Verdana,Arial,Helvetica,sans-serif;text-align: center;--------------------------------------------------------------------</div>-------------------------------------------------------------------- Quote Link to comment Share on other sites More sharing options...
adam_bray Posted June 20, 2014 Share Posted June 20, 2014 (edited) You're using point font sizes, switch to a method that's optimised for screens (px, em, %). Take a look at this - http://css-tricks.com/css-font-size/. From that post - For good measure, the reason we don't use point sizes for screen display (other than it being absurd), is that the cross-browser results are drastically different Edited June 20, 2014 by adam_bray Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.