5 Replies Latest reply on May 27, 2010 5:33 PM by mw4man

    Centered Page Width Problem...CSS...???

    mw4man

      hello again...


      to center content, I normally go w/ parent & nested tags.

      I wanted that content not to exceed 1003 pixels in width...so as to be perfectly visible in a browser window w/ a screen resolution of 1024 &768...& so my parent layer (1) & nested layers are set up as follows:
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~

      <div id="Layer1" style="position:relative; width:1003px; height:XXpx; margin: 0 auto;">

        <div id="Layer2" style="position:absolute; left:XXpx; top:0px; width:XXpx; height:XXpx; z-index:1"><img src="somegraphiccontent.jpg" width="XX"    height="XX7"></div>
        <div id="Layer3" style="position:absolute; left:XXpx; top:0px; width:XXpx; height:XXpx; z-index:1"><img src="somegraphiccontent.jpg" width="XX" height="XX7"></div>
        <div id="Layer4" style="position:absolute; left:XXpx; top:0px; width:XXpx; height:XXpx; z-index:1"><img src="somegraphiccontent.jpg" width="XX" height="XX7"></div>
      </div>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~

      (w/ the nested layers tabbed in 2 spaces)

       

      this is what the page looks like in DW...(w/ all content clearly fitting within that 1003 px width parent layer):

       

      http://www.moonjams.com/moonmix_local.jpg

       

      but when viewed in IE...it looks like this...(bumped over on the top & left...so as to cause a horizontal scroll bar):

      http://www.moonjams.com/moonmix_remote.jpg

       

      & it doesn't seem to matter if my doctype is transitional or strict...I still seem to get a slightly margined page.  so how can I get control of how that page displays...i.e., make it correspond to the 1003 px width; where I can adjust where everything falls...???

       

      thanks,

       

      mark4man