Log in

View Full Version : layout breaks in ie 6



fodo
01-24-2009, 12:39 PM
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


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


<?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();
?>

Snookerman
01-24-2009, 01:13 PM
Try adding this to the head section of your page:

<!--[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!

fodo
01-24-2009, 01:31 PM
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?

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

fodo
01-24-2009, 02:20 PM
Ok I will look at that.
Any idea why my bullets disappear and reappear?

fodo
01-25-2009, 02:01 PM
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?