[SOLVED] why 100% table width doesnt take up 100% of content area?

[TJINAK]

Hello,

When using a table with this code:

Code: Select all

<table cellspacing="0" cellpadding="2" width="100%" align="center" summary="" border="1">

It leaves to much room to the left and right of the table.  How can I narrow these margins down?


This is the contents of the tempalte layout in question:

Code: Select all

  {* Start Content (Navigation and Content columns) *}
   <div id="content">

      {* Start Navigation *}
      <div id="sidebar">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      {* End Navigation *}


      {* Start Content Area, Right Column *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />
       </div>

   

Stylesheet for divs:

Code: Select all

div#content {
   margin: 1.5em auto 2em 0;   /* some air above and under menu and content */
}


div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}

div#sidebar {
   float: left;        /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;     /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX IE double margin bug */
   margin-left: 0;
}

Thank you,

TJ

[TJINAK]

Upon further review I find that there is no problem with the table width at 100% in Firefox.

So, I need help on how to resolve this for IE 7, since thats what the boss uses...

If only IE could be standards compliant...

Thank you very much for your help and consideration on this issue.

TJ

[RonnyK]

TJ,

what happens if you set it to 99%? IE might not like the full 100% as it calculates differently.....

Ronny

[TJINAK]

Thanks Ronny but no joy.

It has to do with the sidebar and the content css.  I've created a second content are to sit below the sidebar and main content area then copied and pasted the same code for the table into the second content area and the table takes up 100% of the width.

[Dr.CSS]

A link would help a lot...

You need to go thru all the CSS attached to the template, if it is a default template w/ default CSS one has a call for #main table or td...

[TJINAK]

Got it!!!

Did a little math and added the proper width:

div#main {
  margin-left: 27%; /* this will give room for sidebar to be on the left side, make sure this space is */
  margin-right: 1%; /* and some air on the right */
  width: 72%;}

That did the trick.

TJ