Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Matt Grass
Matt Grass
Courses Plus Student 37 Points

IE adding white space to a page.

Hi,

I am having some issues with IE adding white space to the website on a single page. It has to do with some stray CSS or html, but I can not find it.

is there a reason that IE would add white space to the website. The guy that did the HTML and CSS has done a pretty bad job, but I have managed to get the site working. But IE is bugging the this page out.

http://www.thepawpack.co.uk/?page_id=41

Julian Gutierrez
Julian Gutierrez
19,325 Points
Julian Gutierrez
Julian Gutierrez
19,325 Points

What version of IE are you using?

Matt Grass
Matt Grass
Courses Plus Student 37 Points

Sorry I forgot to mention, it is the latest version running on Windows 10. Ah I forgot they changed the name of it to Microsoft Edge

Christian Andersson
Christian Andersson
8,712 Points

I cannot see any white space. Where is it exactly?

Matt Grass
Matt Grass
Courses Plus Student 37 Points

Its above the text on the service page (the link I sent) I have tried alot of things to get it to work but nothing has so far.

1 Answer

Christian Andersson
Christian Andersson
8,712 Points

It's a lot of code to go through, and the dev tools in Edge are really bad. However, I can see alot of css properties that probably shouldn't be there.

First of all, the format you have for the table-table-cell approach is not entirely correct. The first div needs to be display: table along with the width and height of the cell. The second element needs to have display: table-cell and vertical-align: middle. Use text-align to center the content if you want that. Don't use absolute positioning here, use relative.

I also saw that you have in several places height: xx%. This will give the element a height based on the available width. So if you have height: 80% and your available width is 1000px, the height will always be 800px. So you cannot really use percentage for height the way you do it. Give it a static height instead, or use another approach.

You can probably get rid of one of the InnerWrapNew and you probably don't need those margins either.

http://jsfiddle.net/xq6hkw71

Try the above and let me know how it works for you.

Matt Grass
Matt Grass
Courses Plus Student 37 Points

OK I will try it now, thank you Christian

Matt Grass
Matt Grass
Courses Plus Student 37 Points

I am rebuilding the page with the code you suggested and its all working much better, I have still more work to do but I should be able to get it up a running now, thank you very much.

Christian Andersson
Christian Andersson
8,712 Points

That's good to hear! Glad I could help.