Tom, Thank you ever so much. It works now on all browsers as expected. Kind regards, David
On Tue, Dec 26, 2017 at 8:14 PM, Tom Livingston <tom...@gmail.com> wrote: > Here's a suggestion on how to do what I think you're after: > > https://tomliv.com/css-d/halliday/index2.html > > On Tue, Dec 26, 2017 at 11:53 AM, David Halliday <tetrah...@gmail.com> > wrote: >> >> Tom, Thank you very much for putting the test page on your site. >> >> On my pc, the problem is still there. Please see the attached image. >> >> Also, have tried an online emulator for iPhone: and box "main" still >> crosses mainFrame box:- >> >> >> http://mobiletest.me/iphone_5_emulator/?u=https://tomliv.com/css-d/halliday/ >> >> Thank you anyway! >> >> On Tue, Dec 26, 2017 at 6:50 PM, Tom Livingston <tom...@gmail.com> wrote: >> > https://tomliv.com/css-d/halliday/ >> > >> > On Tue, Dec 26, 2017 at 10:27 AM, David Halliday <tetrah...@gmail.com> >> > wrote: >> >> >> >> Tom, >> >> I've tried adding "box-sizing: border-box;" but it hasn't made any >> >> difference. I'm using Windows on my PC. Unfortunately cannot get >> >> hold of a Mac. >> >> >> >> I wonder if it is to do with the older version of Chrome (using >> >> Version 49.0.2623.112 on Windows XP, yes, I know it is old!). >> >> Thanks anyway. >> >> >> >> On Tue, Dec 26, 2017 at 5:39 PM, Tom Livingston <tom...@gmail.com> >> >> wrote: >> >> > I was unable to reproduce your issue (i think) in Chrome. I added >> >> > your >> >> > original doctype to your latest simplified code, and saw no gap in >> >> > latest >> >> > Chrome on Mac. >> >> > >> >> > However, I got a slight vertical scroll which, if I'm right, you >> >> > don't >> >> > want >> >> > so I added this to the styles: >> >> > >> >> > *{box-sizing: border-box;} >> >> > >> >> > does that help? >> >> > >> >> > >> >> > >> >> > >> >> > On Tue, Dec 26, 2017 at 8:58 AM, David Halliday <tetrah...@gmail.com> >> >> > wrote: >> >> > >> >> >> Actually the style is in the head section. >> >> >> >> >> >> Removing the margin-bottom works on IE . in both Chrome + FF, >> >> >> however, the black space appears and box "main" crosses box >> >> >> mainFrame. >> >> >> >> >> >> A simplified version with only 2 boxes (mainFrame + main) >> >> >> illustrates >> >> >> the problem. I have added a light background to box "main" to make >> >> >> it >> >> >> clearer, I think. >> >> >> >> >> >> Please note that the same basic design is needed on several pages. >> >> >> The content of box "main" varies. Problem occurs with large >> >> >> content. >> >> >> So I've added extra newline "<br>" at the bottom of "main" to >> >> >> illustrate this. >> >> >> >> >> >> The simplified version is as follows (kept bottom-margin as >> >> >> before):- >> >> >> <html><head> >> >> >> >> >> >> <style> >> >> >> html,body{height:100%;text-align: center;background:BLACK;} >> >> >> body{padding:0px;margin:0px; text-align: center;} >> >> >> >> >> >> .mainFrame{ >> >> >> width: 1000px; >> >> >> min-height:100%; >> >> >> height: 100%; >> >> >> background: white; >> >> >> border: 5px solid #CCCCCC; >> >> >> margin:auto; >> >> >> } >> >> >> html>body .mainFrame {width:994px; height:auto;} >> >> >> >> >> >> .main{ >> >> >> position: relative; >> >> >> top: 80px; >> >> >> width:720px; >> >> >> direction:rtl; >> >> >> background: #C0C0C0; >> >> >> margin-bottom: 15%; >> >> >> } >> >> >> html>body .main{top: 103px;margin-bottom: 20%;} >> >> >> </style> >> >> >> </head> >> >> >> <body topmargin='0' leftmargin='0'> >> >> >> <div class='mainFrame' align='center'> >> >> >> >> >> >> <div class='main'> >> >> >> <a href='?action=1'>Option 1</a><br><br> >> >> >> <a href='?action=2'>Option 2</a><br><br> >> >> >> <a href='?action=3'>Option 3</a><br><br> >> >> >> <a href='?action=4'>Option 4</a><br><br> >> >> >> <a href='?action=5'>Option 5</a><br><br> >> >> >> <a href='?action=6'>Option 6</a><br><br> >> >> >> <a href='?action=7'>Option 7</a><br><br> >> >> >> Extra Options<br><br><br> >> >> >> <a href='?action=8'>Option 8</a><br><br> >> >> >> <a href='?action=9'>Option 9</a><br><br> >> >> >> <a href='?action=10'>Option 10</a><br><br> >> >> >> <a href='?action=11'>Option 11</a><br><br> >> >> >> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> >> >> >> </div> >> >> >> </div> >> >> >> </body></html> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> On Tue, Dec 26, 2017 at 11:16 AM, Yolanda van Nieuwkoop >> >> >> <yolanda.van.nieuwk...@gmail.com> wrote: >> >> >> > Have you tried moving this style into the head section? >> >> >> > (style is supposed to be included only on the head of the >> >> >> > document. >> >> >> > May >> >> >> > interfere with rendering otherwise) >> >> >> > >> >> >> > Yolanda >> >> >> > >> >> >> > ~ May Peace Prevail on Earth >> >> >> > >> >> >> > >> >> >> > >> >> >> > >> >> >> > Op 26 dec. 2017 06:23 schreef "Karl DeSaulniers" >> >> >> > <k...@designdrumm.com>: >> >> >> > >> >> >> >> Have you tried removing the margin-bottom on a couple of your >> >> >> >> styles? >> >> >> >> >> >> >> >> Best, >> >> >> >> Karl >> >> >> >> >> >> ______________________________________________________________________ >> >> >> css-discuss [css-d@css-discuss.org] >> >> >> http://www.css-discuss.org/mailman/listinfo/css-d >> >> >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> >> >> List policies -- http://css-discuss.org/policies.html >> >> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> >> >> >> > >> >> > >> >> > >> >> > -- >> >> > >> >> > Tom Livingston | Senior Front End Developer | Media Logic | >> >> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >> >> > >> >> > >> >> > #663399 >> >> > >> >> > ______________________________________________________________________ >> >> > css-discuss [css-d@css-discuss.org] >> >> > http://www.css-discuss.org/mailman/listinfo/css-d >> >> > List wiki/FAQ -- http://css-discuss.incutio.com/ >> >> > List policies -- http://css-discuss.org/policies.html >> >> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > >> > >> > >> > >> > -- >> > >> > Tom Livingston | Senior Front End Developer | Media Logic | >> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >> > >> > >> > #663399 > > > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
