gerald
09-15-2011, 07:45 PM
Hi,
I have a site that I use <table width="1216"><tr><td> to control layout (and have the left and right borders set to auto in CSS).
However, I am trying to move over to a DIV to acheive the same effect. I have replaced the above with <div id="ctrlDiv" class="ctrlDiv"> and the CSS:
.ctrlDiv {
position: absolute;
overflow: visible;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 1216px;
}
and the body has the following style:
body, table, tr, td
{
color: white;
font-size: 10pt;
font-family: Arial, sans-serif;
scrollbar-3d-light-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#3300CC;
scrollbar-dark-shadow-color:#000000;
scrollbar-face-color:#3300CC;
scrollbar-highlight-color:#03000C;
scrollbar-shadow-color:#000000;
text-align:center;
}
Now it all looks fine in IE8 and IE9 (and Safari, Firefox and Opera), but in IE7, there is a huge border on the left (fills up most of the window) which I just cannot get rid of.
BTW, the border for the DIV is changed by Javascript on an onLoad and onResize to keep it in the centre of the window.
Any ideas anyone?
Cheers,
Gerald.
I have a site that I use <table width="1216"><tr><td> to control layout (and have the left and right borders set to auto in CSS).
However, I am trying to move over to a DIV to acheive the same effect. I have replaced the above with <div id="ctrlDiv" class="ctrlDiv"> and the CSS:
.ctrlDiv {
position: absolute;
overflow: visible;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 1216px;
}
and the body has the following style:
body, table, tr, td
{
color: white;
font-size: 10pt;
font-family: Arial, sans-serif;
scrollbar-3d-light-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#3300CC;
scrollbar-dark-shadow-color:#000000;
scrollbar-face-color:#3300CC;
scrollbar-highlight-color:#03000C;
scrollbar-shadow-color:#000000;
text-align:center;
}
Now it all looks fine in IE8 and IE9 (and Safari, Firefox and Opera), but in IE7, there is a huge border on the left (fills up most of the window) which I just cannot get rid of.
BTW, the border for the DIV is changed by Javascript on an onLoad and onResize to keep it in the centre of the window.
Any ideas anyone?
Cheers,
Gerald.