...

View Full Version : Resolved Using DIVs for layout not working in IE7



gerald
09-15-2011, 08: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.

teedoff
09-15-2011, 09:04 PM
Link to your site??

gerald
09-15-2011, 09:13 PM
The current one is
http://www.reptonresourcepage.co.uk

However this still uses a table for the layout. The code with the DIV doing the layout is on my computer and has not been uploaded to a web server.

After some playing, I have found that the removal of text-align: center fixes the problem...but leaves the text left justified.

Gerald.

gerald
09-15-2011, 09:18 PM
Just found that if I move the text-align:center from the body definition to the ctrlDiv definition, it works OK...so far!!!

teedoff
09-15-2011, 09:33 PM
Not all together sure what effect you're wanting, but you know all you need to ues to center that ctrlDiv is a valid doctype and a width less that is containing element(body I suppose in this instance) and margin:0 auto;

ctrlDiv (width: 960px; margin: 0 auto;}

gerald
09-15-2011, 09:55 PM
I'm trying to centre the whole thing, and keep it at the same width. So if, for example, it is displaying in a browser with a window smaller than the size specified, it will put a scroll bar on the bottom...

...but thinking about it, while typing, what you suggest should also do the same thing. I'll have a play.

Cheers,

Gerald.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum