JavaScript - Wrapping Text In Table Of Contents

Hi
I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page.
This is what Ive got so far Code:

<form name="frm3" method="post" action="bookingscript.php">
<input type="hidden" name="adult2fn" value="$adult2name" />
<script Language="JavaScript">
var name1 = document.frm3.adult2fn.value;
 if(name1 =="")
 {alert("hello");document.getElementById("hidden_row").style.display = 'none';}
 else
 {alert("no way");document.getElementById("hidden_row").style.display = '';};
</script>
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidden_row">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</form>

If $adult2name is blank then name1 is blank and the row does not show, else $adult2name contains a name, name1 is not blank and the row shows.
I have tried displaying the hidden form field (by changing it to text), and adding my own content, also putting in my own values instead if $adult2name and the Alerts appear as appropriate, but the whole table disappears whilst the alert is on and reappears when the alert is OKed for either condition of the if. Same in Firefox and IE7 & 8
Could someone please tell me the error of my ways.
Many thanks
Richard

Hey thanks in advance to anyone who can take a peak at my code and hopefully point me in the correct direction.

I have been working on my final project in my javascript class for a bit, and there are a few erros I cant seem to find through firebug or error console.
It is due this evening at midnight, so anyone that could help, I really need this assignment for a decent grade.

Basically there are two issues so far, one needs to be solved so the other can be as well.

First, line 103 - 105 should create a hyperlink to the specified id, but is doesn't return a number. so the link goes no where
it is this code:
PHP Code:
 //create hypertext link to the section heading 
            var linkItem = document.createElement("a"); 
            linkItem.innerHTML = n.innerHTML; 
            linkItem.href = "#" + n.id; 


Next I belive there is a problem with the function expandCollapseDoc(), that might fix itself when the other problem is solved.

The document should expand and collapse with the menu.

Here is my javascript code:
PHP Code:
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 7
   Tutorial Case

   Author: Mike Cleghorn
   Date:   2-15-10

   Filename: toc.js

   Global Variables:
   sections
      An array contain the HTML elements used as section headings in the historic document

   Functions List:

   addEvent(object, evName, fnName, cap)
      Adds an event hander to object where evName is the name of the event,
      fnName is the function assigned to the event, and cap indicates whether
      event handler occurs during the capture phase (true) or bubbling
      phase (false)

   makeTOC()
      Generate a table of contents as a nested list for the contents of the "doc" 
      element within the current Web page. Store the nested list in the "toc"
      element.

   levelNum(node)
      Returns the level number of the object node. If the object node does not
      represent a section heading, the function returns the value -1.

   createList()
      Goes through the child nodes of the "doc" element searching for section headings.
      When it finds a section heading, a new entry is added to the table of contents

   expandCollapse()
      Expands and collapse the content of the table of contents and the historic
      document

   expandCollapseDoc()
      Goes through the child nodes of the "doc" element determining which elements to
      hide and which elements to display

   isHidden(object)
      Returns a Boolean value indicating whether object is hidden (true) or
      not hidden (false) on the Web page by examining the display style for object
      and all its parent nodes up to the body element

*/

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

addEvent(window, "load", makeTOC, false);

var sections = new Array("h1","h2","h3","h4","h5","h6");
var sourceDoc; //document on which TOC is based on
 
function makeTOC(){
    var TOC = document.getElementById("toc");
    TOC.innerHTML = "<h1>Table of Contents</h1>";
    var TOCList = document.createElement("ol");
    TOC.appendChild(TOCList);
    
    sourceDoc = document.getElementById("doc");
    
    //generate list items containing section headings
    createList(sourceDoc, TOCList);
}

function levelNum(node) {
    for (var i = 0; i < sections.length; i++) {
        if(node.nodeName == sections[i].toUpperCase()) return i;
    }
    return -1; //node is not section heading
}

function createList(object, list) {

    var prevLevel = 0; //level of the pervious TOC entry
    
    var headNum =  0; //running count of headings
    
    for (var n = object.firstChild; n != null; n = n.nextSibling) {
        //loop through all nodes in object
        
        var nodeLevel = levelNum(n);
        if (nodeLevel != -1) {
            //node represents a section heading
            
            //insert id for the section heading if necessary
            headNum++;
            
            //create list item to match
            var listItem = document.createElement("li");
            listItem.id = "TOC" + n.id;
            
            
            //create hypertext link to the section heading
            var linkItem = document.createElement("a");
            linkItem.innerHTML = n.innerHTML;
            linkItem.href = "#" + n.id;
                        

            //append the hypertext to the list entry
            listItem.appendChild(linkItem);
            
            
            if (nodeLevel == prevLevel) {
                //append the entry to the current list
                list.appendChild(listItem);
            } else if (nodeLevel > prevLevel) {
                //append entry to new nest list
                var nestedList = document.createElement("ol");
                nestedList.appendChild(listItem);
                
                list.lastChild.appendChild(nestedList);
                
                //add plus/minus box beffore the text
                var plusMinusBox = document.createElement("span");
                plusMinusBox.innerHTML = "--";
                addEvent(plusMinusBox, "click", expandCollapse, false)
                nestedList.parentNode.insertBefore(plusMinusBox, nestedList.previousSibling);
                
                list = nestedList;
                prevLevel = nodeLevel;
                
            } else if (nodeLevel < prevLevel) {
                //append entry to a higher-level list
                var levelUp = prevLevel - nodeLevel;
                for (var i = 1; i<= levelUp; i++) {list = list.parentNode.parentNode;}
                
                list.appendChild(listItem);
                prevLevel = nodeLevel;
            }
        }
    }
}

function expandCollapse(e) {
    var plusMinusBox = e.target || event.srcElement;
    var nestedList = plusMinusBox.nextSibling.nextSibling;

    //Toggle the plus and minus symbol
    if (plusMinusBox.innerHTML == "--") plusMinusBox.innerHTML = "+"
    else plusMinusBox.innerHTML = "--";
    
    //Toggle display of nested list
    if(nestedList.style.display == "none") nestedList.style.display = ""
    else nestedList.style.display = "none";
                
    //expand/collapse doc to match TOC
    expandCollapseDoc();
}

function expandCollapseDoc() {
    var displayStatus = "";

    for  (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) {
        var nodeLevel = levelNum(n);
        if (nodeLevel != -1) {
    
            //determain display status of TOC entry
            var TOCentry = document.getElementById("TOC" + n.id);
            
            if (isHidden(TOCentry)) displayStatus = "none"
            else displayStatus = "";
        }
        
        if (n.nodeType == 1) {
            //apply to current status for the node
            n.style.display = displayStatus;
        }
    }
}

function isHidden(object) {
    for (var n = object; n.nodeName != "BODY"; n = n.parentNode) {
        if (n.style.display = "none") return true;
    }
    return false;
} 



the html was too long, so i uploaded it to my webspace

you can check out the almost working version at http://www.kinetic-designs.net/final/usconst.htm

Again thank you so much! Any questions just ask!

Hi all,

What I am trying to achieve.
I have a php page that has a button on it when clicked shows a div (previously hidden) in the middle of the page this div contains a table with rows.
Each row has an image acting as a button and a series of fields that are populated from a database.

One of the fields is a quantity box I want to be able to change the value in this box and click on the submit img and have it submit this info (including the altered quantity) back to the php page or to the submit function so that I can then access the values.

I have absolutly no idea how to start this. I have very limited javascript experience.

the submit looks something like (at the moment)
Code:

echo '<a href="#" onclick="javascript: document.getElementById(\'stockitemid\').value = '.$stockline->purchaseitemid.'; submitbutton(\'addLineFromStock\')" >'.$purchaseLineImg.'</a>';

and then I was trying to alert in the submit function
something like:
Code:

alert(document.getElementById('stockitemid').value);

my div td fields look like
Code:

<td>
<input type="text" size="3" name="sid[<?php echo $stockline->purchaseitemid; ?>]" id="stockitemid<?php echo $count; ?>" value="<?php echo $stockline->purchaseitemid; ?>" />
</td>
<td>
<input type="text" size="3" name="stockqty[<?php echo $stockline->purchaseitemid; ?>]" id="stockquantity" value="<?php echo $stockline->quantitysupplied; ?>" />
</td>

Any help would be greatly appreciated

Thanks
Kate

I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue).
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>ABC Book Store</title>
<style type="text/css">
<!--
.style1 {
	 font-size: 10pt;
}
-->
</style>

<script>
function ld_fiction()
{
var doc=nb_fiction.XMLDocument;
doc.load("fiction.xml");
document.getElementById("head_id").innerHTML="Fiction "; 
 
}
function Id_nfiction()
{
var doc_s=nb_nfiction.XMLDocument;
doc_s.load("nfiction.xml");
document.getElementByID("head_id_d").innerHTML="NonFiction";
}

function ID_selfhelp()
{
var doc_t=nb_selfhelp.XMLDocument;
doc_t.load("selfhelp.xml");
document.getElementByID("head_id_e").innerHTML="SelfHelp";
}

function ID_reference()
{
var doc_u=nb_ref.XMLDocument;
doc_u.load("ref.xml");
document.getElementByID("head_id_f").innerHTML="Reference";
}

function ID_mags()
{
var doc_v=nb_mags.XMLDocument;
doc_v.load("mags.xml");
document.getElementByID("head_id_g").innerHTML="Mags";
}




</script>

<XML id="nb_fiction" src="fiction.xml"></XML>
<XML id="nb_nfiction" src="nfiction.xml"></XML>
<XML id="nb_selfhelp" src="selfhelp.xml"></XML>
<XML id="nb_ref" src="ref.xml"></XML>
<XML id="nb_mags" src="mags.xml"></XML>



<object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<body>
<table width="30%" border="0" align="left" cellspacing="1" font size="10">


  <tr bgcolor="#CCCCCC">
    <td colspan="2">
				<table id="FICTIONTABLE" table width="100%"  datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF">
				  <caption>
					<span>Fiction        </span>
				  </caption>
					<thead>
				  <tr>
					<th span class="style1">Stock No.</th></span>
					<th span class="style1">Title</th></span>
					<th span class="style1">Author</th></span>
					<th span class="style1">Status</th></span>
					<th span class="style1">Price</th></span>
					<th span class="style1">Publisher</th></span>
					<th span class="style1">Year of Release</th></span>
				  </tr>
				</thead>
				<tbody>
				  <tr>
					<td><span class="style1" datafld="stock"></td></span>
					<td><span class="style1" datafld="title"></td></span>
					<td><span class="style1" datafld="author"></td></td></span>
					<td><span class="style1" datafld="status"></td></span>
					<td><span class="style1" datafld="price"></td></span>
					<td><span class="style1" datafld="publisher"></td></span>
					<td><span class="style1" datafld="year"></td></span>
					
					
					
				  </tr>
				  </tbody>
				</table>
				
	</td>
  </tr>
</body>
</html>

I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables.
I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done.
Any help would really be appreciated and thanks in advance.

I'm writing divs to a page that will be used to hold images of various sizes, so I'm setting the width to auto. However, some of the images will need captions, and with the auto width, the div is widening to accommodate the size of the text, rather than sizing to the image and wrapping the text.

I could wait for the image to load and base the div width on imageobject.width, but waiting for a image.onload is screwing with the rest of my code.

Rather than roto-rooting my code to make the image.onload work, I thought I'd ask if anyone had ideas on making a div auto-size to an image while constraining text in the same (or maybe a child?) div.

Lemme know your thoughts!
Thanks!
~gyz

I have the following table row printing on a webpage
PHP Code:
echo "<tr><td id='counter1'>{$row['counter1']}</td><td><input type='button' name='counter1' onclick='submit();'</td></tr>"; 


While counter1 is 0, 0 is displayed in the cell.
When the user clicks the button, the users username is written to a txt file and counter1 value is increased. What I'm trying to do is display the new counter value but as a link to the txt file like this
<a href='path/to/txt/file.txt'>{$row['counter1']}</a>
After creating the link, how do I put the link into the cell?
Appreciate any help with this.

Hello,
I am trying to search for a string within a table and I am using "createTextRange" but all of the examples I can find use the path "document.body.createtextrange", which uses all of the page data to create the text range. I have tried using the element id but that doesn't seem to work. Any help would be appreciated.

Thank you

Hello now i found better way how to show it to you people.
I finished one teail of this workd .
Now the most important thing i need to do is >

1. Check this http://zr-gaming.ucoz.com/index/ban_lista/0-5
2. In place "Nick Igraca" __________ . When i type there something , that text shoudl go automaticly in table oben
Example When i write "OMG" it should fill "OMG" Under "Nick Igraca" There you see Pred@t0R is allredy filled in , but i do it alone in codes .
So i want when i fill the text and press submit it should go to real place automaticly , so it should be filled in .

How can i do it ?
I hear i need some script or something .

I will give you Reward and Reputation points for help , its inportant for me , i need to finish it for 24 hours .

Thank you very much guys .


If you dont understand something just tell me .

And very thanks to you who will try to help me .

I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column.
I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens.
I have
Code:

document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML

Any ideas?

Hello All,

I'm working on a project which requires a small portion from a large table of information to be displayed on a webpage (sort of like a magnifying glass). The display will be a table of fixed size (m by n cells).
Some of the cells will be merged. When the table updates, different sets of cells may be merged.

It needs to be coded in HTML5, which I assume includes the use of JavaScript and CSS (The specs of this is rather unclear at the moment, so I'm going to cover all bases).


Anyhow, looking through the HTML5 and JavaScript tutorials, I found two ways to solve this problem.
One way would be to have a script to parse out the relevant information, and have it output into a table (dynamically generating the HTML required).


The second way would be to have the script draw the table on its own in a canvas.

User events (such as arrow keys on the keyboard) will change the position of the focus (move the magnifying glass in a cardinal direction).


I hit a small snag with the first solution -
Is it possible to update the table on the page (including changing the structure of it) without having to refresh?

If you could point me to a relevant tutorial or example on the web, I'd greatly appreciate it.

Ok. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution.

Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out.
Code:

<html>

   <head>

     <script type="text/javascript">
         function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>

   </head>

   <body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
	<td width="20%"><center>Print</center></td>
	<td width="20%"><center>Motion</center></td>
	<td width="20%"><center>Photo</center></td>
	<td width="20%"><center>Misc</center></td>
	<td width="20%"><center>Resume</center></td>
</tr>
<tr>
	 <td colspan="2"><table align="left">
    <td colspan="100%">Catagory 1
    </td>
    <tr>
     <a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
     <a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
     <a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
    </tr>        
     <td colspan="100%">Catagory 2
    </td>
    <tr>
          <td><img src="../Jpg/sluticon.jpg" /></td>
       	  <td><img src="../Jpg/sluticon.jpg" /></td>
    </tr>       	
		
	</table></td>
    <td colspan="3">
     <img id="main" src="bowie.jpg" width="400">
    </td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>

Hi,
I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than.
Below is my javascript code: Code:

<script type="text/javascript">

function hallo(){

var value1=200
var inputVal = window.document.getElementById("one").value;

//alert(negNum);
if(inputVal > value1){
window.document.getElementById("color").style.color="red";
}
else
if(inputVal < value1)
{
window.document.getElementById("color").style.color="green";
}
else
if(inputVal == value1)
{
window.document.getElementById("color").style.color="#FF7E00";
}
}

</script>

And below is my php script that displays the data in a web table.
Code:

<body>
<form>
Value1: <input type="text" name="one" id="one" ><br/>
Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
<br/>
Value3: <input type="text" name="three" id="$cell" value="test data">
</form>
<?php
require_once("database.php");
$CustID=$_POST['CustomerID'];

$query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r   WHERE c.CustomerID=r.CustomerID
AND c.CustomerID='".$CustID."'";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th>
<th><font face="Arial, Helvetica, sans-serif">Title</font></th>
<th><font face="Arial, Helvetica, sans-serif">First_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th>
<th><font face="Arial, Helvetica, sans-serif">January</font></th>
<th><font face="Arial, Helvetica, sans-serif">February</font></th>
<th><font face="Arial, Helvetica, sans-serif">March</font></th>
<th><font face="Arial, Helvetica, sans-serif">April</font></th>
<th><font face="Arial, Helvetica, sans-serif">May</font></th>
<th><font face="Arial, Helvetica, sans-serif">June</font></th>
</tr>

<?php
$i=0;
while ($i < $num) {

$f1=mysql_result($result,$i,"CustomerID");
$f2=mysql_result($result,$i,"Title");
$f3=mysql_result($result,$i,"First_Name");
$f4=mysql_result($result,$i,"Last_Name");
$f5=mysql_result($result,$i,"Meter_No");
$f6=mysql_result($result,$i,"January");
$f7=mysql_result($result,$i,"February");
$f8=mysql_result($result,$i,"March");
$f9=mysql_result($result,$i,"April");
$f10=mysql_result($result,$i,"May");
$f11=mysql_result($result,$i,"June");
?>

<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td>
</tr>

<?php
$i++;
}
?>
</body>

As you can see from my javascript, i am getting the elements by id (getElementById("color")).
Currently, only the first <td> with id='color' is changing when the value is entered.
How do I make the text in other table cells with id='color' change color when the comparison value is entered?

I'm working on stripping specific HTML tags in order to do a selected string comparison.
Stripping the tag, done.
Re-calibrating the selection start and end points, done.
Capturing the tags for re-insertion, done.
Getting the start point of the tag, done.

What I am having trouble with is finding the content between the tag so that I can put it back after altering the selected text.

<span class="something">find this content!</span>

Any ideas are more than welcome!
Thanks,

Hi

I need to produce some code to get the contents of the particular TD I am running a function in.

I have the following code which works fine up the point of wanting to delete a row. In order to make it work again I have to go into the code and adjust all the numbers in the functions (not sure that's the correct terminology)

Code:

<head>

<script language='javascript'>

exchRate = '1.12'; 

function gettheUKP(which) {
// This is the line I think I need to change
 var x = document.getElementsByTagName("span")[which].innerHTML; 
var s = Math.round(x / exchRate);
	document.write('(&pound;' + s + ')')
}

</script>

</head>

<body>
<table cellspacing="0" cellpadding="0" class="charges">
       <tr>
		  	<td><strong><span>368</span>&euro;</strong> <script type="text/javascript">gettheUKP(0);</script></td>
       </tr>
       <tr>
            <td><strong><span>471</span>&euro;</strong> <script type="text/javascript">gettheUKP(1);</script></td>
       </tr>
       <tr>
            <td><strong><span>598</span>&euro;</strong> <script type="text/javascript">gettheUKP(2);</script></td>
       </tr>
       <tr>
            <td><strong><span>720</span>&euro;</strong> <script type="text/javascript">gettheUKP(3);</script></td>
       </tr>
       <tr>
            <td><strong><span>998</span>&euro;</strong> <script type="text/javascript">gettheUKP(4);</script></td>
       </tr>
</table>
</body>

So in essence I think I need to change the highlighted line to say "get the contents on the span within this TD".

Is this possible?

Thanks

Hey. I have been pulling out my hair trying to do this.

I am printing out the contents of a DIV tag but it does not print the css with it. Just the basic text
For example:

.testDiv {
border: 1px solid #0F0;
margin-right: 300px;
text-decoration: underline;
font-weight: bold;
}

The print does not change the text according to the css.
Why is this?

Thanks in advance for any help.

Marc