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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help finding dates depending on selected drop-down options

    Hi,

    I've created a table in HTML which I'm wanting JavaScript to be able to add into the "Salary payment date of the month" field the last date of the month which is the last Friday. This depends on which month and year they select from the drop-down list. Any idea how to do this? Screenshot below.

    Screenshot - http://i48.tinypic.com/34hc8sn.png

    Also for the "Bonus date for the month field", I'd like to show the 15th of the previous month (so if current month is Sept, show July), however if the 15th is a weekend, then show the Wednesday after the 15th. Any idea how to do this?

    My table code
    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=utf-8" />
    <title>Untitled Document</title>
    
    <style>
    td {text-align:center;}
    </style>
    
    </head>
    
    <body>
    <table width="100%" border="0">
      <tr>
        <th width="11%">Name</th>
        <th width="11%">Department</th>
        <th width="17%">Month (please select)</th>
        <th width="15%">Year (please select)</th>
        <th width="10%">Monthly base salary</th>
        <th width="9%">Monthly bonus</th>
        <th width="16%">Salary payment date of the month</th>
        <th width="11%">Bonus date for previous month</th>
      </tr>
      <tr>
        <td>John Smith</td>
        <td>Marketing</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>1500</td>
        <td>200</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Claire Jackson</td>
        <td>Sales</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>1200</td>
        <td>160</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Sam Archer</td>
        <td>IT</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>1300</td>
        <td>170</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>William Hill</td>
        <td>Finance</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>1900</td>
        <td>240</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Sarah Stone</td>
        <td>IT</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>2000</td>
        <td>280</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Bethany Rose</td>
        <td>Marketing</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>2500</td>
        <td>320</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Mike Wills</td>
        <td>Sales</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>1000</td>
        <td>130</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>George Peters</td>
        <td>Finance</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>2100</td>
        <td>300</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>Katie Manson</td>
        <td>IT</td>
        <td><select>
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select></td>
        <td><select>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>1800</td>
        <td>230</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    I made a start, but doesn't really seem to be working. Plus doesn't work of the drop-down list.
    Code:
    function daysInMonth(iMonth, iYear)
    {
        return 32 - new Date(iYear, iMonth, 32).getDate();
    }
     
    
    var dif = null;
    d = new Date(); // Today's date
    countDays = daysInMonth(d.getMonth(),d.getFullYear()); //Checking number of days in current month
    d.setDate(countDays); //setting the date to last day of the month
    dif = (d.getDay() + 6) % 7; // Number of days to subtract
    d = new Date(d - dif * 24*60*60*1000); // Do the subtraction
    
    <button onclick="alert(d.getDate(12, 2012));">Dec 2012</button>
    Thanks in advance

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    Quote Originally Posted by byteuk View Post
    I'd like to show the 15th of the previous month (so if current month is Sept, show July)
    wait... which calendar are you using?

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    Quote Originally Posted by xelawho View Post
    wait... which calendar are you using?
    Yeah, what happened to Aug.???
    That was my birth month!

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to consider...

    How close is this to the logic you desire to express?
    (Partial table display for testing purposes only)
    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=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=272609
    
    function daysInMonth(iMonth, iYear) { return 32 - new Date(iYear, iMonth-1, 32).getDate(); }
    function lastFriday() {
      var m = document.getElementById('m0').value*1;
      var y = document.getElementById('y0').value*1;
      var d = daysInMonth((m+1),y);
      var dt = new Date(y,m,d);
      while(dt.getDay() != 5) { d--;  dt.setDate(d); }
      document.getElementById('spdotm0').innerHTML = dt.toDateString();
    }
    function bonusDate() {
      var m = document.getElementById('m0').value*1;
      var y = document.getElementById('y0').value*1;
      m--;  if (m < 0) { m = 11; y--; }
      var d = 15;
      var dt = new Date(y,m,d);
      if ((dt.getDay() == 0) || (dt.getDay() == 6)) { 
        while(dt.getDay() != 3) { d++;  dt.setDate(d); }
      } else {
    //    while(dt.getDay() != 5) { d--;  dt.setDate(d); }  // unsure of desired logic of OP here
      }
      document.getElementById('bdopm0').innerHTML = dt.toDateString();
    }
    </script>
    
    <style>
    td {text-align:center;}
    </style>
    
    </head>
    
    <body>
    <button onclick="lastFriday();bonusDate()">Select</button>
    <p />
    
    <table width="100%" border="0">
      <tr>
        <th width="11%">Name</th>
        <th width="11%">Department</th>
        <th width="17%">Month (please select)</th>
        <th width="15%">Year (please select)</th>
        <th width="10%">Monthly base salary</th>
        <th width="9%">Monthly bonus</th>
        <th width="16%">Salary payment date of the month</th>
        <th width="11%">Bonus date for previous month</th>
      </tr>
      <tr>
        <td>John Smith</td>
        <td>Marketing</td>
        <td><select id="m0">
            <option value="0">January</option>
            <option value="1">February</option>
            <option value="2">March</option>
            <option value="3">April</option>
            <option value="4">May</option>
            <option value="5">June</option>
            <option value="6">July</option>
            <option value="7">August</option>
            <option value="8">September</option>
            <option value="9">October</option>
            <option value="10">November</option>
            <option value="11">December</option>
          </select></td>
        <td><select id="y0">
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select></td>
        <td>1500</td>
        <td>200</td>
        <td id="spdotm0">&nbsp;</td>
        <td id="bdopm0">&nbsp;</td>
      </tr>
    
    </table>
    </body>
    </html>

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    here's my swing at it... just paste this below your table, preferable just before the closing </body> tag in your html

    Code:
    <script type="text/javascript">
    var sels=document.getElementsByTagName("select");
    
    for (var i = 0; i < sels.length; ++i) {
    sels[i].onchange=function (){
    if(this.options[2].value.length>4){
    var m=this.selectedIndex;
    var y=this.parentNode.parentNode.cells[this.parentNode.cellIndex+1].firstChild.value;
    	} else {
    var m=this.parentNode.parentNode.cells[this.parentNode.cellIndex-1].firstChild.selectedIndex;
    var y=this.value;
    	} 
    var d=new Date(y,m+1,1);    
    var ddiff=(d.getDay()+1)%7+1;  
    var d_lastfriday=new Date(y,m+1,1-ddiff).toDateString();
    this.parentNode.parentNode.cells[6].innerHTML=d_lastfriday;
    
    var prevMonth=m==0?11:m-1;
    if (prevMonth==11){y=y-1}
    var bonusDay=new Date(y,prevMonth,15);
    while (bonusDay.getDay()== 6||bonusDay.getDay()==0){
    bonusDay.setDate(bonusDay.getDate()+1);
    	}
    this.parentNode.parentNode.cells[7].innerHTML=bonusDay.toDateString();	
    	}
    }	
    </script>
    Last edited by xelawho; 09-09-2012 at 08:29 AM. Reason: playing around

  • #6
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha yes sorry missed out August....oops! Thanks xelawho, that is great! Just realised I totally put the spec in wrong, I do apologise. The "Salary payment date of the month" is meant to show the last day of the month. If however the last day of the month is a weekend, then it will show the Friday before. So for example the last day in Septemeber 2012 is a Sunday, and therefore should show Friday 28th Septemeber 2012. However for October 2012, the last day in the month is Wednesday 31st, so should just show Wednesday 31st 2012.


    Also, for the "Bonus date for previous month" it is meant to be the 15th of the same month, not previous (my bad sorry). However I did notice for example the 15th of September 2012 is a Saturday, therefore as it's a weekend it should should the the next Wednesday after which is the 19th, however appears to be showing Monday 17th. If the 15th is not a weekend, then it should show whatever day and date the 15th is.

    Thanks for you help with this.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I think this is it. Have a play around.

    Fwiw, being that the script relies on the onchange event, it makes it complicated for the user to get the details for the initial date displayed (ie, January 2008) - they have to change one select, then change it back. Away around this is to have "dummy" options at the top, like -Select Month- and -Select Year- but ten you would have to bump the selectedIndex up one and only fire the function if both selects have valid selections.

    Which is a minor tweak - something to think about, maybe.

    Code:
    <script type="text/javascript">
    var sels=document.getElementsByTagName("select");
    
    for (var i = 0; i < sels.length; ++i) {
    sels[i].onchange=function (){
    if(this.options[2].value.length>4){
    var m=this.selectedIndex;
    var y=this.parentNode.parentNode.cells[this.parentNode.cellIndex+1].firstChild.value;
    	} else {
    var m=this.parentNode.parentNode.cells[this.parentNode.cellIndex-1].firstChild.selectedIndex;
    var y=this.value;
    	} 
    var lastday=new Date(y,m+1,0);    
    while (lastday.getDay()== 6||lastday.getDay()==0){
    lastday.setDate(lastday.getDate()-1);
    	}
    this.parentNode.parentNode.cells[6].innerHTML=lastday.toDateString();
    
    var bonusDay=new Date(y,m,15);
    if (bonusDay.getDay()== 6||bonusDay.getDay()==0){
    while (bonusDay.getDay()!=3){
    bonusDay.setDate(bonusDay.getDate()+1);
    		}
    	}
    this.parentNode.parentNode.cells[7].innerHTML=bonusDay.toDateString();	
    	}
    }	
    </script>

  • #8
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see, thank you xelawho. I guess might be a more sensible to have a forum which inputs the data into the table. So rather than having a drop-down to select which month and year, they input into the form their name, department, month and year, then when the form is submitted it is added to the table with the dates for pay date and bonus date displayed.

    How would I go abouts doing this? Would it be using HTML5?

    Thanks for all your help.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    this is very basic html and js interaction - html5 is all bells and whistles compared to what you are trying to do here.

    I would suggest keeping the dropdowns for month and year (otherwise you have to play around making sure the input is in the correct format) and getting rid of the table altogether...

    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=utf-8" />
    <title>Untitled Document</title>
    <style>
    .deets{
    padding-right:20px}
    </style>
    </head>
    
    <body>
    <form>
    Employee name:<input type="text" name="empname"/>
    Department:<input type="text" name="dept"/>
    <select name="mth">
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select>
    	  <select name="yr">
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select>
    	  <input type="button" value ="show dates" onclick="calcDates(this.form)"/>
    </form>
    <div id="res"></div>
    <script type="text/javascript">
    function calcDates(frm){
    var m=frm.mth.selectedIndex;
    var y = frm.yr.value;
    
    var lastday=new Date(y,m+1,0);    
    while (lastday.getDay()== 6||lastday.getDay()==0){
    lastday.setDate(lastday.getDate()-1);
    	}
    
    	var bonusDay=new Date(y,m,15);
    if (bonusDay.getDay()== 6||bonusDay.getDay()==0){
    while (bonusDay.getDay()!=3){
    bonusDay.setDate(bonusDay.getDate()+1);
    		}
    }
    	
    document.getElementById("res").innerHTML+="<span class='deets'>Employee Name: "+frm.empname.value+"</span>"
    +"<span class='deets'>Department: "+frm.dept.value+"</span>"
    +"<span class='deets'>Salary pay date: "+lastday.toDateString()+"</span>"
    +"<span class='deets'>Bonus pay date: "+bonusDay.toDateString()+"</span><br>"
    
    frm.reset();
    }
    </script>
    
    </body>
    </html>

  • #10
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Yeah makes sense, however in a table it keeps it in line which is what I need. How would you change it to a table instead of span classes? I tried editing the following to use a table, but ended up breaking it and causing the JS not to work. Sorry for all the questions, appreciate you help.

    Part I tried editing.
    Code:
    document.getElementById("res").innerHTML+="<span class='deets'>Employee Name: "+frm.empname.value+"</span>"
    +"<span class='deets'>Department: "+frm.dept.value+"</span>"
    +"<span class='deets'>Salary pay date: "+lastday.toDateString()+"</span>"
    +"<span class='deets'>Bonus pay date: "+bonusDay.toDateString()+"</span><br>"

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,915
    Thanks
    56
    Thanked 545 Times in 542 Posts
    ignoring the table idea (because tables are crap) you could do a couple of things to keep everything in line. One would be the slightly unconventional approach of converting your spans into block elements using CSS, which just requires you to change the deets class to this:
    Code:
    <style>
    .deets{
    display:inline-block;
    width:25%}
    </style>
    The more conventional way would be to use separate divs for each "column" and float them left:

    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=utf-8" />
    <title>Untitled Document</title>
    <style>
    .deets{
    float:left;
    width:25%}
    </style>
    </head>
    
    <body>
    <form>
    Employee name:<input type="text" name="empname"/>
    Department:<input type="text" name="dept"/>
    <select name="mth">
            <option value="january">January</option>
            <option value="february">February</option>
            <option value="march">March</option>
            <option value="april">April</option>
            <option value="may">May</option>
            <option value="june">June</option>
            <option value="july">July</option>
            <option value="august">August</option>
            <option value="september">September</option>
            <option value="october">October</option>
            <option value="november">November</option>
            <option value="december">December</option>
          </select>
    	  <select name="yr">
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
          </select>
    	  <input type="button" value ="show dates" onclick="calcDates(this.form)"/>
    </form>
    <div id="thename" class="deets">Employee Name:</div>
    <div id="thedept" class="deets">Department:</div>
    <div id="theday" class="deets">Payday:</div>
    <div id="thebonus" class="deets">Last bonus paid:</div>
    <script type="text/javascript">
    function calcDates(frm){
    var m=frm.mth.selectedIndex;
    var y = frm.yr.value;
    
    var lastday=new Date(y,m+1,0);    
    while (lastday.getDay()== 6||lastday.getDay()==0){
    lastday.setDate(lastday.getDate()-1);
    	}
    
    	var bonusDay=new Date(y,m,15);
    if (bonusDay.getDay()== 6||bonusDay.getDay()==0){
    while (bonusDay.getDay()!=3){
    bonusDay.setDate(bonusDay.getDate()+1);
    		}
    }
    	
    document.getElementById("thename").innerHTML+="<br>"+frm.empname.value;
    document.getElementById("thedept").innerHTML+="<br>"+frm.dept.value;
    document.getElementById("theday").innerHTML+="<br>"+lastday.toDateString();
    document.getElementById("thebonus").innerHTML+="<br>"+bonusDay.toDateString();
    
    frm.reset();
    }
    </script>
    
    </body>
    </html>
    they amount to much the same thing, the only problem with either approach being that if you have a really long entry (or the screen is really small) the columns will not expand to accommodate the content - rather they will overlap, but you would be talking about one very long word with no white spaces - you can fix that by either adding
    Code:
    word-wrap: break-word
    (to break the word at the width of the column, regardless), or
    Code:
    overflow: auto
    (to expand the column the way a table does)
    to the deets bit of your CSS
    .
    Last edited by xelawho; 09-10-2012 at 07:28 PM.


  •  

    Posting Permissions

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