BuildMyWeb Posted August 23, 2014 Share Posted August 23, 2014 http://buildmyweb.org/testing/starter/ at the link above, you can see a test-page. the problem im having is that the content in the footer gets cutoff on the right side of the footer when viewed in an ipad. id love to hear it if anyone can figure out why here is the html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content = "Under Construction" /> <meta name="description" content="is currently Under Construction." /> <title>Under Construction</title> <link rel="stylesheet" type="text/css" href="bmw_footer_abs.css" /> </head> <body id="page_home"> <div id="wrapper"> <div id="banner"> </div> <!-- close banner --> <div id="main"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <!-- close main --> </div> <!-- close wrapper --> <div id="footer"> <div id="footer_content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <!-- close footer_content --> </div> <!-- close footer --> </body> </html> and the css: html { position: relative; min-height: 100%; } body { margin: 0 0 100px; /* bottom = footer height */ } #footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; min-width:1000px; background:gray; } #wrapper { position:relative; top:0px; margin:0 auto; width:1000px; text-align:left; background:pink; padding:0px; } /* **************** BANNER *************** */ #banner { float:left; background:green; width:100%; height:10px; } /* **************** MAIN *************** */ #main { float:left; width:100%; background-color:#f0f3f8; } /* **************** FOOTER *************** */ #footer { font-size:85%; line-height:1.3; } #footer_content { width:1000px; margin:0px auto; background:orange; } Quote Link to comment Share on other sites More sharing options...
CroNiX Posted August 23, 2014 Share Posted August 23, 2014 Haven't tried on iPad, but you have the #footer-content set at 1000px width. Try 100% Quote Link to comment Share on other sites More sharing options...
BuildMyWeb Posted August 23, 2014 Author Share Posted August 23, 2014 thanks for the suggestion cronix. i have #footer_content at a fixed width of 1000px so that i have a centered div to work within of finite width. setting it to 100% will cause it to stretch across the entire browser window. not what im after. if that was the goal, i wouldnt need #footer_content at all. would just place the content in #footer. Quote Link to comment Share on other sites More sharing options...
fastsol Posted August 23, 2014 Share Posted August 23, 2014 I just confirmed, the issue is your delcaration of the 1000px. Quote Link to comment Share on other sites More sharing options...
BuildMyWeb Posted August 23, 2014 Author Share Posted August 23, 2014 thx fastsol. so what im trying to accomplish is to have a 1000px wide block element centered within #footer to contain the footer content. if what im doing is the problem, do you have a suggestion on how to better do it? Quote Link to comment Share on other sites More sharing options...
BuildMyWeb Posted August 26, 2014 Author Share Posted August 26, 2014 anyone have any thoughts on how to correct this? Quote Link to comment Share on other sites More sharing options...
fastsol Posted August 26, 2014 Share Posted August 26, 2014 Without knowing the exact end result and the exact content you are wanting to put in the footer it's hard to say the exact route you should take on this. But I would start by putting the footer inside the main wrapper since it has the same width anyway and get rid of the width rules on the footer and divs within it. I always used 990px for width if I was doing a static width site. You should also switch to the newer html5 doctype. I also get a 404 error for the global.js file. Quote Link to comment Share on other sites More sharing options...
CroNiX Posted August 26, 2014 Share Posted August 26, 2014 I'd advise using a popular responsive/mobile css framework and not muck with stuff like this with so maaaany different devices/sizes/resolutions which are constantly changing Twitter Bootstrap would be good, and it's easy to use. Quote Link to comment Share on other sites More sharing options...
BuildMyWeb Posted August 27, 2014 Author Share Posted August 27, 2014 thank you guys. i have the footer outside the wrapper, fastsol, because i want it to be 100% browser width. at least the background image. the content that goes inside the footer should only be 1000px wide and centered. just trying to find a good way to go about it. what i have has always worked wonderfully for me but, as the thread states, it breaks slightly on my ipad. Quote Link to comment Share on other sites More sharing options...
Solution BuildMyWeb Posted August 28, 2014 Author Solution Share Posted August 28, 2014 (edited) for anyone interested in the answer i was happy with... "Generally speaking for mobile devices you don't want to set fixed widths and instead use max-width." so i replaced #footer_content width:1000px;with #footer_content { max-width:1000px; }and all is working as intended now. thanks to cronix and fastsol for getting me on the right track. Edited August 28, 2014 by BuildMyWeb 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.