Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Using DIVs for layout not working in IE7

    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:

    Code:
    .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:

    Code:
    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.
    Last edited by gerald; 09-15-2011 at 09:29 PM. Reason: Resolved

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Link to your site??
    Teed

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just found that if I move the text-align:center from the body definition to the ctrlDiv definition, it works OK...so far!!!

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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;}
    Teed

  • Users who have thanked teedoff for this post:

    gerald (09-15-2011)

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •