SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small IE problem with layout

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Montreal
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •