Results 1 to 6 of 6

Thread: layout breaks in ie 6

  1. #1
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default layout breaks in ie 6

    I am using a dynamic drive 2 col layout. The pages dispaly as required in FF, Safari, but shift the contents left in ie 7 and ie 6,
    Also, I use a background image in a ul on one page and the image only displays in the top list.
    Is the box problem the cause of this and how can it be fixed?

    site link http://217.46.159.226/kb_dev/what_coaching.php

    css
    Code:
    body{
    margin:0;
    padding:0;
    line-height: 1em;
    background:#ffffff;
    text-align:center;
    
    }
    
    b{font-size: 110%;}
    em{color: gold;}
    
    
    #contentcolumn h1{
    	font-family:Tahoma,'Lucida Grande',Arial,sans-serif;
    	font-size:20px;
    	font-weight:bold;
    	color:#gold;
    	padding:10px;
    	
    }
    #contentcolumn{
    	/* padding-left: 5px;make space for content*/
    }
    
    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    padding-top:5px;
    
    }
    
    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }
    
    #topsection h1{
    margin: 0px;
    padding-top: 15px;
    }
    .logo h1{
    	margin:0px;
    	padding:0;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    background:#000000;
    }
    
    #contentcolumn{
    margin-left: 385px; /*Set left margin to LeftColumnWidth*/
    margin-top:10px;
    
    }
    
    #leftcolumn{
    float: left;
    width: 385px; /*Width of left column*/
    margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
    /*background: #C8FC98;*/
    }
    
    #footer{
    clear: left;
    width: 100%;
    background: #90bade;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin-left:0px; /* Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    padding-left:30px;
    }
    .endorsement img{
    	text-align:left;
    }
    span.kb {
    	font-weight:bold;
    	font-style: italic;
    	color:#CCFF00;
    	
    }
    .blockquote {
    	font-family:Tahoma,'Lucida Grande',Arial,sans-serif;
    	font-size:12px;
    	color:#CCFF00;
    	padding:5px;
    	text-align:left;
    	
    }
    .cite {
    	text-align:right;
    	color:#FFFFFF;
    }
     h2{
    	font-family:Tahoma,'Lucida Grande',Arial,sans-serif;
    	font-size:14px;
    	font-style: italic;
    	color:#CCFF00;
    	padding:5px;
    	text-align:left;
    }
    .heading {
    	font-family:Tahoma,'Lucida Grande',Arial,sans-serif;
    	font-size:12px;
    	color:#FFFFFF;
    	padding:5px;
    	text-align:left;
    	line-height:normal;
    	text-indent:5px;
    }
    ul.list {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    	margin-left:15px;
    	text-align:left;
    	width:440px;
    	
    }
    li.list{
    	list-style-image: url(../images/arrow_green.gif);
    	font-family:Tahoma,'Lucida Gande',Arial,sans-serif;
    	font-size: 12px;
    	color:#FFFFFF;
    }
    
    }
    *h1{
    	font-family:Tahoma,'Lucida Grande',Arial,sans-serif;
    	font-size:12px;
    	color:#ffffff;
    	padding:10px;
    	text-align: center;
    }
    
    /*blueblock menu*/
    #blueblock{
    float:left;
    width: 200px;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    margin-left:0;
    font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    font-size: 90%;
    background-color: #90bade;
    color: #333;
    }
    
    * html #blueblock{ /*IE 6 only */
    w\idth: 167px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
    }
    
    #blueblock ul{
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    
    #blueblock li {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }
    
    #blueblock li a{
    display: block;
    padding: 5px 5px 5px 8px;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }
    
    html>body #blueblock li a{ /*Non IE6 width*/
    width: auto;
    }
    
    #blueblock li a:hover{
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }
    
    mark up
    
    Code:
    <?php
    require ('kevin_fns.php');
    do_html_header();
    ?>
    <h2>What is Coaching?</h2>
    <p class="heading">
    Technical skills are taught in the Corporate arena, but people are not taught how to have an effective professional relationship with their customers, or each other.
    
    This area has largely been taken for granted.  For organisations to maintain and grow in an ever competitive environment people need to understand how their behaviour affects their own performance, let alone how their behaviour effects other peoples performance in the work place.
    
    </p>
    
    <h2>Self and how self effects performance</h2>
    <ul class="list">
    <li class="list">Understanding self is the key to understanding performance</li>
    <li class="list">Understanding self is the key to understanding others</li>
    <li class="list">Understanding self is the key to winning over others</li>
    <li class="list">Understanding self is the key to working with others</li>
    <li class="list">Understanding self is the key to business success</li>
    </ul>
    <h2>Understanding our thinking and how it relates to emotions, mood, attitude, behaviour and performance.</h2>
    <ul class="list">
    <li class="list">Our emotions effect our mood - our mood affects our attitude, our attitude affects our behaviour-our behaviour effects our performance</li>
    </ul>
    <h2>Drawing out the hidden skills of performance by heightening:</h2>
    <ul class="list">
    <li class="list">Effective communication</li>
    <li class="list">Customer awareness</li>
    <li class="list">Effective leadership</li>
    <li class="list">Team cohesion</li>
    <li class="list">Keeping pace with global competitors</li>
    <li class="list">Building open and positive relationships</li>
    <li class="list">Understanding team boundaries</li>
    <li class="list">Energising leadership</li>
    <li class="list">Inspired behavior</li>
    <li class="list">Energy management</li>
    <li class="list">Mastering the stresses and presure from self and others that effect performance</li>
    <li class="list">Maximising technical skills through behavioral performance</li>
    <li class="list">Turning negative behavior into positive performance</li>
    <li class="list">How perceptions play a key role in individual, team and business success</li>
    <li class="list">How to motivate, inspire develop, value oneself and others</li>
    </ul>
    
    <br />
    <br />
    </div>
    </div>
    </div>
    
    <div id="leftcolumn">
    <img border="0" src="images/What_is_coaching.jpg" width="385" height="385" alt="KB Coaching Ltd"/>
    <?php
    do_html_menu();
    do_html_footer();
    ?>

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Try adding this to the head section of your page:
    Code:
    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    <![endif]-->
    Good luck!

  3. #3
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I tried that and very weid result.
    In ie 6 the image bullets appear when the menu is rolled over and diappear when the page is selected from the menu.
    In ie6 the content is still moved left.
    In ie 7 the bullets dont show.
    What was the purpose of the code you gave please?

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    It's supposed to make IE behave like a "good browser". You can find more info here:
    http://code.google.com/p/ie7-js/
    and here:
    http://dean.edwards.name/weblog/2008/01/ie7-2/

  5. #5
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok I will look at that.
    Any idea why my bullets disappear and reappear?

  6. #6
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    If anybody is following this thread I have noticed a strange behavior in both ie6 & 7 with regard to my background bullets.
    when the page loads the bullets arent visible but if the mouse is rolled ver the menu link for the page they appear.
    This doesnt happen in FF and Safari.
    It as if the image is behaving as a hover.
    Can anyone help me here please?

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
  •