overflow issue with IE

phrozt · Jul 22, 2005

I made a test element of what is going on. Basically, I want to put stuff at the top and bottom of a box (ideally these are elements with rounded corners or whatever to make it look nicer). As you can see in FireFox, everything is displayed correctly. In IE, the top and bottom divs are stretched like crazy. I've already tried overflow: hidden, and that works, but I cannot have the part at the bottom that is hidden not being shown, so I need some other fix. If anyone could help me out, I would be very appreciative. Here's the test code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--
body {
	width: 100%;
	height: 100%;
}

#box {
	width: 100px;
	border: 1px solid blue;
	height: auto;
}

#boxTop {
	width: 100px;
	height: 5px;
	background-color: silver;
}

#boxBot {
	width: 100px;
	height: 5px;
	background-color: silver;
}
-->
</style>
</head>

<body>

<div id="box">
	<div id="boxTop"></div>
	text text<br />
	text text<br />
	text text<br />
	text text<br />
	text text<br />
	<div id="boxBot"></div>
</div>
</body>
</html>

phrozt · Jul 22, 2005

here's a test page for conveniance:

http://phroztnet.org/test.htm

rpgfan3233 · Jul 22, 2005

You need to add   between each of the open and close tags and use line-height rather than height to get IE to play along properly. Unfortunately, this leaves a small white space after the bottom in IE and I'm not sure how to get rid of it.

phrozt · Jul 22, 2005

I had actually tried to mess with the line height, but it makes sense that without an actual character to base it off of, it's not going to register a different line-height. I'll give that a try.. thank you.

Vragabond · Jul 22, 2005

No need to put anything in the divs. That will just confuse matters further. No content is ok.

What is bothering IE is that IE is very accomodating. It would like to make sure your divs have enough space to fit the text in, although it can see you don't have any text in them (but you might add some one day, right?

Since there is no text in these boxes, the fix for IE degrades nicely (i.e. doesn't make any difference at all) in real browsers as well. The fix is, tell IE how big you want the font to be in these boxes:

Code:

#boxTop, #boxBot {
    width: 100px;
    height: 5px;
    background-color: silver;
    font-size: 0;
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

overflow issue with IE

phrozt

IS-IT--Management

phrozt

IS-IT--Management

rpgfan3233

Technical User

phrozt

IS-IT--Management

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor