White space gets added at the bottom of webpage

HTML & CSS
1

Hello,
I am facing the issue of white space getting added to the bottom of webpage.
This happens when I change the drop down value on my webpage. I checked margin/padding and it’s set to zero. However, when I uncheck and check back the ‘box-sizing: border-box’ property through the developer tool bar then the white space is gone.
Any pointers on how to reset the CSS or resolve this issue.
(It’s intranet site and webpage, so not accessible on net but I can share the CSS snippet if needed… checking alternative to give you webpage link)

Thank you!

2

Yes as mentioned we need a reproducable test.Please try and reduce the HTML/CSS if possible and give us a full code example to replicate. Or a live site.

3

If you can’t give out a link, do F12 in IE and use developer tools. You’ll want to learn how to use this (free) tool, but it should let you highlight the page and show you what’s responsible. Are you sure that your form/selected classes are set to the same as unselected?

4

Is it also possible you might have an open tag? i’d say better than ie use chrome go at the bottom where you have the white space & do a right click inspect element. if possible run it through an html validator too.

5

I tried through F12 in IE, form has below padding 20px. However, blank space issue occurs only on IE but not on Chrome/FireFox. If I deselect form padding in F12, blank space is gone. I did check form/selected classes upon select/deselect but yes their values don’t change. Thank you for your inputs and time.

.lhtml-form {
background-color: #F2F5FF;
border-width: 1px;
border-style: solid;
padding: 0 20px;
}

6

this happens only on IE.

7

I am closing this thread as don’t able to give enough info and I value your time.

8

You haven’t given us a test case. I wish we could be of more help but you have only given us one random code snippet to go off of. We can’t reproduce the test case with just that. We need more code. A live link or a full page of code to reproduce. We are not magicians :slight_smile:

9

speak of yourself… I know I am :stuck_out_tongue:

Anyway, It seems that he’s not able to provide more information. He spoke about an intranet so maybe it is too confidential to share a pic (even if it is just a zoom of the problematic area) with us and the correponding code

10

Don’t forget there are various ways to post a demo without breaching privacy. See here: Forum Posting Basics

11

Should have remembered that you were.

Anyway, do you hae a CSS reset in your code? Might be default margins and paddings on elements, e.g. <body>

12

It’s a blind stab, but I think some element may just be dropping. OR you may have a container with explicit height somewhere and it’s possible IE is handling that overflow differently. I would make this my guess , over the padding, as the padding in your example would only affect HORIZONTAL (second value) padding and not vertical (first value)

13

Modern version of IE you can still right click and highlight/inspect elements.

*It could also be a parent div collapsing in theory depending on what it looks like.

14

The OP sent me a codepen link, which indicates that there’s no doctype present, which may be the source of the issue.

15

The issue is that at the bottom of your webpage, you have a <h1> which by default has a bottom margin on it.

To fix this and future errors, I recommend you learn and implemenet a CSS reset

http://www.codefundamentals.com/blog/css-resets.php

1 Like
16

I’m still wary about using the answer “use a reset”.

Depending on the problem, thats a lot of CSS resetting and a lot of CSS then setting, for sometimes one line of css removing margin from H1. h1 {margin:0;} compared to a page of resets and then perhaps setting the ones that are required again.

Please make sure you read the pros and cons about resets before you decide to add one.

It is a good answer for a lot of cross browser styling issues. But with a little forethought I think it can often be avoided and is the “lazy” answer.

(This is just my opinion and is not a critisism of the previous answer).

17

[ot]It is true that sometimes you do not need to reset all the elements, only a few. There are different types of resets. But I, personally, prefer take total control and reset everything than find out that somethin doesn’t work because I didn’t reset it in the first place. And when you’re debugging, finding what causes the problem is harder… so I prefer to know that I don’t have a default margin, padding, border… that I can’t find and that’s messing up my design.
But it is just a way of work and everyone is different[/ot]

1 Like
18

This is very true. I have found myself resetting the margin and padding to 0 with almost everything I build. I typically also use

html { box-sizing: border-box;} 
*, *:before, *:after { box-sizing: inherit; vertical-align:top;}

So I dont need to worry quite as much about border / padding.

But I have rarely felt it nessecary to reset everything. Maybe I have been lucky with my styling options. Or Im doing it wrong and am just blissfully ignorant :smiley:

19

It’s not NECCESSARY to reset everything. However hte OP seems to be more of a beginner and he may not be skilled enough to know about issues from margins cropping up. A CSS reset would eliminate this issue until such time he can tackle it and recognize those issues.

1 Like
20

Thats my issue with the answer though. If someone lacks knowledge and is given a “fix all” solution. They will always use it and often dont look any deeper till much further down the line.

Again this is mainly personal opinion im not trolling or trying to start a classic argument of whether to use a reset or not … but I think its bad practice to give a fix all solution to a beginner without making it clear that this might not be best practice for them.

As I said bud not a critisism, just trying to make sure OP does read up about it rather than thinking its the best solution to all problems.