White space gets added at the bottom of webpage

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;
}

this happens only on IE.

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

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:

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

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

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>

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)

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.

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

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

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).

[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

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:

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

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.

trying to start a classic argument of whether to use a reset or not

Might this not merit a discussion, though? Maybe a separate topic? Or has this been beaten to death enough in the past? :smile:

I’d be interested to hear perspectives, but I haven’t even Googled or forums-searched it to be honest, just ran across this discussion. I basically use resets the way I use them and haven’t looked for any “different ideas”.

To me, though, resets aren’t really used as a fix for anything - I usually start a project with a set of resets, and then set my stuff up as I intend to.

I do agree that “fixall” solutions can be bad when learning [anything], though… in the IT department here they just really rave about people restarting their danged thin clients all the time. Our ERP software gets the user stuck as logged in oftentimes, if they do that, but because the solution to some issues is “restart computer” then they all just parrot that when anything happens lol.

2 Likes

I’ve always been of hte opinion that once someone knows CSS, they don’t really need to use a standard 1-size-fits-all CSS reset. At least that’s how I was, and it just makes sense that when people make normal progression, they begin to look for that stuff. I mean you gotta figure, they have to take a reset and put it in a file to use on their website. They see that CSS. It’s difficult to ignore.

I don’t feel like arguing either. Just thought I’d give my point of view. OP DOES need to understand and learn about browser inconsistencies and all that jazz.

1 Like

Hehe, well I have seen a few strongly opinionated discussions about it. I believe it has been done to death, but it really is a pros and cons situation / common sense. There are some nice blog posts if you DO google it on whether to use one or not.

I think resets on common problem areas is a good idea.
For me this is margins / padding / sometimes borders etc. But resetting everything I just feel is overkill.
* { padding: 0; margin: 0; }

Some of it is pure preference.

:open_mouth: http://www.sitepoint.com/css-resets-useful-or-useless/

2 Likes

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

THat’s my take on it. I do find the universal selector reset to be a big unneeded. Performance issues aside (which aren’t really a factor anymore)…the main issue is the universal selector messes with form elements BIG time, and are irreversable. So I opt for a bigger reset like Eric Meyers, but I customize it for my own needs. That’s how I personally believe it should be.