SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div behaves strangely in IE

    http://www3.shellkonto.se/yavari/dur...ectComment.php
    I can’t understand why the red box doesn’t stop before the right div in IE. It works in FX.

    Do you know how i can fix this problem without setting a with on the div ?

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

    only text wraps
    #comentshow{background:#ffffff;

    float wrap clear demo
    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>HTML PLUS CSS = ? FUN XHTML</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%;}
    	
    	/* general */
    	div,p,span,b,a,pre,hr{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	color:#ffffff;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.c{background:#ffffcc;}
    	.ca{background:#eaeaea;}
    	.cb{background:#d8d8d8;}
    	.cc{background:#c6c6c6;}
    	.cd{background:#b4b4b4;}
    	.ce{background:#a2a2a2;}
    	.cf{background:#909090;}
    	.cg{background:#7e7e7e;}
    	.ch{background:#6c6c6c;}
    
    	.m{margin:0 auto 0 auto;}
    	.mt{margin-top:1em;} /*  */
    	.mb{margin-bottom:.5em;}
    	.mr{margin-right:.5em;}
    	.p{padding:.5em;}
    	
    	.b{
    	border-color:#f8f8f8;
    	border-style: solid;
    	}
    	
    	.b{border-width: .1em .1em .1em .1em;}
    	
    	.r{position:relative;}
    	.a{position:absolute;}
    
    	.wca{width:754px;margin-left:auto;margin-right:auto;}/*width check img*/
    	
    	.fl{float:left;}
    	.fr{float:right;}
    	
    	.con{float:left;width:100%;}
    	
    	.w{width:63em;}
    	/*.w{width:100%;}*/
    	.wl{width:20em;
    	filter: alpha(opacity=50);
    	-moz-opacity: 0.5;
    	}
    	.wr{width:42em;}
    	
    	.mx{margin:0 1em 1em 21em;}
    	.my{margin-left:10em;}
    	.mz{margin-left:.3em;}
    	.wh{width:100%;}
    	.fcl{clear:both;height:1px;overflow:hidden;/*margin-top:-1px;*/}
    	.fcb{clear:both;}
    	
    	.oveb{overflow:hidden;}
    	
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    
    <body class="c">
    <!-- <div class="wca mt"><img src="_bgr/r.gif" width="754" height="1" alt="" class="db" /></div> -->
    
    <div class="ch wh fl r"><span class="a">margin box</span>
    
    <div class="w m mb cf mt">
    
    <div class="wl fl b mb cb">
    <p class="db p">float left box</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    
    <div class="ce mb b mx">autowidth with a margin left right</div>
    <h1 class="ce mb b"> auto no W no P/M ?
    </h1>
    <p class="ce mb b my">autowidth with a margin left ?</p>
    <div class="ce mb b fl wr mz">left floating layer with a width and margin left</div><!-- -->
    <p>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    </p>
    <h2 class="b">clear yes? on the right place for a container</h2>
    <div class="wl fr b mb cb">
    <p class="db p">float left box</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    
    <div class="wl fl b mb cb">
    <p class="db p">float left box</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text <h2 class="b">clear no for text</h2>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text <h2 class="b fcb">clear forced</h2>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    
    <div class="fcl"></div>
    </div>
    </div>
    
    <div class="cg wh fl r"><span class="a">margin box</span>
    
    <div class="w m mb cf mt">
    
    <div class="wl fl b mb">
    <p class="db p">float left box</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    
    <div class="ce mb b mx">autowidth with a margin left right</div>
    <h1 class="ce mb b"> auto no W no P/M</h1>
    <p class="ce mb b my">autowidth with a margin left</p>
    <div class="ce mb b fl wr mz">left floating layer with a width and margin left
    </div>
    <p>
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    </p>
    <div class="fcl"></div>
    
    </div>
    </div>
    
    <div class="ch wh fl r"><span class="a">margin box</span>
    
    <div class="w m mb cf mt">
    
    <div class="wl fl b mb cb">
    <p class="db p">float left box</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    
    <div class="ce mb b mx">autowidth with a margin left right</div>
    <h1 class="ce mb b"> auto no W no P/M ?</h1>
    <p class="ce mb b my">autowidth with a margin left ?</p>
    <div class="ce mb b fl wr mz">left floating layer with a width and margin left
    </div>
    <p class="fr mb">
    float without a width Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    </p>
    <div class="fcl"></div>
    
    </div>
    </div>
    
    <div class="cg wh fl r"><span class="a">margin box</span>
    
    <div class="w m mb cf mt">
    
    <div class="wl fl b mb cb">
    <p class="db p">float left box</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    
    <div class="ce mb b mx">autowidth with a margin left right</div>
    <h1 class="ce mb b"> auto no W no P/M ?</h1>
    <p class="ce mb b my">autowidth with a margin left ?</p>
    <div class="ce mb b fl wr mz">left floating layer with a width and margin left
    </div>
    <p class="fr mb wr">
    float without a width Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text 
    </p>
    <div class="fcl"></div>
    
    </div>
    </div>
    <!--  -->
    </body>
    </html>
    Last edited by all4nerds; Jan 27, 2006 at 19:21.

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

    you can solve this, hemeee not that difficult

    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%;}
    	
    	/* general */
    	div,p,span,b,a,pre,hr{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	/*font-size:.9em; weg */
    	color:#ffffff;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.au{margin:1em auto;width:64em;padding-bottom:1em;}
    	
    	.wra .l{width:16em;}
    	.wra .ml{margin:0 0 .8em .8em;border-right:10px solid #b4b4b4;}
    	* html .wra .ml{margin:0 0 .8em .5em;right:-3px;position:relative;}
    	.wra .mr{margin:0 .8em .8em 0;border-left:10px solid #b4b4b4;}
    	
    	
    	.wra h1{padding:.4em;background:#c6c6c6;margin:.5em .4em .8em .4em;border:1px solid #d8d8d8;}
    	
    	.wra h2{clear:both;/*  */padding:.4em;background:#c6c6c6;margin:.5em .5em .8em .5em;}
    	
    	.wra h4,.wra p{margin:.8em .8em 1em .8em;}
    	.wra h3{margin:.8em .6em 1em .6em;padding:0 0 0 0;}
    	.wra h3{border:1px solid #909090;background:#c6c6c6;}
    	.wra h3 a{padding-left:.1em;border:1px solid #909090;}
    	* html .wra h3 a{left:0px;position:relative;}
    	.wra h3 a{border-right:none;width:100%;background:#c6c6c6;}
    	.wra h3 .ra{padding-right:.2em;border:1px solid #909090;}
    	* html .wra h3 .ra{margin-right:-.2em;left:0px;}
    	.wra h3 .ra{border-left:none;width:100%;}
    	
    	.wra h3{border-left:none;}
    
    	.wra .tr{text-align:right;border-left:1px solid #909090;border-right:none;}
    	
    	.wra h2{font-size:1.6em;border:1px solid #d8d8d8;}
    	.wra h3{font-size:1.4em;}
    	.wra h4{font-size:1.2em;}
    	.wra p{font-size:1em;}
    	
    	.fl{float:left;}
    	.fr{float:right;}
    	
    	.ch{background:#6c6c6c;}
    	.cd{background:#b4b4b4;}
    	
    	.b{border:1px solid #d8d8d8;}
    	
    	img{display:block;}
    	
    	a{text-decoration: none;}
    	
    	.mca{margin:0 auto;width:754px;}
    	.mt{margin-top:1em;}
    
    	img{border:none;}
    	</style>
    	<style type="text/css">
    	.wra{width:100%;} /* OP7 IE */
    	head+body .wra{overflow:auto;} /* FF Moz OP8*/
    	</style><!-- 
    	<script type="text/javascript">
    	var d=document;var w=window; var xd=w.opera;if (xd ) {d.write( '<style type="text/css">body{font-size:75%;}<\ /style>' );}else {d.write("");}
    	</script> -->
    	<!--[if IE]>
    	<style type="text/css">
    	body{font-size:74%;}
    	* html .wra .l{display:inline;}
    	* html .wra,* html .wra h2{height:1%;} /* has layout fix IE<7 */
    	* html .wra{zoom:1;} /* has layout fix IE<7 */
    	</style>
    	<![endif]-->
    	
    
    </head>
    <body class="ch">
    <!-- 
    <script type="text/javascript">
    function checkscr(){
    if(!document.getElementById){
    return "old";
    }
    if(document.body.clientWidth<100){
    //if ( document.documentElement.clientWidth<750 ){
    return "small";
    }
    //else if(document.body.clientWidth>750){
    else if ( document.documentElement.clientWidth>100 ){
    return "large";
    }
    }
    var scrw = checkscr();
    
    if ( scrw == "old" ){alert( "Old" );}
    
    else if (scrw == "small"){
    //alert( "klein" );
    document.write('<style type="text/css">body{font-size:.75em;}<\/style>');
    window.onresize = function fitin (){
    window.location = window.location;
    }
    }
    else if ( scrw == "large" ){
    //alert( "groot" );
    var scrw = document.body.clientWidth;
    //var scrw = document.documentElement.clientWidth;
    fontscr = parseInt ( (scrw/10.5) );
    document.write('<style type="text/css">body{font-size:'+fontscr+'%;}<\/style>');
    window.onresize = function fitin (){
    window.location = window.location;
    }
    }
    </script> -->
    <div>
    
    <div class="au">
    
    <div class="wra cd b fl">
    <h1> News </h1>
    <h2> Latest News </h2>
    
    <p class="l fl ml ch"><img src="_bgr/r.gif" width="100%" alt="" /></p>
    <!--  -->
    <p>
    
    
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h3><a href="##">News Title Goes Here</a> </h3>
    <h3><a href="##">News Title Goes Here</a> </h3>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    
    <h2> Latest News </h2>
    
    <p class="l fr mr g"><img src="_bgr/r.gif" width="100%" alt="" /></p>
    <!--  -->
    <h3 class="tr"><a href="##" class="ra">News Title Goes Here</a></h3>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    
    <h2> Latest News </h2>
    
    <h3><a href="##">News Title Goes Here</a></h3>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p class="l fl ml ch">
    <img src="_bgr/r.gif" width="100%" alt="" />
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h2>Latest News x</h2>
    <h3><a href="##">News Title Goes Here</a></h3>
    <p class="l fr mr ch">
    <img src="_bgr/r.gif" width="100%" alt="" />
    </p>
    
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    
    <h2> Latest News </h2>
    <h3><a href="##">News Title Goes Here</a></h3>
    <p class="l fr mr ch">
    <img src="_bgr/r.gif" width="100%" alt="" />
    </p>
    
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    </div>
    
    </div>
    
    </div>
    </body>
    
    </html>

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

    basic content box demo

    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" 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:74%;}
    	
    	/* general */
    	div,p,span,b,a,pre,hr{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	/*font-size:.9em; weg */
    	color:#ffffff;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.au{margin:1em auto;width:64em;padding-bottom:1em;}
    	
    	.wra .l{width:16em;margin:0 .8em .8em .8em;}
    	
    	.wra h1{padding:.4em;background:#c6c6c6;margin:.5em .5em .8em .5em;}
    	
    	.wra h2{clear:both;/*  */padding:.4em;background:#c6c6c6;margin:.5em .5em .8em .5em;}
    	
    	.wra h3,.wra h4,.wra p{margin:.8em .8em 1em .8em;}
    	
    	.wra h2{font-size:1.6em;}
    	.wra h3{font-size:1.4em;}
    	.wra h4{font-size:1.2em;}
    	.wra p{font-size:1em;}
    	
    	.fl{float:left;}
    	.fr{float:right;}
    	
    	.ch{background:#6c6c6c;}
    	.cd{background:#b4b4b4;}
    	
    	.b{border:1px solid #f8f8f8;}
    	
    	img{display:block;}
    	
    	a{text-decoration: none;}
    	
    	.mca{margin:0 auto;width:754px;}
    	.mt{margin-top:1em;}
    	
    	</style>
    	<style type="text/css">
    	.wra{width:100%;} /* OP7 IE */
    	head+body .wra{overflow:auto;} /* FF Moz OP8*/
    	</style>
    	<script type="text/javascript">
    	var d=document;var w=window; var xd=w.opera;if (xd ) {d.write( '<style type="text/css">body{font-size:75%;}</style>' );}else {d.write("");}
    	</script>
    	<!--[if IE]>
    	<style type="text/css">
    	body{font-size:74%;}
    	* html .wra .l{display:inline;}
    	* html .wra,* html .wra h2{height:1%;} /* has layout fix IE<7 */
    	* html .wra{zoom:1;} /* has layout fix IE<7 */
    	</style>
    	<![endif]-->
    	
    
    </head>
    <body class="ch"><!-- 
    <script type="text/javascript">
    function checkscr(){
    if(!document.getElementById){
    return "old";
    }
    if(document.body.clientWidth<100){
    //if ( document.documentElement.clientWidth<750 ){
    return "small";
    }
    //else if(document.body.clientWidth>750){
    else if ( document.documentElement.clientWidth>100 ){
    return "large";
    }
    }
    var scrw = checkscr();
    
    if ( scrw == "old" ){alert( "Old" );}
    
    else if (scrw == "small"){
    //alert( "klein" );
    document.write('<style type="text/css">body{font-size:.75em;}<\/style>');
    window.onresize = function fitin (){
    window.location = window.location;
    }
    }
    else if ( scrw == "large" ){
    //alert( "groot" );
    var scrw = document.body.clientWidth;
    //var scrw = document.documentElement.clientWidth;
    fontscr = parseInt ( (scrw/10.5) );
    document.write('<style type="text/css">body{font-size:'+fontscr+'%;}<\/style>');
    window.onresize = function fitin (){
    window.location = window.location;
    }
    }
    </script> -->
    <div>
    
    <!-- <div class="mca mt"><img src="_bgr/r.gif" width="754" height="1" alt="" class="db" /></div> -->
    
    <div class="au">
    
    <div class="wra cd b fl">
    <h1> News </h1>
    <h2> Latest News </h2>
    <p class="l fl b ch">
    <img src="_bgr/r.gif" width="100%" border="0" alt="" />
    </p>
    <h3><a href="##">News Title Goes Here</a></h3>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    
    <h2> Latest News </h2>
    <!--<p class="l fl g"><img src="_bgr/r.gif" width="100%" border="0" alt="" /></p>-->
    
    <h3><a href="##">News Title Goes Here</a></h3>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    
    <h2> Latest News </h2>
    
    <h3><a href="##">News Title Goes Here</a></h3>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p class="l fl b ch">
    <img src="_bgr/r.gif" width="100%" border="0" alt="" />
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h2>Latest News x</h2>
    <h3><a href="##">News Title Goes Here</a></h3>
    <p class="l fr b ch">
    <img src="_bgr/r.gif" width="100%" border="0" alt="" />
    </p>
    
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    
    <h2> Latest News </h2>
    <h3><a href="##">News Title Goes Here</a></h3>
    <p class="l fr b ch">
    <img src="_bgr/r.gif" width="100%" border="0" alt="" />
    </p>
    
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <h4><a href="##">News Title Goes Here</a></h4>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    <p>
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    News Info News Info News Info News Info News Info 
    </p>
    </div>
    
    </div>
    
    </div>
    </body>
    
    </html>

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

    float the middle box in IE
    * html #midle{float:left;}

  6. #6
    SitePoint Member
    Join Date
    May 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx, it works but not as i want it to.
    if you click at Dölj kommentarer (right of the design) the midle div should expand.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by durus
    thx, it works but not as i want it to.
    if you click at Dölj kommentarer (right of the design) the midle div should expand.
    I just did in FF and IE see your page, works fine ? for me ?

    Sorry No not the middle div, that usually means that the right container is not in the flow of the page, the way you position it is wrong

    PS OK tested the layout on my PC can’t find any real errors works OK in FF and IE when I use <br /><br /><br /> in right column

    IE haslayout
    * html #wrap,* html #midle{height:1%;}

    PS works now did you fix it?
    Last edited by all4nerds; Jan 28, 2006 at 09:17.

  8. #8
    SitePoint Member
    Join Date
    May 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm i fixed it on my computer with javascript, but i do want to fix it with only css. It is not fixed on the page that you can se.

    but im going to look at some 3 columns page and se whats worng with my page,

    Here is my temporary solution
    * html #midle{float:left;} as you told me (it fixes so the margins is ok.
    and then on the link i use some javascript that changes the with of the right div
    document.getElementById('right').style.width='0';

    This solution works as i want it to be but i will try to fix it with css anyway.

    Thx for all the help
    you can se the temporary solution at
    http://www3.shellkonto.se/yavari/dur...ectComment.php


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
  •