# Unity [web] IE rendering problem (extra whitespace)

This topic is 4883 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I mentioned in this thread that I was having a similar spacing issue in IE to the problem described, but as the problem seems slightly different I thought I'd post another thread. The problem is a small amount of extra whitespace showing up beneath a div in Internet Explorer. At the moment I'm just working with a very basic testing layout to try to solve the problem. Firstly, some images to illustrate the problem. The first shows the page correctly rendered in Firefox, the second shows a correct render in Opera, and the third shows IEs bodgy render; note the whitespace under the 'image' along the top. HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Page Title</title>

<body>
<div id="banner_top"></div>
<div id="banner_l1"></div>
</body>
</html>

CSS:
body	{
margin: 0px;
background-color: #000000;
}
#banner_top {
background: #ffffff url('banner_top.jpg') repeat-x;
height: 10px;
}
#banner_l1 {
background-color: #00ff00;
width: 10px;
height: 10px;
}

"banner_top.jpg" is a 20x10 jpeg image I'm using for testing purposes. The second div currently only exists to illustrate the issue clearly, but I will need another div sitting flush with the first in that fashion. So anyone got any ideas what could be causing the extra space to be rendered?

##### Share on other sites
Although I've encountered DIV problems before, this certainly wasn't one of them. However, specifying the overflow property for the second DIV and setting it to hidden has resolved the problem here for me. However, I've not got FireFox or Opera installed on this box, so I can't see if it has another effect elsewhere.

The CSS resulted in the following:

body	{	margin: 0px;	padding: 0px;	background-color: #000000;	}#banner_top {	background: #ffffff url('banner_top.jpg') repeat-x;	height: 10px;	}#banner_l1 {	background-color: #00ff00;	width: 10px;	height: 10px;	overflow: hidden;	}

Does that solve the problem for you?

##### Share on other sites
Quote:
 overflowPossible Values:visiblehiddenautoWhen something has a width or height defined that is shorter than the element, this decides whether to hide the remaining part of the element, or show it. By default it is set to visible. But you can hide the overflow if you wish:

Why the height of that element is as large as it is in IE is beyond me. It definitely makes it look correct here, though.

##### Share on other sites
It does indeed, although I had to apply it to both divs - it seems that applying it only to the one experiencing the original problem 'stretched' the second. [rolleyes]

Firefox remained uneffected, and IIRC Opera ignores the overflow property; in any case, it also still renders correctly.

Thank you very much for the solution in any case, hopefully that won't cause any additional unwanted cascade effects.

##### Share on other sites
No problem. I learnt something myself. [wink]

• ### What is your GameDev Story?

In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

• 10
• 11
• 13
• 9
• 11
• ### Forum Statistics

• Total Topics
634090
• Total Posts
3015432
×