May 14, 201214 yr Yo chaps (and the odd lady), Having a layout issue that should be an easy one but my brains fried and i'm supposed to be on holiday As you can see in the below screeny, the iPhone version seems to be having issues with its undercarriage. Screenies... Code is as follows... HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Deptfordx</title> <link href="style.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div id="wrapper" class="clearfix"> <div id="left-column"> <img src="img/deptford-main.png" width="475" height="528" alt="Follow Deptford X. London's Contemporary art festival."> <div id="copy"> <p>Deptford X exists to promote the best contemporary visual art and celebrate that art with the widest possible audience. It is an arts event born of Deptford's creative community and based on a belief in the limitless potential of the area.</p> <p>Deptford X will produce a unique high quality contemporary art festival in 2012 which will coincide with the Olympic Games in London.</p> <p>If you would like to find out more then don't hesitate to get in touch. <a href="mailto:admin@deptfordx.org">admin@deptfordx.org</a></p> </p> </div> <div id="social"> <div id="previous"> <a href="http://www.deptfordx.webeden.co.uk/"><img src="img/visit-button.png" width="234" height="33"></a> </div> <div id="social-buttons"> <a href="http://twitter.com/#!/deptfordx"><img src="img/twitter.png" width="30" height="30"></a><a href="http://www.facebook.com/DeptfordX"><img src="img/facebook.png" width="30" height="30"></a> </div> </div> </div> <div id="right-column"> <div id="signup-container"> <h1><img src="img/new-site.png" width="214" height="14" alt="New site coming soon"></h1> <div id="signup-form"> <p class="signup-p"><strong>SIGN UP</strong> to our newsletter to be the first to hear when it's ready!</p> <form action="mailinglist-process.php" method="post"> <p><input type="text" value="Name" name="yourname"></p> <p><input type="text" value="Email + Press enter" name="email"></p> <div id="hide-submit"><input type="submit" name="submit"></div> </form> </div> </div> </div> </div> </body> </html> CSS /* --------- RESET (inc HTML5) ---------------- */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,input{border:0;font-family:inherit;font-size:100%; font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align: baseline}:focus{/* remember to define focus styles! */outline:0}body{background:#fff;line-height:1}ol,ul{list-style: none} table{/* tables still need 'cellspacing="0"' in the markup */border-collapse:separate;border-spacing:0}caption,th,td{font-weight:normal;text-align:left}blockquote:before,blockquote:after,q:before,q:after{content: ""} blockquote,q{quotes: "" ""}a img{border: 0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block}.clear{clear:both}.clearfix:after{content:".";visibility:hidden;display:block;height:0; clear:both}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}del{text-decoration: line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help} /* ------------ Main ------------ */ body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 130%; color:#000; background-color:#fec458; background-image: url(img/body-bg.jpg); background-repeat: repeat-x; } #wrapper { background-color:#fcb01d; width: 1010px; margin-right: auto; margin-left: auto; margin-top:18px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-right-color: #140004; border-bottom-color: #140004; border-left-color: #140004; } a:link, a:visited, a:active, a:hover { color: #140004; text-decoration: underline; } strong { font-weight:bold; } /* ------------ Left Column ------------ */ #left-column { float: left; width: 496px; padding-left: 20px; } #copy { width:408px; border-top-width: 1px; border-top-style: dotted; border-top-color: #140004; margin-top:16px; padding-top:26px; } #copy p { padding-bottom:15px; } #previous { float:left; color:#fff; } #previous p { float:left; } #previous img { float:left; padding-top:2px; padding-left:4px; } #social { margin-top:25px; } #social-buttons { float:right; margin-right:100px; } #social-buttons img { padding-left:10px; } /* ------------ Right Column ------------ */ #right-column { float: right; width: 490px; background-image: url(img/right-column-bg.png); background-repeat: no-repeat; background-position: right top; height: 888px; } #signup-container { width:236px; background-color:#fff; float:right; } #signup-container h1 { background-color:#000; color:#fff; text-align:center; padding: 10px 0px 10px 0px; } p.signup-p { margin-bottom:8px; } #signup-form { padding: 15px 10px 9px 10px; } #signup-form input { font-family:Georgia, "Times New Roman", Times, serif; background-color:#fcb01d; border:0; font-style:italic; width:208px; padding-top:6px; padding-bottom:6px; padding-left:8px; margin-bottom:2px; } #hide-submit { width:1px; height:1px; overflow:hidden; padding-left:10px; } cheers for the help chaps.
May 14, 201214 yr Why have you got height: 888px; for #right-column ? It seems rather a lot and it adds a lot of blank space with a gold background at the bottom.
May 18, 201214 yr Author Cheers for the replies guys. I'm actually on holiday but thought i'd have a sneaky peek while the missus was otherwise pre-occupied. Wickham, that DIV is set to 888px high to accommodate the background image. Is this not the case on your machine? Any chance of a sneaky screeny for me to have a butchers at? Thanks again guys. Any more answers out there will be appreciated.
May 18, 201214 yr Wouldn't min-height work better? That way when it expands it won't be stuck at 888px. I'd find it easier to help though with a link tbh.
May 18, 201214 yr I was working off your code without images as you haven't given a link and Firefox just showed a large orange space at the bottom, but IE shows the outline of an image so I can see what you are trying to do. Your images in the first post show one line height difference and you have a stray </p> on line 17 which may be causing it. The validator also finds two more extra </p> tags at the bottom, but after some testing, I found that <p>Text<hr></p> caused an error but <p>Text</p><hr> doesn't cause an error. Edit - I downloaded your code on 14th and it ended like this:- </form> </div> </div> </div> <p>Text<hr></p> </div> <p>Text2<hr></p> </body> </html> but that code isn't the same as your first post now and it doesn't look as if you edited it, so I don't know how I got the p tags and hr tags. Edited May 18, 201214 yr by Wickham
May 18, 201214 yr Author I'd find it easier to help though with a link tbh. At that time there wasn't a live link to be had but feel free to have a poke around here now cheers mate. Your images in the first post show one line height difference and you have a stray </p> on line 17 which may be causing it. The validator also finds two more extra </p> tags at the bottom, but after some testing, I found that <p>Text<hr></p> caused an error but <p>Text</p><hr> doesn't cause an error. Cheers Wickham. Strangely enough, those errors were introduced while i was editing the OP rather than in the actual code. Feel free to have a look at the link i've posted above and let me know if you spot anything 'odd'. Very appreciated chaps!
May 18, 201214 yr Your two images also show different font sizes, there are two extra lines in the left image. Does this push everything up and down?
May 18, 201214 yr Author Your two images also show different font sizes, there are two extra lines in the left image. Does this push everything up and down? bloody good point that, and i'm not sure how i missed it! Thing is, the designer was very adamant that i set everything at a fixed size (14px for body text) so i'm not sure why the iPhone is creating larger text :s
May 18, 201214 yr I wondered why the font size was different as I couldn't see anything in your code that would change it. However, I found this:- http://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca which says that iPhones do change the font size when the orientation is changed.
May 18, 201214 yr Author Nice spot, could very well be that. I've applied the fix and sent it on the way to the client and will no doubt here back whether it is a winner or not. I'll let you chaps know! Thanks again guys.
Create an account or sign in to comment