Small IE problem with layout

**nix112** · Oct 17, 2004 14:05

Hey, I've gotten a lot of useful information from searching through the forums here, but can't find any solution to this little problem. In short, the layout works perfectly in Firefox and Opera, however IE displays a little space on the left hand side between my header image and the containing div.

The layout can be found online at:

http://hybrid.concordia.ca/~nix112/

This image illustrates the differences between firefox and IE:

The HTML code:

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">
	<title>David Nixon - Hybrid</title>
	<style type="text/css" media="all">
	@import url(css/style.css);
	</style> 
</head>
<body>
<div id="main">
	<div id="mainstyle">
		<div id="topbanner">
		</div>
		<div id="leftcontainer">
			<div id="themes">
				<div class="header">
				</div>
				<p>Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced.</p>
			</div>
			<div id="menu">
				<div class="header">
				</div>
				<p>Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced. Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced.</p>
			</div>
		</div>
		<div id="rightcontainer">
			<div id="content">
			<div class="header">
			</div>
			<p>
				Walter Benjamin’s concept that the aura of a work of art is lost when it is mechanically reproduced, 
				and subsequently the creation of art shifts to be specifically designed for the new reproducible medium 
				(photography and film) can be expanded upon when put in the context of the internet in general and the 
				website Wikipedia <a href="http://www.wikipedia.org">(www.wikipedia.org)</a> in particular. In other words, 
				the mechanical reproducibility of artworks is to classical art as internet digitalization and interactivity 
				of art is to mechanically reproducible artworks.<br><br>Within the context of a specific site, in this case 
				Wikipedia, and keeping 	in mind Benjamin’s thesis, the loss of classical artwork’s aura when viewed as a 
				photograph is paralleled by the loss of a photograph’s aura when viewed as a digital copy. When viewing a 
				photograph on a computer monitor, there is no longer a physical attachment to it, and it can longer have a 
				physical history of its own. Despite the fact that this aura is again lost, mirroring the history of photography 
				and film, new art is being generated specifically for the Internet. The Wikipedia website is a good example 
				of a new work that is being generated specifically for the internet where a conglomeration of ideas and photographs are 
				freely editable by anyone who visits the site.<br><br>Another example of the parallels between the shifts 
				from classical art to reproducible art, and reproducible art to digital art is the way in which society 
				uses art. When society was confronted with the advent of mechanical reproducibility Benjamin points to 
				a shift from art for cult, or ceremonial purposes to art for viewing purposes. Similarly, with the onset 
				of society’s digitalization there is a move from art for viewing purposes to art for interactive purposes. 
				The Wikipedia example of editable content illustrates this new purpose of interactivity well, as do many 
				other websites and digital applications.<br><br>Benjamin points out that the reproducibility of art allows 
				for increased accessibility. Photographs, films and records can be brought into the average person’s home 
				for instance. In the digital age, this accessibility within the context of interactivity allows not only 
				for yet more people to view art, but also to interact and create art through software or CAD systems. In 
				fact one could argue that we have already progressed beyond this paradigm with the appearance of autonomous 
				art and music creating artificial intelligence.<br><br>Benjamin’s assertion that the aura of an artwork 
				dies when transformed by reproduction is only meant to point out that with the destruction of old auras, 
				comes the birth of the new ones. Who could argue that when holding and viewing an historical photograph 
				of great importance there is a certain tradition and authority that is bestowed upon it, analogous to the 
				aura of a classical work? Perhaps it is hard to see now but certainly these new ‘lifeless’ digital works, 
				Wikipedia among them, will come to be revered as having auras of their own once we’re confronted with 
				another paradigm shift in the world of art.			
			</p>
			</div>
		</div><div class="clear">&nbsp;</div>
	</div>
</div>
</body>
</html>

The CSS code:

Code:

/* CSS Document */

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #C7B299;
	background-image: url(../images/background.jpg);
	background-position: center;
	background-repeat: repeat-y;
	text-align: center;
	}

h2 {
	margin: 10px;
	}

p {
	margin: 10px;
	}
	
/* ID's */

#main {	
	width: 750px;
	height: 100%;
	margin-right: auto;
	margin-left: auto; 	
	background-color: #cccccc;
	text-align:left;
	}

#mainstyle {	
	border-left: 10px ;
	border-right: 10px;
	border-top: 10px;
	border-color: #ccc;
	border-style: solid;
	background-color: #cccccc;		
}
	
#topbanner {
	margin-bottom: 10px;
	width: auto;
	height: 220px;
	background-color: #ccc;
	background-image: url(../images/banner1.jpg);
	background-repeat: no-repeat;
	}

#leftcontainer {
	float: left;
	width: auto;
	height: auto;
	background-color: #ccc;
	}

#themes {
	margin-bottom: 10px;
	width: 140px;
	height: auto;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	}

#menu {	
	margin-bottom: 10px;
	width: 140px;
	height: auto;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	}
	
#rightcontainer {
	margin-left: 152px;
	width: auto;
	height: auto;
	background-color: #ccc;
	}
	
#content {
	margin-bottom: 10px;
	width: auto;
	height: auto;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	}

/* Classes */

.header {
	height: 32px;
	width: auto;
	background-color: #990000;
	background-image: url(../images/header1.jpg);
	background-repeat: no-repeat;
	border-bottom: 1px solid #000000;
}

.clear{
  clear: both;
/* These next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 */
  height: 1px;
  overflow: hidden;
  margin-bottom: -1px;
}

* html .clear{display:none} /* Stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high */

/* Links */

a:link { color: #000000 }

a:visited { color: #000000 }

a:active { color: #000000 }

a:hover { color: #000000 }

Apart from this little bug everything works fine for the latest versions of Firefox, Opera, and IE. Thanks in advance for any help!

**Paul O'B** · Oct 17, 2004 14:21

Hi,

Ie has trouble working out the width of elements that are defined by margins alone. To give it a helping hand use the height:1% hack as follows.

Code:

/* commented backslash hack v2 \*/ 
 * html #rightcontainer {height:1%}
/* end hack */

Add that code after the existing style and the gap should be disappear.

Paul

**nix112** · Oct 17, 2004 14:34

Indeed, it works perfectly! Thanks very much. This will be the third hack I've used in making this layout. I wonder if I should just try a simpler layout to avoid any future problems. Anyhow, thanks again for your help.

**Paul O'B** · Oct 17, 2004 15:36

This will be the third hack I've used in making this layout

Well you could avoid the above hack by working out the exact width of that container and specifying it in the css. As its a fixed layout it shouldn't be too hard to work out

Paul

**nix112** · Oct 17, 2004 16:21

Yes, that is what I tried originally. However, again IE gave problems as the supposed correct width that worked in Opera and Firefox was too wide for the space in IE and would cause the #rightcontent to drop below the leftcontent boxes. I suppose this has to do with the box model and how IE handles padding, borders and margins. Maybe if I add those attributes in another wrapper div like I did with the #main ID. Anyhow I'll figure something out.

**Paul O'B** · Oct 18, 2004 06:22

Anyhow I'll figure something out.

The problem actually relates to ie's 3 pixel jog on static content next to floats and not the box model (in ie6 anyway). This means that when you specify a width ie has already added 3 pixels on so the element drops below. As you are workin with a full doctype (with uri) then ie6 works with the correct box model so this isn't the issue here.

There a long explanation in the FAQ about floats and how to overcome this but in a fixed width layout the simple answer is to float both left and right and the 3 pixel jog is defeated.

Hope that helps.

Paul

User Tag List

Thread: Small IE problem with layout

Thread Tools

Display

Small IE problem with layout

Bookmarks

Bookmarks

Posting Permissions