IE limiting height of div?

MagSafe · 31 Oct 2006 at 10:23

Hi there,

Trying to set a div with a height of 10px, and ofcourse as always IE has to bring up some problem. It seems 15px is the smallest height it will allow a div to be set as (via css) and if you try to set it to anything below it will always stay at 15 pixels.

Is there any way around this? I'm searching on the net but can only find things about the min-height function.

Thanks

D4VE · 31 Oct 2006 at 12:36

What have you got in the div?
Is it empty?

Pr0t0c0L · 31 Oct 2006 at 13:34

a div is simply a container, its whats inside that div that will affect the height.

coudl you give more detail on what your doing please

MagSafe · 1 Nov 2006 at 09:50

hi again, sorry for the lack of information.

what i'm doing is i've got 3 divs in a row, one underneath the other. The middle holds the content and the other two (top & bottom) have no content but have a background image of a curve ... to create the effect of a curved box.

this effect has worked for me before when i was using 15px curves and settings the height of these divs, but when i try to set them to 10px this time IE does not want to set them below 14/15px.

I've included the code so you can get a better idea,

Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<title>Test Website</title>
		<style type="text/css">
			html, body
			{
				margin: 0;
				padding: 0;
				font: normal 10pt verdana, arial, helvetica, sans-serif;
				background: #ffffff;
				color: #000000;
			}
			
			#header
			{
				margin: 0;
				padding: 0;
				width: 100%;
				height: 37px;
				font: normal 10pt verdana, arial, helvetica, sans-serif;
				background: #3386c2 url('graphics/topbg.jpg') repeat-x;
				color: #ffffff;
			}
			
			#wrapper
			{
				margin: 100px auto;
				padding: 0;
				width: 700px;
				font: normal 10pt verdana, arial, helvetica, sans-serif;
				background: #e9e9e9;
				color: #000000;
			}
			
			#content1
			{
				margin: 0;
				padding: 0;
				width: 700px;
				height: 10px;
				background: #e9e9e9 url('graphics/curvetop.gif') no-repeat;
				color: #000000;
			}
			
			#content2
			{
				margin: 0;
				padding: 0 10px 0 10px;
				width: 680px;
				background: #e9e9e9;
				color: #000000;
			}
			
			#content3
			{
				margin: 0;
				padding: 0;
				width: 700px;
				height: 10px;
				background: #e9e9e9 url('graphics/curvebottom.gif') no-repeat;
				color: #000000;
			}
			
			.noborder { border: 0; }
			.title { font: normal 14pt verdana, arial, helvetica, sans-serif; }
		</style>
	</head>

	<body>
		<div id="header"><a href="http://www.test.com" title="Test"><img src="graphics/logo.jpg" alt="Test" width="215px" height="37px" class="noborder" /></a></div>
		<div id="wrapper">
			<div id="content1">&nbsp;</div>
			<div id="content2">
                                           <p>Content inside box</p>
			</div>
			<div id="content3">&nbsp;</div>
		</div>
	</body>
</html>

HTMLHugo · 1 Nov 2006 at 11:57

just an idea could be complete **** try using a 1px image instead of a  

i *thikn* that will sort it

dont have any other ideas though

will watch the thread with interest

MagSafe · 1 Nov 2006 at 14:09

yep, don't know why that works but IE works in strange ways

thanks a lot HTMLHugo

LazyManc · 1 Nov 2006 at 22:15

This is probably to do with the line-height property. Because   is effectively a character, you're forcing IE to use the default line-height which is over-ruling the smaller height property.

If you have a height value set, then you shouldn't need   anyways.

joeyjojo · 1 Nov 2006 at 23:05

Could try setting line-height to 10px also. Might make &nbsp work instead of using an image.

Caged · 2 Nov 2006 at 00:12

Or just set an overflow on the div.