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/
