SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict SwordsmanX's Avatar
    Join Date
    Sep 2005
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help I'm going crazy (IE VS Firefox)

    Ok so..
    since a decent 3-column CSS layout cannot be obtained without countless hours of hacking and ping-ponging between IE and Firefox I thought this:
    - I'll use one table with the 3 columns (no hassles, compatible with almost everything)
    - all the rest will be pure css

    So I coded this webpage : http://www.culture-books.com/babes/

    CSS FILE:

    Code:
    html{margin:0;padding:0}
    
    body{text-align:center;
    font:Verdana, Arial, Helvetica, sans-serif 1em;
    color:#000;
    margin:0;
    padding:0;
    border:0;}
    
    table,tr,td{padding:0;
    margin:0; 
    border-width:0}
    
    a{text-decoration:none;
    font-weight:bold;
    color:#3366FF}
    
    a:hover{color:#FF3333}
    
    #wp{margin:0 60px;
    width:auto;
    text-align:center;
    padding:0;
    border-width:0}
    
    #hd{height:90px;
    background-color:#66CCFF;
    margin:0;
    clear:both}
    
    #ft{height:90px;
    background-color:#FFFF99;
    margin:0;
    clear:both}
    
    #lftcol{margin:0;
    background:#CC6666;
    width:20%}
    
    #cntr{margin:0;height:100%}
    
    #rtcol{margin:0;background:#CC6666;width:20%}
    
    .sd{width:15%;background:#66CC66;padding:0;margin:0}
    
    #sdrt{position:fixed;top:0;right:0;background:#CCC url('sd.jpg') repeat-y top right;width:60px;height:100%;margin:0;padding:0}
    
    #sdlft{position:fixed;top:0;left:0;background:#CCC url('sd.jpg') repeat-y top left;width:60px;height:100%;margin:0;padding:0}
    With my HTML being:
    HTML Code:
    <div id="sdlft"></div>
    <div id="wp">
    
    <div id="hd">Hello there this is some text!</div>
    <table width="100%"><tr>
    <td id="lftcol">Left Column</td>
    <td id="cntr">Center</td>
    <td id="rtcol">Right Column</td>
    </tr></table>
    <div id="ft">Footer</div>
    
    </div>
    
    <div id="sdrt"></div>
    All the padding:0 and margin:0 are there to overcome I problem I'm having in firefox, where no matter what the table will always give some white space as a border (i even tried with border="0" to no avail)
    my problem is this: in firefox nearly everything works fine (except for that damn white space), but in IE it's completely messed up, since the fixed property for the side gradients does not work at all
    try loading the url with IE and then with firefox to see what I mean
    is there any way to achieve my design?I'm pretty skilled at css and xhtml so feel free to suggest pretty much anything (I'm lacking patience, this is my problem...I need some zen meditation O_O)

    - Also, the sdlft and sdrt were supposed to be declared at the end of the page (they're positioned absolutely so it doesn't matter), but apparently Mr. IE does not interpret that correctly and just puts the divs where they are declared -__-

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes tables have nice advantages, butt as you can see it takes only a few hacks to get this going in IE FF NS Moz OP

    Give me some time and i try to build the same page in CSS HTML table less

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Index</title>
    
    <style type="text/css">
    html,body{height:100%;}
    * html body{background: url('sd.jpg') repeat-y top left;}
    * html .xx{background: url('sd.jpg') repeat-y top right;height:100%;}
    *{margin:0;padding:0;}
    table{height:100%;}
    html{margin:0;padding:0}
    body{text-align:center;font:Verdana, Arial, Helvetica, sans-serif, 1em;color:#000;margin:0;padding:0;border:0;}
    table{margin:0 60px 0 60px;}
    table,tr,td{padding:0;margin:0; border-width:00}
    a{text-decoration:none;font-weight:bold;color:#3366FF}
    a:hover{color:#FF3333}
    #wp{margin:0 60px;width:auto;text-align:center;padding:0;border-width:0;}
    head+body .x{margin:0 0;}
    * html #wp{float:left;margin:0;}
    #hd{height:90px;background-color:#66CCFF;margin:0;/*clear:both;*/}
    .x{float:left;margin:0;}
    #ft{height:90px;background-color:#FFFF99;margin:0;clear:both;}
    #lftcol{margin:0;background:#CC6666;width:20%}
    #cntr{margin:0;height:100%;}
    #rtcol{margin:0;background:#CC6666;width:20%}
    .sd{width:15%;background:#66CC66;padding:0;margin:0}
    
    #sdrt{position:fixed;top:0;right:0;background:#CCC url('sd.jpg') repeat-y top right;width:60px;height:100%;margin:0;padding:0}
    #sdlft{position:fixed;top:0;left:0;background:#CCC url('sd.jpg') repeat-y top left;width:60px;height:100%;margin:0;padding:0}
    
    * html #sdrt{float:right;top:0;right:0;background:#CCC url('sd.jpg') repeat-y top right;width:60px;height:100%;margin:0;padding:0}
    * html #sdlft{float:left;top:0;left:0;background:#CCC url('sd.jpg') repeat-y top left;width:60px;height:100%;margin:0;padding:0}
    	</style>
    </head>
    <body>
    <div class="xx">
    <div id="sdlft"></div>
    <div id="sdrt"></div>
    <div id="wp">
    <div id="hd">Hello there this is some text!</div>
    <div class="x">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" >
    <tr>
    <td id="lftcol">Left Column<br /><br /><br /><br /><br /><br /><br /></td>
    <td id="cntr">Center<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
    <td id="rtcol">Right Column<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td>
    </tr>
    </table>
    </div>
    <div id="ft">Footer</div>
    
    </div> 
    </div>
    <!-- -->
    </body>
    </html>

  3. #3
    SitePoint Addict SwordsmanX's Avatar
    Join Date
    Sep 2005
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    woah thanks!! You got some hacking skills there
    care to explain how those hacks work?

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Oops mist your post but have a look at this first

    CSS + HTML div's with table quality

    PS nice try table wise, but the only container that can use 100% height/min-height is the wrapper
    In your case, 100% height means the table is as high as your PC Screen,
    this will also get you in trouble FF NS Moz OP wise

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#CCC url('sd.jpg') repeat-y top left;}
    	
    	div,p{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.wra{
    	margin:-90px auto 0 auto;
    	background: url('sd.jpg') repeat-y top right;
    	padding:0 60px 0 60px;
    	}
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    	
    	.he{height:90px;background-color:#66CCFF;}
    	
    	.l,.ll{float:left;background:#CC6666;width:20%;}
    	
    	.r{float:left;width:60%;background:#ffffff;}
    	* html .r{width:59.9%;}
    	
    	.x{height:90px;}
    	
    	.fo{margin:0 60px;height:90px;background:#FFFF99;}
    	
    	.bgr{background: url('sd.jpg') repeat-y top right;}
    	
    	.wra p,.fo p{padding:.5em .5em 0 .5em;}
    	.wra h1{padding:.3em;font-size:1.5em;}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	head+body .ex:after{
    	content: ".";
    	display:block;
    	background:inherit;
    	height:0;
    	margin-bottom:-32767px;
    	padding-top:32767px;
    	}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility:hidden;
    	}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .ex{padding:0 0 32767px 0;margin:0 0 -32767px 0;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="wra">
    <div class="x"></div>
    <div class="he">
    <h1>header</h1>
    <p>Basic 3 column without borders</p>
    </div>
    
    <div class="l ex">
    <p>left
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end</p>
    </div>
    
    <div class="r ex">
    <p>middle
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end</p>
    
    </div>
    
    <div class="ll ex">
    <p>right
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end</p>
    
    </div>
    
    <!-- -->
    
    </div>
    <div class="bgr">
    <div class="fo"><p>footer</p></div>
    </div>
    </body>
    </html>
    Last edited by all4nerds; Jan 26, 2006 at 15:46.


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
  •