CSS - Need Help Converting A Dynamic Table To Css

hi all ! Im having a little bit of problem to make a header and the table body match in a correct way.

My header is declared as <table align="center" class="style36" id="header">

and the CSS controlling it is

Code:

table.style36 {
        width: 1000px;
		vertical-align:middle;
      }
	  .style36 td{
		  font-family: Arial, Helvetica, sans-serif;
		  font-size: 12px; 
		  vertical-align:middle;
		
		  }

And the table wich is declared as

Code:

<div class="scrollingDiv">	
            <table border="1"  bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >

And the CSS controlling it

Code:

 
  div.scrollingDiv {
        height:420px; 
        overflow:scroll; 
        vertical-align:middle;
		width:1024px;
	  }

table.style13 {
        width: 1000px;
		vertical-align:middle;
      }
      /* Since the table has a class of style13, all td elements under that style can be
          selected as below...  no need for more style definitions...
       */
      .style13 td {
        vertical-align:middle;
		
      }
      .style13 th {      
        vertical-align:middle;
	  }
	  

My first idea was to declare a width for each td, something like:

Code:

 <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
                  <td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td> 

AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated.

Thanks!

Hi

I'm trying to CSS a dynamic table using Dreamweaver CS4 the problem i have is to set my css i have to have 2 rows 1 odd 1 even and dreamweaver only gives me 1. I've added a second row which just remains blank. Can anyone help

Heres my html / PHP:

<div class="donation_table">
<table>
<thead>
<tr>
<th>FAMILYNAME</th>
<th>FAMILYCODE</th>
<th>DONATION</th>
<th>DATE</th>
</tr>
</thead>
<?php do { ?>
<tbody>
<tr>
<td><?php echo $row_Recordset3['FAMILYNAME']; ?></td>
<td><?php echo $row_Recordset3['FAMILYCODE']; ?></td>
<td>$<?php echo $row_Recordset3['DONATION']; ?></td>
<td><?php echo $row_Recordset3['DATE']; ?></td>
</tr>
<tr class="rowline">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<?php } while ($row_Recordset3 = mysql_fetch_assoc($Recordset3)); ?>
</table>
</div>

And heres my PHP code

$maxRows_Recordset3 = 25;
$pageNum_Recordset3 = 0;
if (isset($_GET['pageNum_Recordset3'])) {
$pageNum_Recordset3 = $_GET['pageNum_Recordset3'];
}
$startRow_Recordset3 = $pageNum_Recordset3 * $maxRows_Recordset3;

mysql_select_db($database_MafiaLive, $MafiaLive);
$query_Recordset3 = "SELECT FAMILYNAME, FAMILYCODE, DONATION, `DATE` FROM donations ORDER BY DONATION DESC";
$query_limit_Recordset3 = sprintf("%s LIMIT %d, %d", $query_Recordset3, $startRow_Recordset3, $maxRows_Recordset3);
$Recordset3 = mysql_query($query_limit_Recordset3, $MafiaLive) or die(mysql_error());
$row_Recordset3 = mysql_fetch_assoc($Recordset3);

if (isset($_GET['totalRows_Recordset3'])) {
$totalRows_Recordset3 = $_GET['totalRows_Recordset3'];
} else {
$all_Recordset3 = mysql_query($query_Recordset3);
$totalRows_Recordset3 = mysql_num_rows($all_Recordset3);
}
$totalPages_Recordset3 = ceil($totalRows_Recordset3/$maxRows_Recordset3)-1;

Thank you

Daniel

Hello, i am creating a dynamic content php page. I start with a photoshop image and create slices and have it output the HTML and CSS table.
The problem i am having is that the center cell where the content should go does not expand when the the text goes out of its bound. Is there a way i can do this?

Here is the code and a link to the example output.

Code:

<STYLE TYPE="text/css">
<!--

#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:923px;
	height:103px;
}

#index-02 {
	position:auto;
	left:923px;
	top:0px;
	width:100%;
	height:103px;
	background-image:url(images/headerbkgdlg.gif)
}

#index-03 {
	position:absolute;
	left:0px;
	top:103px;
	width:240px;
	height:35px;
}

#index-04 {
	position:absolute;
	left:240px;
	top:103px;
	width:487px;
	height:40px;
}

#index-05 {
	position:absolute;
	left:727px;
	top:103px;
	width:196px;
	height:35px;
}

#index-06 {
	position:absolute;
	left:923px;
	top:103px;
	width:32px;
	height:452px;
}

#index-07 {
	position:absolute;
	left:0px;
	top:138px;
	width:36px;
	height:417px;
}

#index-08 {
	position:absolute;
	left:36px;
	top:138px;
	width:182px;
	height:312px;
}

#index-09 {
	position:absolute;
	left:218px;
	top:138px;
	width:22px;
	height:417px;
}

#index-10 {
	position:absolute;
	left:727px;
	top:138px;
	width:196px;
	height:398px;
}

#index-11 {
	position:absolute;
	left:240px;
	top:138px;
	width:683px;
	height:397px;
}

#index-12 {
	position:absolute;
	left:36px;
	top:450px;
	width:182px;
	height:105px;
}

#index-13 {
	position:absolute;
	left:240px;
	top:536px;
	width:683px;
	height:19px;
}

#index-14 {
	position:absolute;
	left:0px;
	top:555px;
	width:923px;
	height:22px;
}

#index-15 {
	position:absolute;
	left:923px;
	top:555px;
	width:100%;
	height:21px;
	background-color:#DCCC00;
}

#index-16 {
	position: absolute;
	left: 923px;
	width: 100%;
	height: 451;
	top:103px;
}

-->
</STYLE>
 

http://67.86.83.106:81/homeline/index.php

I would like the bottom portion along with the menu cell to resize
vertically based on the amount of data but always atleast have the given size it is now.

Thanks for the help

Hello, as im waiting for a reply to one previous thread today, i though i would also write this one too, as i REALLY need help. With the html page below, how "would" i make this all STRICT css and still have it look exactly the same.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
body {
	margin-top: 0px;
}
.menuBlue {
	FONT-SIZE: 11px; COLOR: #3c2c7c; FONT-FAMILY: Verdana, Helvetica, sans-serif
}
.menuBlue A {
	COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:visited {
	COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:hover {
	COLOR: #99091c; TEXT-DECORATION: none
}

-->
</style></head>

<body onload="MM_preloadImages('images/Home_On.gif','images/About_On.gif','images/Search_On.gif','images/ContactUs_On.gif')">
<table width="407" height="91" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="70" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/Home_On.gif',1)"><img src="images/Home_Off.gif" alt="Homepage" name="home" width="70" height="18" border="0" id="home" /></a></td>
    <td width="134" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/About_On.gif',1)"><img src="images/About_Off.gif" alt="About RE/MAX" name="about" width="134" height="18" border="0" id="about" /></a></td>
    <td width="86" height="18"><DIV id=divSearch onmouseover="MM_showHideLayers('divSearch','','show')"
style="Z-INDEX: 6; VISIBILITY: hidden; WIDTH: 200px; POSITION: absolute; TOP: 18px; HEIGHT: 95px" onmouseout="MM_showHideLayers('divSearch','','hide')">
        <table id="Table10" cellspacing="0" cellpadding="0" width="200" border="0">
          <tbody>
            <tr>
              <td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" hspace="0" 
      src="images/Spacer.gif" width="200" border="0" /></td>
            </tr>
            <tr>
              <td width="1" bgcolor="#3c2c7c"><img height="1" alt="" hspace="0" 
      src="images/Spacer.gif" width="1" border="0" /></td>
              <td><table id="Table11" cellspacing="0" cellpadding="0" width="198" border="0">
                  <tbody>
                    <tr>
                      <td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt="" 
            src="images/Spacer.gif" width="1" border="0" /></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td width="18"><img height="1" alt="" src="images/Spacer.gif" 
            width="10" border="0" /><img height="14" alt="" 
            src="images/ArrowRight.gif" width="8" border="0" /></td>
                      <td class="menuBlue" width="180">&nbsp;<a 
            href="#">Properties</a></td>
                    </tr>
                    <tr bgcolor="#dce4ec">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Land</a></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Commercial</a></td>
                    </tr>
                    <tr bgcolor="#dce4ec">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Office and Agents</a></td>
                    </tr>
                    <tr bgcolor="#bcccdc">
                      <td><img height="1" alt="" src="images/Spacer.gif" width="10" 
            border="0" /><img height="14" alt="" src="images/ArrowRight.gif" 
            width="8" border="0" /></td>
                      <td class="menuBlue">&nbsp;<a 
            href="#">Franchise Opportunities</a></td>
                    </tr>
                    <tr>
                      <td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt="" 
            hspace="0" src="images/Spacer.gif" width="1" 
      border="0" /></td>
                    </tr>
                  </tbody>
              </table></td>
              <td width="1" bgcolor="#3c2c7c"><img height="1" alt="" 
      src="images/Spacer.gif" width="1" border="0" /></td>
            </tr>
            <tr>
              <td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" 
      src="images/Spacer.gif" width="200" 
border="0" /></td>
            </tr>
          </tbody>
        </table>
      </DIV>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('search','','images/Search_On.gif',1)"><img src="images/Search_Off.gif" alt="Search" name="search" width="86" height="18" border="0" id="search" onmouseover="MM_showHideLayers('divSearch','','show')" onmouseout="MM_showHideLayers('divSearch','','hide')" /></a></td>
    <td width="117" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/ContactUs_On.gif',1)"><img src="images/ContactUs_Off.gif" alt="Contact Us" name="contact" width="117" height="18" border="0" id="contact" /></a></td>
  </tr>
  <tr>
    <td height="73">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Hi all,

I am trying to convert my font info as global.css instead of hard coding it in every file.
Code:

<font size="2" face="Arial, Helvetica, sans-serif">text</font>

to 

.myFont {
 font-size:14px; FONT-FAMILY: Arial, Helvetica, sans-serif;
}

But is not coming out the same in ie, why?

Any help would be greatly appreciated.

Ive been trying to make this site for a friend,
http://www.force-g.net/nathan/mainpage.html
he wants a specific design so I made it with flash. The problem is useless with flash and thats as far as I can get. Can anyone give me a hand or some hints on how I could replicate this design with html and css. Would I have to use frames or can I divide the page with css? Or should I just stick to the flash design I have already?

I'm a relative CSS newbie. I'm trying to convert an image heavy fireworks table created layout to all CSS for a friend. The designs not great but I'm trying to match it best i can

Here's the comp...
<a href="http://www.beardenfoundation.org/newpage.html">http://www.beardenfoundation.org/newpage.html</a>

And here's my first stab at it...
<a href="http://www.timmanteau.com/redo/redo_css.htm">http://www.timmanteau.com/redo/redo_css.htm</a>

Can anyone give me a suggestion as the best way to approach this.
I was thinking a fixed width, 3 column layout with a header and footer.
Then I would place a repeating background image in each column to keep the look. How can I get the 3 columns to size to 100%.

Any advice would be greatly appreciated.
Thanks
Tim

I know there are many benifits to moving from tables to css and div's and after trying to convert one page I have several question that i'm hopeing someone can help with. If everything goes well I will have about 100 pages to convert.

Here is the code so far:

<div position="float: left">
<span class="contentHeader">Direct Basics</span><br>
<p><span class="h2"> Access Direct</span> </p>
<p><span class="livetext">To access Direct: </span></P>
<span class="livetext"> <ol>
<li>On the Portal home page, you can either:<br>
<p style="text-indent: 2em;"> Click the Tool Quicklink for <b>Assetwise
Direct</b> </p>
<p style="text-indent: 10em;"> or<br>
<p style="text-indent: 2em;"> Click the <b>EVALUATE LOANS</b>
menu to select <b>Assetwise Direct</b><br>
</li>
</ol> </span>

<p class="SmallText">
<span class="livetext">
<ol start="2">
<li>When the security screen appears, enter your...<br>
<p style="text-indent: 3em;"> user name
<p style="text-indent: 4em;"> and password<br>
<p style="text-indent: 5em;"> and click <b>OK</b><br>
<br>
Note: The user name and password fields are case sensitive.</li>
</ol></span>
</p>
</div>

<div style="position: absolute; left: 450px; top: 115px"><a target="_blank" href="images/access_awd.jpg">
<img border="0" src="images/access_awd_small.jpg" xthumbnail-orig-image="images/access_awd.jpg" width="100" height="60"></a> <br>
<div style="text-align=center;"> <span class=reporttext>
<a href="images/access_awd.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div>
</div>

<div style="position: absolute; left: 450px; top: 325px"> <a target="blank" href="images/password_box.jpg">
<img border="0" src="images/password_box_small.jpg" xthumbnail-orig-image="images/password_box.jpg" width="100" height="63"></a><br>
<div style="text-align=center"><span class=reporttext>
<a href="images/password_box.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div>
</div>
<p class=livetext style="position: absolute; float: left; left: 515px; top: 500px">
<a href="#" onClick="window.history.back(); return false;">Back</a>
</p>

THe actual page will have a menu on the left and top and this code will be in the main part of the screen. Now, my problem's with the code, other than I have the css in the file (will move to .css file later), a i'm not sure if ive used the best way for positioning images or codeing style for that matter, and when text is resized in a browser it will overlap the images, is there a way around that?

Once i'm done with this page someone else (who is comfortable with tables and has limited web design experience) will be doing updates in FrontPage. For that would it be easier for them to just stick with tables?

Any help would be greatly appreciated.

Hi, I need to convert a table to plain div tags, and have no idea how to do it. Here is the original code, and the code I need it to look like is after it:
Code:

<table width="550" border="0" cellspacing="0" cellpadding="0">
            <tr>

              <td width="10" height="29" background="images/table_top_l.PNG">&nbsp;</td>
              <td valign="bottom" background="images/table_top.PNG" class="style2">&nbsp;&nbsp;TITLE</td>
              <td width="10" background="images/table_top_r.PNG">&nbsp;</td>
            </tr>
            <tr>
              <td background="images/table_s_l.PNG">&nbsp;</td>
              <td><p>&nbsp;</p>

	                <p>&nbsp;</p></td>

              <td background="images/table_s_r.PNG">&nbsp;</td>
            </tr>
            <tr>
              <td height="10" background="images/table_bot_l.PNG"></td>
              <td background="images/table_bot.PNG"></td>
              <td background="images/table_bot_r.PNG"></td>
            </tr>
          </table>

Here is what I need that to look like:

Code:

<div id="left_inner">
</div>

Does anyone here know of any good generators for this kind of thing, I have been using tables for years and am stuck because Joomla requires css tags to dynamically generate modules. Any help I could get is appreciated!

i have to move our site to drupal, and am having a huge issue with a certain div design.

Version 1 - Original, old site shows it working perfectly

but...

Version 2 - Drupal, new site shows all the divs incorrectly.

i have spent the past week, from 9-5 trying to figure this out but i think i have just burned out. .. can someone please help me here as this needs to be done since this is on the main page.

I know it has something to do with the side-feature and afeature divs ...

Need help converting the above to use 960 grid system. Most is already done by "cloning" the FourKitchens.com main page but I can't get this last bit of code converted.

This code is contained within a container-16 element:

Code:

<!-- COLUMN-LEFT -->
<div id="column-left" class="grid-11 suffix-1">
  <!-- COLUMN-LEFT-INNER -->
  <div id="column-left-inner" class="grid-11 clearfix">
    <!-- CONTENT -->
    <div id="content">
      <!-- CONTENT-BODY -->
      <div id="content-body">
        <!-- HEADER_IMG -->
        <div id="header_img">
          <img src="images/banner4.jpg" width="640" id="banner" />
        </div> <!-- END HEADER_IMG -->
        <!-- FILTER-ROW -->
        <div id="filter-row">
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr>
              <td><strong>Filter by :</strong> <a href="categorytasks.php?category=&mny=&f=l">Latest</a> | <a href="categorytasks.php?category=&mny=&f=p">Most Popular</a> | <a href="categorytasks.php?category=&mny=&f=r11">Highest Rated</a>&nbsp;</td>
              <td>&nbsp;</td>
              <td><strong>For $</strong>
              <form name="mnyform" method="post" enctype="multipart/form-data">
              <select name="mnyindex" onChange="indexcategoryload(document.mnyform.mnyindex.value)">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="150">150</option>
                    <option value="250">250</option>
                    <option value="500">500</option>
                    <option value="1">1</option>
                  </select>
                </form>
              </td>
             </tr>
           </table>
        </div> <!-- END FILTER-ROW -->
        <!-- TASK-ROW -->
        <div id="task-row">
           <table width="100%" border="1" cellspacing="0" cellpadding="0">
             <tr>
              <td width="107">
                <img src="taskimages/a4d11fddb35c9f__donate.jpg" width="106" height="76" />
              </td>
              <td width="17">&nbsp;</td>
              <td width="476">
                <a href="task_desc.php?No=21" class="mainheading">I Will Keep it real for $1</a></span><br />
                Just keep it real<br /><br />
                <table width="100%" border="1" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="15%">
                      <a href="task_desc.php?No=21" class="heading">
                        Read more
                      </a>
                      <img src="images/small_twitter.jpg" width="43" height="27" align="absmiddle" />&nbsp;<span class="share" onClick="showHideDiv('share21')" style="cursor:pointer;"> Share</span>
                    </td>
                    <td width="8%">
                      <div id ="share21" style="display:none;">
                        <td width="4%">&nbsp;</td>
                        <td>
                          <a href="fb_link" target="_blank" class="heading">
                            <img src="images/btn-facebook.png" alt="twitter" width="16" height="16" align="absmiddle" />
                          </a>
                          <a href="twitter_link" target="_blank" class="heading">
                            <img src="images/btn-twitter.png" alt="twitter" width="16" height="16" align="absmiddle" />
                          </a>
                        </td>
                        <td width="4%">&nbsp;</td>
                      </div>
                    </td>
                    <td width="1%">&nbsp;</td>
                    <td width="17%" align="right"><a href="task_desc.php?No=21"><img src="images/order_now_btn2.gif" border="0" /></a></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div> <!-- END TASK-ROW -->
      </div> <!-- END CONTENT-BODY -->
    </div> <!-- END CONTENT -->
  </div> <!-- END COLUMN-LEFT-INNER -->
</div> <!-- COLUMN-LEFT -->

Hey All,

I'm playing with elastic design for the first time--trying to use ems for all of my lengths, but I'm having a problem with my ems not converting to pixels consistently and I keep running into this using Firebug. For example:

Code:

<body>
   <div id="page-wrap" class="clearfix">
      <div id="left-container"></div>
      <div id="center-container"></div>
      <div id="right-container"></div>
   </div>
<body>

body { 
   font-size: 62.5%; 
}
#page-wrap { 
   max-width: 96em; 
}
#left-container {
   position: relative;
   float: left;
   margin: 1.5em 0 1.5em 1em;
   border: 0.1em solid red;
   width: 22.8em;
   height: 6em;
}
#center-container {
   position: relative;
   float: left;
   margin: 1.5em 0;
   border: 0.1em solid red;
   padding: 0 1.5em;
   width: 44.8em;
   height: 6em;
}  
#right-container {
   position: relative;
   float: left;
   margin: 1.5em 0 1.5em 1em;
   border: 0.1em solid red;
   width: 22.8em;
   height: 6em;
}  

In firebug, the values are computing consistently and thus the right container is getting pushed down because of 3 pxs. In firebug, the computed values a

page-wrap = 960px
left-container
margin-right = 10px
border = 1px
width = 229 px
center-container
border = 1px
padding (left and right) = 15px
width = 449 px
right-container
margin-left= 10px
border = 1px
width = 229 px

Can anyone help me understand why the widths aren't converting consistently? Why they're adding a pixel?

hi all...

i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet....

frank/