SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid design, CSS, IE6 issue. Strange problem ...

    Hi friends

    Well, I was wondering if someone could throw me some light here. I was working on a CSS based fluid design, page structure of which is -

    # top div header
    # middle div body
    # bottom div footer

    The middle div is divided in two divs, left (menu) and right (conent) which I am managing with -

    Code CSS:
    head+body .r{overflow:auto;}
    * html .r{float:left;}
    * html .bodyCenter{height:1%;}

    I have tested this with IE7, FF, Opera, Safari, Netscape and it's perfect everywhere, but ...

    In IE6 depending on the content of the right div of the middle div (.bodyCenter) is getting pushed below the left div, instead of staying sticked to the left part. It's happening when I am copying a long text from somewhere or adding a table width of which exceeds the right divs alloted width.

    Ideally, in case of wider tables, it could create a horizontal scroll and in case of plain text it could adjust with the available space.

    Any help will be highly appreciated.
    Best.

    EDIT

    I just noticed that in Opera for resolutions less than 1280 * 720 the left menu is not getting displayed properly ... its taking several times the width of the window with a horizontal scroll while the right contents are coming below.

    The full CSS is

    Code CSS:
    /* CSS Document */
    html, body
    {
    	background-color: #FFFFFF;
    	color: #000000;
    	line-height: 1.4;
    	font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: normal;
    }
     
    body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul
    {
    	margin: 0;
    	border: 0 none #FFFFFF;
    	padding: 0;
    }
     
    table { border:0px; margin: 0px; padding: 0px; border-collapse: collapse; border-spacing: 0; }
    td, th { padding: 0; }
     
     
    ol, ul {
    	list-style-type: none;
    }
     
    td {
    	vertical-align: top;
    }
     
    h1, h2, h3, h4, h5, h6 {
    	color: #D02890;
    	font-weight: normal;
    }
     
    .noContent {
    	padding: 60px 0;
    	text-align: center;
    	width: 786px;
    	min-width: 786px;
    }
     
    img
    {
    	border: 0 none transparent;
    }
     
    .imageLeft {
    	float:left;
    	margin-right: 10px;
    }
     
    .pagination {
    	text-align: right;
    }
     
    a {
    	color : #0171B9; 
    	text-decoration: none; 
    } 
     
    a:hover {
    	color: #D02890; 
    	text-decoration : underline; 
    }
     
    input, textarea
    {
    	font-size: 10px;
    }
     
    select { 
    	font-size: 10px;
    	color: #006DC6;
    	background-color:#FFFFF;
    }
     
    .submit { 
    	margin-top: 5px;
    	margin-bottom: 5px;
    	color: #006DC6; 
    }
     
    .item {
    	color: #414141;
    	font-size: 10px;
    }
     
    .clearer
    {
    	clear: both;
    	height: 1px;
    	overflow: hidden;
    	margin-bottom: -1px;
    	font-size: 1px;
    	line-height: 1px;
    }
     
    .note {
    	font-family: Verdana, Arial, Helvetica, sans-serif; 
    	font-size: 9px;
    	color: #3A5339;
    	font-weight:normal;
    }
     
     
    .hidden
    {
    	position: absolute;
    	left: -9999px;
    	top: -9999px;
    	height: 1px;
    	width: 1px;
    	overflow: hidden;
    }
     
    #content
    {
    	min-width: 628px;
    	margin: 10px 26px 0 26px;
    }
     
    * html #content
    {
    	w\idth: expression(document.documentElement.clientWidth < 760 ? "628px" : "auto");
    }
     
    /* HEADER --------------------------------------------------------------- */
     
    #topleft
    {
    	position: relative;
    	min-width: 760px;
    	height: 52px;
    	margin-bottom: -52px;
    	background-image: url(../images/menu-tl.gif);
    	background-repeat: no-repeat;
    }
     
    * html #topleft
    {
    	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
    }
     
    #topright
    {
    	position: relative;
    	min-width: 760px;
    	height: 52px;
    	margin-bottom: -52px;
    	background-image: url(../images/menu-tr.gif);
    	background-repeat: no-repeat;
    	background-position: top right;
    }
     
    * html #topright
    {
    	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
    }
     
    #header
    {
    	padding-top: 1px;
    }
     
    #headerInner
    {
    	border: 1px solid #B0036E;
    	border-bottom: 0 none #FFFFFF;
    	border-top: 0 none #FFFFFF;
    	padding: 0px;
    	background-color: #B0036E;
    	background-image: url(../images/menu.jpg);
    	background-repeat: repeat-x;
    	background-position: 100% 0;
    	color: #FFFFFF;
    	height: 100px;
    }
     
    #header h1 {
    	color: #FFFFFF;
    	font-size: 30px;
    	padding: 20px 0px 0px 20px;
    	float: left;
    	font-weight: bold;
    }
     
    #header h2 {
    	color: #FFFFFF;
    	font-size: 14px;
    	padding: 60px 0px 0px 10px;
    	margin-left: -280px;
    	float: left;
    }
     
    #headerRight {
    	float: right;
    	position: relative;
    	width:270px;
    	z-index: 2;
    }
     
    #datetime {
    	float: right;
    	padding: 5px 15px;
    	color: #F2A3D4;
    }
     
    #searchForm
    {
    	position: absolute;
    	float: right;
    	padding: 65px 35px 0px 0px;
    	color: #FFFFFF;
    	width: 23.2em;
    	/*margin-right: -210px;*/
    }
     
    #searchForm label
    {
    	float: left;
    	padding-left: 20px;
    }
     
    #searchForm input.text
    {
    	width: 12em;
    }
     
    #searchForm span.submit
    {
    	position: relative;
    	width: 40px;
    	height: 15px;
    	overflow: hidden;
    	float: right;
    	/*margin: 2px 0 0 285px;*/
    	margin: 3px 0px 0px 0px;
    }
     
    #searchForm span.submit input:hover, #searchForm span.submit input.hover
    {
    	position: relative;
    	margin-top: -15px;
    }
     
    head+body .r{overflow:auto;}
    * html .r{float:left;}
    * html .bodyCenter{height:1%;}
     
     
    /* MENU --------------------------------------------------------------- */
     
    .menu
    {
    	position: relative;
    	z-index: 2;
    	height: 2.5em;
    	margin-top: 1px solid #000000;
    	border-right: 1px solid #A30D66;
    	border-bottom: 1px solid #A30D66;
    	border: 1px solid #B0036E;
    	background-color: #D0248C;
    	background-image: url(../images/px_e62c9c.gif);
    	background-repeat: repeat-x;
    }
     
    * html .menu
    {
    	height: 2.35em;
    }
     
    .menu ul
    {
    	float: left;
    	border-right: 1px solid #E62C9C;
    	list-style: none;
    }
     
    .menu li
    {
    	float: left;
    }
     
    .menu a
    {
    	display: block;
    	border-top: 1px solid #E62C9C;
    	border-left: 1px solid #E62C9C;
    	border-right: 1px solid #A30D66;
    	border-left: 1px solid #E62C9C;
    	padding: 0.5em 16px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
     
    * html .menu a
    {
    	height: 1px;
    	float: left;
    }
     
    .menu li.on a
    {
    	border-top-color: #E62C9C;
    	border-left-color: #E62C9C;
    	color: #FFCC00;
    	background-color: #A30D66;
    	font-weight: bold;
    }
     
    .menu a:hover
    {
    	background-color: #A30D66;
    }
     
    /* CONTENT BODY --------------------------------------------------------------- */
     
     
    #postHead
    {
    	position: relative;
    	min-height: 500px;
    	margin: 0px;
    	background-color: #FFFFFF;
     
    }
     
    * html #postHead
    {
    	height: 500px;
    }
     
     
    /* LEFT MENU --------------------------------------------------------------- */
     
    #leftOuter {
    	float: left;
    	width: 29.8%;
    	min-width: 29.8%;
     
    }
     
    #leftMenu
    {
    	display: block;
    	background-color: #EC1A9D;
    	color: #FFFFFF;
    	border: 1px solid #B0036E;
    	border-bottom: 0 none #FFFFFF;
    	border-top: 0 none #FFFFFF;
    	padding: 0px 0px 0px 0px;
    	background-image: url(../images/menuback.jpg);
    	background-repeat: no-repeat;
    	background-position: center 20px;
    }
     
    .logoParent {
    	text-align: center;
    	padding-top: 10px;
    }
     
    #leftMenu .contentBody {
     
    	padding: 0 20px;
    }
     
    #leftMenu h2
    {
    	margin-bottom: -2.35em;
    	padding-top: 350px;
    	padding-bottom: 2.4em;
    	background-image: url(../images/dots_white.gif);
    	background-repeat: repeat-x;
    	background-position: 0 90%;
    	font-size: 18px;
    	color: #FFFFFF;
    	position: relative;
    }
     
    #leftMenu form
    {
    	margin-top: 2em;
    }
     
    #leftMenu fieldset
    {
    	padding: 0 1em 1em 1em;
    }
     
    #leftMenu label
    {
    	float: left;  
    	width: 7em;  
    	text-align: right; 
    }
     
    #leftMenu .labelText
    {
    	position: relative;
    	float: left;
    }
     
    #leftMenu .passforgot
    {
    	text-align: center;
    	padding-top: 10px;
    }
     
    #leftMenu .passforgot a
    {
    	color: #F1CCE3;
    }
     
    #leftMenu .passforgot a:hover
    {
    	color: #FFFFFF;
    }
     
    #leftMenu input.text, #leftMenu input.password
    {
    	position: relative;
    	top: -0.2em;
    	width: 10em;
    	color: #006DC6;
    }
     
    #leftMenu select
    {
    	background-color: #FFFFFF;
    	color: #006DC6;
    	font-weight: normal;
    	position: relative;
    }
     
    #leftMenu input.submit
    {
    	position: relative;
    	color: #006DC6; 
    	background-color: #FFFFFF;
    	width: 60px;
    }
    /* RIGHT SIDE --------------------------------------------------------------- */
     
    .bodyCenter
    {
    	border: 0px none transparent;
    	background-color: #FFFFFF;
    	overflow: hidden; /* for netscape, else it gives a forced scroll */
    }
     
    .bodyContentOthers ol {
    	padding: 15px 0;
    }
     
    .bodyContentOthers li {
    	background-image: url(../intranet/img_intranet/icone_p.gif);
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding-left: 17px;
    	margin-left: 17px;
    }
     
    .bodyCenter .bodyGeneral
    {
    	padding: 20px;
    	text-align: left;
    	background-color:#FFFFFF;
    }
     
     
    .bodyCenter .bodyContent
    {
    	top: -0.6em;
    	padding-top: 1px;
    	padding-left: 20px;
    	text-align: left;
    	background-color:#FFFFFF;
    	background-image: url(../images/div2.jpg);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
     
    .bodyCenter .bodyContent ol {
    	font-size: 120%;
    	margin-top: 40px;
    }
     
    .bodyCenter .bodyContent li#one {
    	margin-left: 235px;
    }
     
    .bodyCenter .bodyContent li#two {
    	margin-left: 185px;
    }
     
    .bodyCenter .bodyContent li#three {
    	margin-left: 135px;
    }
     
    .bodyCenter .bodyContent li#four {
    	margin-left: 85px;
    }
     
    .phrase {
    	width: 80%;
    	margin-bottom: 20px;
    }
     
    .bodyCenter .bodyContent li#but_three {
    	margin-left: 60px;
    }
     
    .bodyCenter .bodyContent li#but_two {
    	margin-left: 30px;
    }
     
    .bodyCenter .bodyContent li#but_one {
    	margin-left: 0px;
    }
     
     
    .bodyCenter .bodyGeneral h1
    {
    	margin: 14px 0;
    	padding-bottom: 10px;
    	background-image: url(../images/dots_0171B9.gif);
    	background-repeat: repeat-x;
    	background-position: 0 90%;
    	font-size: 21px;
    	/*position: relative;*/
    }
     
    .bodyCenter .bodyGeneral p
    {
    	padding-bottom: 6px;
    }
     
    .bodyCenter .bodyContent h3
    {
    	font-size: 16px;
    	font-weight: bold;
    }
     
    .break {
    	height: 20px;
    }
     
    .center {
    	text-align: center;
    }
     
    .leftContent {
    	width:50%;
    	float:left;
    }
     
     
    /* FOOTER --------------------------------------------------------------- */
     
    #bottomleft
    {
    	position: relative;
    	min-width: 15px;
    	height: 51px;
    	margin-bottom: -58px;
    	background-image: url(../images/menu-bl.gif);
    	background-repeat: no-repeat;
    	top: -14px;
    	left: 0px;
    }
     
    * html #bottomleft
    {
    	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
    }
     
    #footer
    {
    	width: 628px;
    	padding: 20px 0;
    	margin: 0 auto;
    }
     
    #footerInner
    {
    	margin: 0 auto;
    	text-align: center;
    	font-size:10px;
    	color : #0171B9; 
    	line-leight: 120%;
    }
     
    #footer img {
    	margin-top: 10px;
    }
     
    * html #footer
    {
    	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
    }

    And the test page -

    Code HTML4Strict:
    <!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>
    <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=windows-1252" />
    <meta name="robots" content="index, follow" />
    <title>:: *** ::</title>
    <link href="css/test.css" rel="stylesheet" type="text/css" />
    </head>
     
    <body>
     
    	<div id="content">
    			<!-- ########################################################################## Beginning of header #################################################### -->
    			<div id="header">
    				<div id="headerInner">
    					// page header goes here
    				</div> <!-- END #headerInner -->
    			</div> <!-- END #header -->
     
    			<!-- ########################################################################## END of header ######################################################### -->
    			<!-- ################# Beginning of posthead. Its where all the action is, divided in two parts, the left pink one, and the main body of the right #### -->
    			<div id="postHead">
    			<!-- ########################################################################## Beginning of the left left part of posthead ########################### -->
    				<div id="leftOuter">
    					<div id="leftMenu">
    						<div class="contentBody">
    							// left menu goes here
    						</div> <!-- END .leftMenu .contentBody -->
    					</div> <!-- END .leftMenu -->
    				</div> <!-- END #leftOuter -->
     
    			<!-- ########################################################################## END of the left left part of posthead ################################# -->
     
    			<!-- ########################################################################## Beginning of the right part of posthead ############################### -->
    			<div class="r">
    				<div class="bodyCenter">
    					<p>// body content goes here
    					</p>
    				</div> 
    				<!-- END .bodyCenter -->
    			</div> <!-- END .r -->
    			<!-- ########################################################################## End of the right part of posthead ##################################### -->
    			<div class="clearer">
    			</div>
    		</div> <!-- END #postHead -->
    			<!-- ########################################################################## End of posthead ####################################################### -->
     
    			<!-- ########################################################################## Beginning of footer, the last part #################################### -->
    		<div id="footer">
    			<div id="footerInner">
    				// footer content goes here
    			</div> <!-- END #footerInner -->
    		</div> <!-- END #footer -->
    			<!-- ########################################################################## End of footer, the last part ######################################### -->
    	</div> <!-- END #content -->
    </body>
    </html>

    Thanka again.
    Last edited by kigoobe; Sep 16, 2007 at 15:26.

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

    width min-width wrapper 628px ? not 760px ? , left column 29.8 &#37; ? 187,144 px ?
    628-187 min room 441px

    Opera is not swallowing the 29.8% it needs 29 or 30 ?

    PS please remove the junk, this will get you in IE trouble and looks, well if your lost on your own Page
    <!-- ########################################################################## END of header ######################################################### -->

    and the line-height: 1.4; from html?,body
    Last edited by all4nerds; Sep 16, 2007 at 20:52.

  3. #3
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all4nerds

    Thanks for your reply. It was a great help. I really appreciate it. Now, the issue with Opera is solved (29.8&#37; => 29%). I also found that in Safari 3 beta I can't have less than 1024, but probably that's the default behavious of that browser. Removing the line-height: 1.4; from body has also helped me to sort out a display issue of IE6, thanks for that as well.

    However ... The issue with IE6 is still there, that at times the text of the right div is getting pushed down below. It's funny as (I am using a screen resolution of 1400) when I change the size of my screen by dragging, for certain texts copied from other websites for testing, the right block appears properly at some point and is pushed down then and then comes back again properly ... it keeps happenning as I change the width of my browser.

    Do you have any idea why I am getting this ? Thanks again.

    Edit:

    Just wondering, do you guys also optimize your site for IE 5.5 or below ? Asking because I checked my site in IE5.5 and it's not showing everything as it should, and I am wondering how important it is to spend some hours again to make sure it is working in IE < 6

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

    since this is a self adjusting width or no width , you can't just drop in a width wider as the content box in that box, see calculation previous answer, PS div don't need a width to fit, they adjust to a container or screen
    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>
    <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=windows-1252" />
    <meta name="robots" content="index, follow" />
    <title>:: *** ::</title>
    <style type="text/css">
    /* CSS Document */
    *{padding:0;margin:0;border:none;}
    
    body{
    font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    
    #content{min-width:760px;margin-top:10px;}
    
    * html #content{width:expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");}
    head+body #content{padding:0 26px;}
    * html body{margin:0 26px;}
    
    #header{
    border:10px solid #0000cc;
    border-bottom:none;
    border-top:none;
    padding-top: 1px;
    background: #B0036E url(../images/menu.jpg) repeat-x 100&#37; 0;
    color: #FFFFFF;
    height:100px;
    }
    
    .bodyCenter{background:#ccffff;}
    
    .bodyCenter p{padding:10px;}
    
    head+body .r{overflow:auto;}
    * html .r{float:left;}
    * html .bodyCenter{height:1%;}
    
    #leftOuter{
    float:left;
    width:29%;
    }
    
    #leftMenu{
    color: #FFFFFF;
    border: 10px solid #B0036E;
    border-bottom:none;
    border-top:none;
    padding: 0px 0px 0px 0px;
    background:#EC1A9D url(../images/menuback.jpg) no-repeat center 20px;
    }
    
    
    #footer{
    clear:both;
    background:#ccff99;
    min-height:1%;
    padding: 20px 0;
    margin: 0 auto;
    }
    
    * html #footer{height:1%;}
    </style>
    </head>
    <body>
    
    <div id="content">
    
    <div id="header"><p>// page header goes here</p></div>
    
    <div id="leftOuter">
    
    <div id="leftMenu">// left menu goes here</div>
    
    </div>
    
    <div class="r">
    <div class="bodyCenter">
    <p>// body content goes here <br />
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text test text test text 
    <br />
    end
    </p>
    </div>
    </div>
    
    <div id="footer"><p>// footer content goes here</p></div>
    
    </div>
    </body>
    </html>

  5. #5
    Always learning kigoobe's Avatar
    Join Date
    May 2004
    Location
    Paris
    Posts
    1,565
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks once again for all your help. I appreciate this really. You have saved my few hairs from turning grey ... he he. It was a great help indeed.

    Best.


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
  •