Quantcast

page gap in IE edge/11

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

page gap in IE edge/11

Tom Livingston
Here is a sample page:
https://tomliv.com/wip/

I've tried various page sizes on load and resizing and can't track down the
space I am getting in IE Edge and 11. Can anyone tell me where the extra
space in the page is coming from? The page scrolls for a bit for 'no
apparent reason'. It's fine in FF, Chrome and Safari.

I am using transition to vertical center the content at a viewport height
greater than 750px.

Thanks

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: page gap in IE edge/11

Tom Livingston
UPDATE: I added overflow:hidden to .pagewrap on *my local page* and this
made the extra space go away. I'd still love to know if it can be solved
w/o the overflow:hidden.

Thanks!



On Tue, Mar 21, 2017 at 3:54 PM, Tom Livingston <[hidden email]> wrote:

> Here is a sample page:
> https://tomliv.com/wip/
>
> I've tried various page sizes on load and resizing and can't track down
> the space I am getting in IE Edge and 11. Can anyone tell me where the
> extra space in the page is coming from? The page scrolls for a bit for 'no
> apparent reason'. It's fine in FF, Chrome and Safari.
>
> I am using transition to vertical center the content at a viewport height
> greater than 750px.
>
> Thanks
>
>
>

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: page gap in IE edge/11

Mike Manley
In reply to this post by Tom Livingston
Tom Livingston wrote:

> Here is a sample page:
> https://tomliv.com/wip/
>
> I've tried various page sizes on load and resizing and can't track down the
> space I am getting in IE Edge and 11. Can anyone tell me where the extra
> space in the page is coming from? The page scrolls for a bit for 'no
> apparent reason'. It's fine in FF, Chrome and Safari.
>
> I am using transition to vertical center the content at a viewport height
> greater than 750px.
>
> Thanks
>
Not sure if you are expecting a specific look here but..

In Firefox-45.8.0 and Seamonkey-2.46 on my  "Mozilla/5.0 (X11; Linux
x86_64; rv:49.0) Gecko/20100101 Firefox/49.0" Gentoo linux stable
builds, with both browsers sized at about 60% of available desktop real
estate on a 27" ISP monitor at 1920 by 1080, display a vertical scroll
bar and scrolling is necessary.  If I maximise the browser windows, the
vertical scroll bar disappears.  However the content displayed, appears
to be aligned to the bottom of the viewport and not centred.

Michael
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: page gap in IE edge/11

Philippe Wittenbergh
In reply to this post by Tom Livingston

> On Mar 22, 2017, at 4:54 AM, Tom Livingston <[hidden email]> wrote:
>
> Here is a sample page:
> https://tomliv.com/wip/
>
> I've tried various page sizes on load and resizing and can't track down the
> space I am getting in IE Edge and 11. Can anyone tell me where the extra
> space in the page is coming from? The page scrolls for a bit for 'no
> apparent reason'. It's fine in FF, Chrome and Safari.

Can you clarify what “page gap” you mean? Page displays identically in Safari and Edge latest here.

I should note that the form overflows the window in Edge no matter what, as it is too tall for the (maximised) window on that laptop.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: page gap in IE edge/11

Tom Livingston
For me, there was extra height to the page, with a white bg. I could scroll
past the orange bg. Again, in I.E. Edge/11.


On Tue, Mar 21, 2017 at 7:26 PM Philippe Wittenbergh <[hidden email]> wrote:

>
> > On Mar 22, 2017, at 4:54 AM, Tom Livingston <[hidden email]> wrote:
> >
> > Here is a sample page:
> > https://tomliv.com/wip/
> >
> > I've tried various page sizes on load and resizing and can't track down
> the
> > space I am getting in IE Edge and 11. Can anyone tell me where the extra
> > space in the page is coming from? The page scrolls for a bit for 'no
> > apparent reason'. It's fine in FF, Chrome and Safari.
>
> Can you clarify what “page gap” you mean? Page displays identically in
> Safari and Edge latest here.
>
> I should note that the form overflows the window in Edge no matter what,
> as it is too tall for the (maximised) window on that laptop.
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: page gap in IE edge/11

Philippe Wittenbergh

> On Mar 22, 2017, at 8:28 AM, Tom Livingston <[hidden email]> wrote:
>
> For me, there was extra height to the page, with a white bg. I could scroll
> past the orange bg. Again, in I.E. Edge/11.

Hmm - I did’t see that at all, but then, I can’t make the window tall enough (screen size limit of the laptop).

Have you thought about using `vh` units to set the height (as in: ` body, .pagewrap { min-height:100vh } `) ? And remove all that percentage-based height/min-height. I suspect that might be the issue.

You could go further, and use `display:flex; flex-flow:column;` to center your content (and on the way simplify your markup…). Of course, all depends on the browsers you need to support.

Minimal example: https://dev.l-c-n.com/_junk/__x.html


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: page gap in IE edge/11

Tom Livingston
Looks like I should be able to use vh. I'll give that a try and test.


On Tue, Mar 21, 2017 at 8:00 PM Philippe Wittenbergh <[hidden email]> wrote:

>
> > On Mar 22, 2017, at 8:28 AM, Tom Livingston <[hidden email]> wrote:
> >
> > For me, there was extra height to the page, with a white bg. I could
> scroll
> > past the orange bg. Again, in I.E. Edge/11.
>
> Hmm - I did’t see that at all, but then, I can’t make the window tall
> enough (screen size limit of the laptop).
>
> Have you thought about using `vh` units to set the height (as in: ` body,
> .pagewrap { min-height:100vh } `) ? And remove all that percentage-based
> height/min-height. I suspect that might be the issue.
>
> You could go further, and use `display:flex; flex-flow:column;` to center
> your content (and on the way simplify your markup…). Of course, all depends
> on the browsers you need to support.
>
> Minimal example: https://dev.l-c-n.com/_junk/__x.html
>
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
> --

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: page gap in IE edge/11

Tom Livingston
I updated the page to use vh. Seems to work well.

Not sure if I can go the flex route. Will need to look into browser support
first, but I hope I can. Much simpler.



On Tue, Mar 21, 2017 at 8:03 PM, Tom Livingston <[hidden email]> wrote:

> Looks like I should be able to use vh. I'll give that a try and test.
>
>
> On Tue, Mar 21, 2017 at 8:00 PM Philippe Wittenbergh <[hidden email]>
> wrote:
>
>>
>> > On Mar 22, 2017, at 8:28 AM, Tom Livingston <[hidden email]> wrote:
>> >
>> > For me, there was extra height to the page, with a white bg. I could
>> scroll
>> > past the orange bg. Again, in I.E. Edge/11.
>>
>> Hmm - I did’t see that at all, but then, I can’t make the window tall
>> enough (screen size limit of the laptop).
>>
>> Have you thought about using `vh` units to set the height (as in: ` body,
>> .pagewrap { min-height:100vh } `) ? And remove all that percentage-based
>> height/min-height. I suspect that might be the issue.
>>
>> You could go further, and use `display:flex; flex-flow:column;` to center
>> your content (and on the way simplify your markup…). Of course, all depends
>> on the browsers you need to support.
>>
>> Minimal example: https://dev.l-c-n.com/_junk/__x.html
>
>
--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Loading...