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 4 of 4
  1. #1
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts

    Updating Mike McGrath's Topdeck Popper

    I am updating Mike McGrath's Topdeck Popper Script. The below code works fine but of course will not validate as it uses deprecated tags.

    I seem to have a brain blockage as I cannot turn this table code into CSS. Can anyone point me the right way?


    Code:
    function pop(msg,bakgrcol) {
    
    var content ="<table width='180' border='0' cellpadding='2' cellspacing='0' bgcolor='#000000'><tr><td><table width='100%' border='0' cellpadding='0' cellspacing='0'><tr><td><center><font color='#FFFFFF' size='2' face='Arial'><b>Detailed Info</b></font></center></td></tr></table><table width='100%' border='0' cellpadding='4' cellspacing='0' bgcolor="+bakgrcol+"><tr><td><font color='#000000' size='2' face='Arial'><center>"+msg+"</center></font></td></tr></table></td></tr></table>";
    document.getElementById("topdeck").innerHTML = content;
    skn.visibility = "visible";  
      
    }
    I have to say that I miss the <center> tag!
    Last edited by Philip M; 07-30-2012 at 06:35 PM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,911
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Code:
    <center><font color='#FFFFFF' size='2' face='Arial'><b>Detailed Info</b></font></center> replace with 'Detailed Info'
    
    in the style sheet
    
    table td
    {
    color: #ffffff;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    }
    The vertical align may not work, the rest should.

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I came up with, assuming you need to keep the inline styles:

    Code:
    var content ="<table style='background-color:#000;text-align:center;font-family:Arial;font-size:13px;border-collapse:collapse;border:1px solid #000' width='180'><tr><td><table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFF;'><b>Detailed Info</b></td></tr></table><table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:4px'>"+msg+"</td></tr></table></td></tr></table>
    "
    which gives an identical result to the original html, I think, and validates to HTML4 Strict.

  • Users who have thanked SB65 for this post:

    Philip M (07-31-2012)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by SB65 View Post
    I came up with, assuming you need to keep the inline styles:

    Code:
    var content ="<table style='background-color:#000;text-align:center;font-family:Arial;font-size:13px;border-collapse:collapse;border:1px solid #000' width='180'><tr><td><table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFF;'><b>Detailed Info</b></td></tr></table><table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:4px'>"+msg+"</td></tr></table></td></tr></table>
    "
    which gives an identical result to the original html, I think, and validates to HTML4 Strict.
    Thank you! Works fine in IE9 but in FF and GC the text is not centred in the table (message box). Fixed with:-

    Code:
    var content ="<table style='background-color:#000000;text-align:center;font-family:Arial;font-size:13px;border-collapse:collapse;border:1px solid #000000' width='180'><tr><td>" + 
    "<table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFFFFF;font-family:Arial;font-size:13px;text-align:center;'><b>Detailed Info</b></td></tr></table>" +
    "<table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:5px;text-align:center;font-family:Arial;font-size:13px;'>"+msg+"</td></tr></table></td></tr></table>";
    Last edited by Philip M; 07-31-2012 at 12:13 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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