rob_lawford
11-28-2008, 04:05 AM
Hi Everyone -
I have a problem, I am currently in the process of developing a new site for a client of mine and I have run into a hicup with the accordion menu. When you view the site in any modern browser it displays perfectly but when viewed in I.E 6 it moves the hole site across to the left. I have no idea how to fix this - i think it has something to do with the float property but i'm not sure.
Would appreciate any help you guys have.
http://www.bcom.co.za/clients/ict/index2.html
Thanks thanks. :D
Robby
CSS 1 (main css) :
*
{
margin: 0em;
padding: 0em;
}
body
{
background-color: #FFF;
color: #4C4848;
font-size: 9pt;
font-family: "trebuchet ms", helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
letter-spacing: -1px;
}
h3,h4,h5,h6
{
color: #EC5E00;
}
h1{ font-size:20px; color:#CCC;}
h2{ font-size:17px; color:#EC5E00;}
h3{ font-size:15px;}
h1 span
{
font-weight: normal;
}
h3 span
{
font-weight: normal;
}
h4 span
{
font-weight: normal;
}
br.clear
{
clear: both;
}
img
{
behavior: url(../iepngfix.htc);
padding: 3px;
border: solid 0px #e1e1e1;
}
img.floatTL
{
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
margin-top: 0.5em;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
/* <!-- */
/* General styles */
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:1005px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
/* Header styles */
#header {
background:url(../images/n2.gif) repeat-x;
height:85px;
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:0px solid #CCC;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
background:#fff; /* Right column background colour */
}
.holygrail .colmid {
float:left;
width:200%;
margin-left:-200px; /* Width of right column */
position:relative;
right:100%;
background:#fff; /* Centre column background colour */
}
.holygrail .colleft {
float:left;
width:100%;
margin-top:0.5em;
margin-left:-50%;
position:relative;
left:400px; /* Left column width + right column width */
background:#FFF; /* Left column background colour */
}
.holygrail .col1wrap {
float:left;
width:50%;
position:relative;
right:200px; /* Width of left column */
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
margin:0 215px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:200%;
overflow:hidden;
}
.holygrail .col2 {
float:left;
float:right; /* This overrides the float:left above */
width:180px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:0px; /* Width of the left-had side padding on the left column */
background:url(../images/n1.gif) repeat-y;
border:solid 1px #CCCCCC;
height:600px;
}
.holygrail .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:170px; /* Width of right column content (right column width minus left and right padding) */
margin-right:36px; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
height:100%;
border:solid 1px #CCCCCC;
padding:10px;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #CCC;
margin-top:1em;
}
#footer p {
padding:10px;
margin:0;
}
/* --> */
#Logo {
background:url(../images/logo.png) no-repeat;
margin:10px;
height:85px;
}
#Control {
background:url(../images/controlPanel.jpg) no-repeat;
width:560px;
height:160px;
margin:0 auto;
}
#ControlOption1 {
float:left;
width:71px;
height:56px;
margin-left:4em;
margin-top:1.2em;
}
#ControlOption2 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption3 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption4 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption5 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption6 {
float:left;
width:71px;
height:56px;
margin-left:8em;
margin-top:1em;
}
#ControlOption7 {
float:left;
width:71px;
height:56px;
margin-left:1.5em;
margin-top:1em;
}
#ControlOption8 {
float:left;
width:66px;
height:56px;
margin-left:2.4em;
margin-top:1em;
}
#ControlOption9 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1em;
}
/* --> */
Javascript (accordion) :
window.addEvent('domready', function() {
// Anpassung IE6
if(window.ie6) var heightValue='100%';
else var heightValue='';
// Selektoren der Container für Schalter und Inhalt
var togglerName='dt.accordion_toggler_';
var contentName='dd.accordion_content_';
// Selektoren setzen
var counter=1;
var toggler=$$(togglerName+counter);
var content=$$(contentName+counter);
while(toggler.length>1)
{
// Accordion anwenden
new Accordion(toggler, content, {
opacity: false,
display: -1,
alwaysHide: true,
onComplete: function() {
var element=$(this.elements[this.previous]);
if(element && element.offsetHeight>0) element.setStyle('height', heightValue);
},
onActive: function(toggler, content) {
toggler.addClass('open');
},
onBackground: function(toggler, content) {
toggler.removeClass('open');
}
});
// Selektoren für nächstes Level setzen
counter++;
toggler=$$(togglerName+counter);
content=$$(contentName+counter);
}
});
I have a problem, I am currently in the process of developing a new site for a client of mine and I have run into a hicup with the accordion menu. When you view the site in any modern browser it displays perfectly but when viewed in I.E 6 it moves the hole site across to the left. I have no idea how to fix this - i think it has something to do with the float property but i'm not sure.
Would appreciate any help you guys have.
http://www.bcom.co.za/clients/ict/index2.html
Thanks thanks. :D
Robby
CSS 1 (main css) :
*
{
margin: 0em;
padding: 0em;
}
body
{
background-color: #FFF;
color: #4C4848;
font-size: 9pt;
font-family: "trebuchet ms", helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
letter-spacing: -1px;
}
h3,h4,h5,h6
{
color: #EC5E00;
}
h1{ font-size:20px; color:#CCC;}
h2{ font-size:17px; color:#EC5E00;}
h3{ font-size:15px;}
h1 span
{
font-weight: normal;
}
h3 span
{
font-weight: normal;
}
h4 span
{
font-weight: normal;
}
br.clear
{
clear: both;
}
img
{
behavior: url(../iepngfix.htc);
padding: 3px;
border: solid 0px #e1e1e1;
}
img.floatTL
{
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
margin-top: 0.5em;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
/* <!-- */
/* General styles */
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:1005px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
/* Header styles */
#header {
background:url(../images/n2.gif) repeat-x;
height:85px;
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:0px solid #CCC;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
background:#fff; /* Right column background colour */
}
.holygrail .colmid {
float:left;
width:200%;
margin-left:-200px; /* Width of right column */
position:relative;
right:100%;
background:#fff; /* Centre column background colour */
}
.holygrail .colleft {
float:left;
width:100%;
margin-top:0.5em;
margin-left:-50%;
position:relative;
left:400px; /* Left column width + right column width */
background:#FFF; /* Left column background colour */
}
.holygrail .col1wrap {
float:left;
width:50%;
position:relative;
right:200px; /* Width of left column */
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
margin:0 215px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:200%;
overflow:hidden;
}
.holygrail .col2 {
float:left;
float:right; /* This overrides the float:left above */
width:180px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:0px; /* Width of the left-had side padding on the left column */
background:url(../images/n1.gif) repeat-y;
border:solid 1px #CCCCCC;
height:600px;
}
.holygrail .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:170px; /* Width of right column content (right column width minus left and right padding) */
margin-right:36px; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
height:100%;
border:solid 1px #CCCCCC;
padding:10px;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #CCC;
margin-top:1em;
}
#footer p {
padding:10px;
margin:0;
}
/* --> */
#Logo {
background:url(../images/logo.png) no-repeat;
margin:10px;
height:85px;
}
#Control {
background:url(../images/controlPanel.jpg) no-repeat;
width:560px;
height:160px;
margin:0 auto;
}
#ControlOption1 {
float:left;
width:71px;
height:56px;
margin-left:4em;
margin-top:1.2em;
}
#ControlOption2 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption3 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption4 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption5 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1.2em;
}
#ControlOption6 {
float:left;
width:71px;
height:56px;
margin-left:8em;
margin-top:1em;
}
#ControlOption7 {
float:left;
width:71px;
height:56px;
margin-left:1.5em;
margin-top:1em;
}
#ControlOption8 {
float:left;
width:66px;
height:56px;
margin-left:2.4em;
margin-top:1em;
}
#ControlOption9 {
float:left;
width:71px;
height:56px;
margin-left:2em;
margin-top:1em;
}
/* --> */
Javascript (accordion) :
window.addEvent('domready', function() {
// Anpassung IE6
if(window.ie6) var heightValue='100%';
else var heightValue='';
// Selektoren der Container für Schalter und Inhalt
var togglerName='dt.accordion_toggler_';
var contentName='dd.accordion_content_';
// Selektoren setzen
var counter=1;
var toggler=$$(togglerName+counter);
var content=$$(contentName+counter);
while(toggler.length>1)
{
// Accordion anwenden
new Accordion(toggler, content, {
opacity: false,
display: -1,
alwaysHide: true,
onComplete: function() {
var element=$(this.elements[this.previous]);
if(element && element.offsetHeight>0) element.setStyle('height', heightValue);
},
onActive: function(toggler, content) {
toggler.addClass('open');
},
onBackground: function(toggler, content) {
toggler.removeClass('open');
}
});
// Selektoren für nächstes Level setzen
counter++;
toggler=$$(togglerName+counter);
content=$$(contentName+counter);
}
});