Why do I get additional space in IE?

**bazzablue** · Oct 7, 2006 13:08

Recently started designing websites in CSS but I seem to keep coming up against a certain issue which I have tried to overcome with no success.

If you view the following sites in Firefox (my browser of choice) they display as required but IE adds a chunk underneath the content:

Website #1 - extra space added underneath the 3 white boxes.

Website #2 - space added underneath grey box on left and request resource pack box.

I would really appreciate it if someone could point out what causes this and how I can overcome it.

Thanks in advance.

**Northern Star** · Oct 7, 2006 13:19

Hi Barry,

Just had a muck about with your html...

Your not going to like the solution

!

Like me your a tidy person (i'm pretty anal about noting up my code, makes it a hell of alot easier when it comes to revisiting the project years later) but sometimes IE doesn't take to kindly to it.

I just changed ...

Code:

<div class="box-bottom"></div>
</div><!-- close:box02 -->
<div id="box03">

To...

Code:

<div class="box-bottom"></div>
</div><div id="box03">

Problem went away

**bazzablue** · Oct 7, 2006 13:27

Northern Star - Thanks for the quick and helpful response. I made the change on Website #1 and like you said the problem went away. Thinking it was probably the same with Website #2 I removed all the notes but unfortunately it didn't change anything.

Any ideas?

**Tyssen** · Oct 7, 2006 19:10

#left01 doesn't need a height (try resizing the text in FF).
#left02 doesn't need to be floated and #video doesn't need such a large height. Give #left position: relative and then give #left02 position: absolute; bottom: 0; right: X to align it to the bottom.
But the actual space is being caused by the float on #box01a. You'd be better off using a different image replacement method:
http://www.tjkdesign.com/articles/tip.asp
http://www.ryznardesign.com/web_codi...ent/index.html
You also seem to have a case of divitis. A lot of the divs you've used would be better as heading tags (h1 - h6) or paragraphs.

**bazzablue** · Oct 10, 2006 03:23

Tyssen - Thanks for the input. I did try and make the changes you suggested but it screwed up the layout. It is probably something I did wrong.

I take your point about divitis.

**Tyssen** · Oct 10, 2006 03:43

Originally Posted by barryelucid8

I did try and make the changes you suggested but it screwed up the layout. It is probably something I did wrong.

Have you got a link to the problem page?

**bazzablue** · Oct 10, 2006 03:56

New page can be viewed here

**Tyssen** · Oct 10, 2006 04:51

Try this:

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style>
 body {
 	background: #FFFFFF url(http://www.elucid8web.com/sep/graphics/background.jpg) repeat-y 50% 0;
 	text-align: center;
 	margin: 0;
 	padding: 0;
 	font-size: 62.5%;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 }
 a {
 	text-decoration: none;
 }
 * html body {padding-right: -1px}
 #container {
 	margin: auto;
 	width: 740px;
 }
 
 /* Header
 ------------------------------------------------------------------*/
 #header {
 	width: 740px;
 	height: 198px;
 	background: url(http://www.elucid8web.com/sep/graphics/header.jpg) no-repeat;
 	text-indent: -9999px;
 }
 h1 {
 	float: left;
 	background: url(http://www.elucid8web.com/sep/graphics/logo_sep.jpg) no-repeat;
 	width: 221px;
 	height: 96px;
 	padding: 0;
 	margin: 17px 0 0 71px;
 	display: inline;
 }
 #nav-top {
 	float: right;
 	width: 100px;
 	padding: 0;
 	margin: 15px -4px 0 0;
 }
 #nav-top li {
 	float: left;
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 #nav-top a {
 	float: left;
 	text-indent: -9999px;
 	padding: 0;
 	margin: 0 10px 0 0;
 	height: 15px;
 }
 #nav-top-home a {
 	background: url(http://www.elucid8web.com/sep/graphics/home.jpg) no-repeat;
 	width: 26px; 
 }
 #nav-top-contact a {
 	background: url(http://www.elucid8web.com/sep/graphics/contact.jpg) no-repeat;
 	width: 53px; 
 }
 #nav-top-home a:hover {
 	background: url(http://www.elucid8web.com/sep/graphics/home_f2.jpg) no-repeat;
 }
 #nav-top-contact a:hover {
 	background: url(http://www.elucid8web.com/sep/graphics/contact_f2.jpg) no-repeat;
 }
 
 /* Navigation
 ------------------------------------------------------------------*/
 #nav {
 	background: url(http://www.elucid8web.com/sep/graphics/nav_back.jpg) repeat-x;
 	width: 740px;
 	height: 25px;
 	margin: 0;
 	padding: 0;
 }
 #nav li {
 	float: left;
 	list-style: none;
 	text-indent: -9999px;
 }
 #nav a {
 	border: 0;
 	display: block;
 	background: url(http://www.elucid8web.com/sep/graphics/nav.jpg) no-repeat;		
 }
 #nav-what a {
 	width: 156px;
 	height: 25px;
 }
 #nav-story a {
 	width: 188px;
 	height: 25px;
 }
 #nav-testimonials a {
 	width: 116px;
 	height: 25px;
 }
 #nav-casestudy a {
 	width: 100px;
 	height: 25px;
 }
 #nav-who a {
 	width: 150px;
 	height: 25px;
 }
 #nav-what a:link {
 	background-position: 0px 0px;
 }
 #nav-what a:hover {
 	background-position: 0px -25px;
 }
 #nav-story a:link {
 	background-position: -161px 0px;
 }
 #nav-story a:hover {
 	background-position: -161px -25px;
 }
 #nav-testimonials a:link {
 	background-position: -349px 0px;
 }
 #nav-testimonials a:hover {
 	background-position: -349px -25px;
 }
 #nav-casestudy a:link {
 	background-position: -465px 0px;
 }
 #nav-casestudy a:hover {
 	background-position: -465px -25px;
 }
 #nav-who a:link {
 	background-position: -565px 0px;
 }
 #nav-who a:hover {
 	background-position: -565px -25px;
 }
 #nav-shadow {
 	background: url(http://www.elucid8web.com/sep/graphics/nav-shadow.jpg) repeat-x;
 	height: 15px;
 }
 
 
 
 
 
 /* Middle
 ------------------------------------------------------------------*/
 #middle-top {
 	background: url(http://www.elucid8web.com/sep/graphics/middle-top.jpg) no-repeat;
 	width: 740px;
 	height: 21px;
 }
 #middle-sides {
 	background: url(http://www.elucid8web.com/sep/graphics/middle-sides.jpg) repeat-y; 
 	width: 740px;
 }
 #middle {
 	background: #FFFFFF;
 	width: 670px;
 	margin: auto;
 }
 #middle-bottom {
 	background: url(http://www.elucid8web.com/sep/graphics/middle-bottom.jpg) no-repeat;
 	width: 740px;
 	height: 29px;
 	clear: both;
 }
 #left {
 	float: left;
 	display: inline;
 	width: 520px;
 }
 #right {
 	margin-left: 530px;
 }
 
 
 /* Home
 ------------------------------------------------------------------*/
 #patrons {
 	background: url(http://www.elucid8web.com/sep/graphics/patrons.jpg) no-repeat;
 	width: 520px;
 	height: 185px;
 	text-indent: -9999px;
 }
 .line-diag {
 	background: url(http://www.elucid8web.com/sep/graphics/line_diag.jpg) repeat-x;
 	height: 5px;
 	margin: 15px 0 15px 0;
 }
 #left01 {
 	float: left;
 	background: #DDDADE;
 	width: 250px;
 	height: 245px;
 }
 .casestudy-pic {
 	background: #DDDADE url(http://www.elucid8web.com/sep/graphics/classroom.jpg) no-repeat;
 	height: 145px;
 }
 .casestudy {
 	font-size: 1.1em;
 	line-height: 1.5em;
 	color: #333333;
 	margin: 8px 10px 5px 10px;
 	text-align: left;
 }
 .more a {
 	float: right;
 	font-size: 1.1em;
 	line-height: 1.5em;
 	color: #5CA526;
 	font-weight: bold;
 	text-align: right;
 	margin: 0 10px 2px 0;
 	padding: 0;
 }
 .more a:hover{
 	color: #666666;
 }
 #left02 {
 	width: 250px;
 	margin-left: 260px;
 }
 #video {
 	background: #999999;
 	height: 186px;
 	margin: 0 0 14px 0;
 }
 /*
 #box01 a {
 	background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack.jpg) no-repeat;
 	width: 250px;
 	height: 45px;
 	text-indent: -9999px;
 }
 #box01 a:hover {
 	background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack_f2.jpg) no-repeat;
 }
 */
 #box01 a { display: block; cursor: pointer; }
 #box01 a, #box01 a em { width: 250px; height: 45px; }
 #box01 a em { background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack.jpg) no-repeat; }
 #box01 a:hover { background: none; }
 #box01 a:hover em { background: url(http://www.elucid8web.com/sep/graphics/box_resource_pack_f2.jpg) no-repeat; }
 
 /* image replacement general properties */
 .IR { 
 	position: relative;
 	overflow: hidden;
 	font-size: 12px;
 }
 		
 .IR em {
 	display: block;
 	position: absolute;
 	top: 0; left: 0;
 	z-index: 1;
 }
 
 
 /* Pages
 ------------------------------------------------------------------*/
 
 
 
 
 
 
 /* Right column
 ------------------------------------------------------------------*/
 #thumbs-up {
 	background: url(http://www.elucid8web.com/sep/graphics/thumbs_up.jpg) no-repeat;
 	height: 347px;
 	text-indent: -9999px;
 }
 #logo-hopehiv {
 	background: url(http://www.elucid8web.com/sep/graphics/logo_hopehiv.jpg) no-repeat;
 	height: 64px;
 	text-indent: -9999px;
 }
 
 
 /* Footer
 ------------------------------------------------------------------*/
 #footer {
 	background: url(http://www.elucid8web.com/sep/graphics/footer.jpg) repeat-y;
 	width: 740px;
 	height: 100px;
 }
 #design a {
 	background: url(http://www.elucid8web.com/sep/graphics/design.jpg) no-repeat;
 	height: 9px;
 	width: 100px;
 	float: right;
 	margin: 6px;
 	text-indent: -9999px;
 }
 #design a:hover {
 	background: url(http://www.elucid8web.com/sep/graphics/design_f2.jpg) no-repeat;
 }
 </style>
 </head>
 
 <body>
 <div id="container">
 <div id="header">
 	<h1>SEP - Social Entrepreneurs Project</h1>
 	<ul id="nav-top">
 
 	  <li id="nav-top-home"><a href="http://www.elucid8web.com/sep/default.htm">SEP 
 		Home</a></li>
 	  <li id="nav-top-contact"><a href="http://www.elucid8web.com/sep/contact.htm">SEP 
 		Contact details</a></li>
 	</ul>
 </div>
 
 <ul id="nav">
 	<li id="nav-what"><a href="http://www.elucid8web.com/sep/what.htm">What is the SEP?</a></li>
 	<li id="nav-story"><a href="http://www.elucid8web.com/sep/story.htm">The Background Story</a></li>
 
 	<li id="nav-testimonials"><a href="http://www.elucid8web.com/sep/testimonials.htm">Testimonials</a></li>
 	<li id="nav-casestudy"><a href="http://www.elucid8web.com/sep/resources.htm">Case Study</a></li>
 	<li id="nav-who"><a href="http://www.elucid8web.com/sep/who.htm">Who are HOPEHIV?</a></li>
 </ul>
 <div id="nav-shadow"></div>
 
 <div id="middle-top"></div>
 
 <div id="middle">
 
 	<div id="left"> 
 	  <div id="patrons">Patrons - Lewis Moody MBE and Claire Connor OBE</div>
 
 	  <div class="line-diag"></div>
 	  <div id="left01"> 
 		<div class="casestudy-pic"></div>
 		<div class="casestudy">A preparatory school in Kent raises over £12000 
 		  for the SEP helping to rebuild a school and fund innovative art and 
 		  drama therapy for African children.</div>
 		<div class="more"><a href="http://www.elucid8web.com/sep/case_study.htm">Read 
 		  about how they did it...</a></div>
 	  </div>
 	  <div id="left02"> 
 		<div id="video">Video file to go in here</div>
 
 		<div id="box01" class="IR"><a href="#"><em></em>Click here to download a copy of the SEP Resource 
 		  Pack</a></div>
 	  </div>
 	</div>
 
 
 <div id="right"><img src="http://www.elucid8web.com/sep/graphics/thumbs_up.jpg" alt="african boy with thumbs up">
 	<div class="line-diag"></div>
 	<div id="logo-hopehiv">HOPEHIV - SEP is an initiative of HOPEHIV. Registered charity number 1079385</div>
 </div>
 
 </div>
 
 <div id="middle-bottom"></div>
 
 <div id="footer">
 <div id="design"><a href="http://www.elucid8.co.uk">Design : Elucid8</a></div>
 </div>
 
 </div>
 </body>
 </html>

By the way, your doctype was incomplete.

**bazzablue** · Oct 10, 2006 06:15

Tranfered all your code into my document but it doesn't seem to have made any difference.

Thanks for trying.

**Tyssen** · Oct 10, 2006 15:34

This is a page on my server with the code i posted above. It seems to me that it looks pretty much the same in FF & IE and removes the unwanted space in IE which you referred to in your first post. If that's not what was wanted, you'll need to explain why not.

**bazzablue** · Oct 11, 2006 02:15

Tyssen - Thanks. Just copied the CSS from that site and dropped it into my one. Works perfectly in removing the white space at the bottom. The only difference is that the margin between the classroom photo and the space for the video file is smaller in IE.

Thanks again for your help.

**Tyssen** · Oct 11, 2006 04:02

Not sure what you mean. Smaller than what? What do you want it to be?

**bazzablue** · Oct 12, 2006 02:38

Tyssen - Sorry should have made that clearer. The margin between the classroom photo and the space for the video file is smaller in Firefox than it is in IE.

**Tyssen** · Oct 12, 2006 05:22

Well if you wanted to you could use an IE-only filter (like * html #left02) or conditional comments to give IE a different left margin from other browsers, but one thing I've learned from working with CSS is to be a bit more forgiving about a few pixels difference between browsers.

**bazzablue** · Oct 12, 2006 06:06

I'll take your advice on board.

Thanks for your help.

User Tag List

Thread: Why do I get additional space in IE?

Thread Tools

Display

Why do I get additional space in IE?

Bookmarks

Bookmarks

Posting Permissions