Sign in to follow this  

Unity [web] IE rendering problem (extra whitespace)

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

If you intended to correct an error in the post then please contact us.

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. Free Image Hosting at www.ImageShack.us Free Image Hosting at www.ImageShack.us Free Image Hosting at www.ImageShack.us 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">
  <head>
    <title>Page Title</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

  </head>

  <body>
    <div id="banner_top"></div>
    <div id="banner_l1"></div>
  </body>
</html>
CSS:
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;
	}
"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 this post


Link to post
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 this post


Link to post
Share on other sites
Quote:

overflow
Possible Values:
visible
hidden
auto

When 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 this post


Link to post
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 this post


Link to post
Share on other sites

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

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this