CSS Layout - Unexplained gap in IE/PC between horizontal DIVs

ascend · 12-03-2005, 03:29 AM

I'm redesigning my website and I've got a pretty simple problem that I just can't seem to locate a solution for. I've made a layout enclosed in a 720px bow with rounded corners. For the head and the foot, I've made divs that are 720px x 10px that have a background image of the rounded corners. Here is the code for thos divs:

Code:

#main-cap-head, #main-cap-foot {
	display: inline;
	width: 720px;
	height: 10px;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}

#main-cap-head {
	background-image: url(../img/main_cap_head.gif);
}

#main-cap-foot {
	background-image: url(../img/main_cap_foot.gif);
}

then, under that, is a 'main-content' div, here's the code for that:

Code:

#main-content {
	width: auto;
	height: auto;
	padding: 0px;
	margin: 0;
	background-color: #606060;
}

and here's the HTML markup:

Code:

<body>
	<div id="container">
		<div id="main-cap-head"></div>
		<div id="main-content">
			<div id="header">
				<div id="head-img"><img src="_lib/img/main_head_name.gif" width="189" height="41" alt="Chris Forrette | Graphic Designer"></div>
				<div id="navigation">
					<ul>
						<?=$navigation ?>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>

etc...

Everything displays fine, except in IE on a PC, there is a gap between the 'main-cap-head' div and the 'main-content div'. I've tried searching around for solutions, switching between 'inline' and 'block' displays for each element including the img tag. Does anyone know how to fix this? I'm attaching an image of how it should look and the page is up on my server at:

http://www.ascendvisual.com/_v3/main.php

Thanks!

harbingerOTV · 12-03-2005, 02:39 PM

by default IE will make a div 17px high as a MINIMUM. The image your using is only 10px tall.

try this:

Code:

#main-cap-head {
	background-image: url(../img/main_cap_head.gif) bottom;
}

and see if that makes IE happy. If not make your image 17px tall. and make the div it's in 17px instead of 10px.

_Aerospace_Eng_ · 12-03-2005, 05:16 PM

Quote:

Originally Posted by harbingerOTV

by default IE will make a div 17px high as a MINIMUM. The image your using is only 10px tall.

and see if that makes IE happy. If not make your image 17px tall. and make the div it's in 17px instead of 10px.

Only because its accounting for the font-size, change the font-size to 1px and set the line-height to 0px, you probably don't even need to change the font-size, its the line-height that will need to be changed though including the font-size doesn't hurt.

ascend · 12-03-2005, 11:13 PM

Changing the font-size and line-height attributes seemed to do the trick! Thank you so much!

harbingerOTV · 12-05-2005, 03:41 AM

Quote:

Originally Posted by _Aerospace_Eng_

Only because its accounting for the font-size, change the font-size to 1px and set the line-height to 0px, you probably don't even need to change the font-size, its the line-height that will need to be changed though including the font-size doesn't hurt.

good point _Aero_. I remeber reading a post by you on the same thing a while back. I guess I havenever had the need (or encountered the problem myself) to fix the line height & font size for IE before.