* I apologise if this has been received twice. A bit of a problem with my GMAIL
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 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/
______________________________________________________________________
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/
