Chrisj

Thanks for your replies. It looks fine to me too....in IE7, but I'm trying to correct it for IE6 viewers. Any thoughts? thanks

When I have <p></p> around some text, the text lines appear double-spaced. When I remove the <p></p> the text lines appear single-spaced. How can I have <p></p> around text and have the the text lines single-spaced? Thanks. Here is my code: <p class="section"><font size="2" color="#800000" face="Arial">Text</font><br/> Text and more text</p> .section { color:#000000; font-size: 12px; font-family:arial; clear:both; line-height: 90%; margin:5px 0px 0px 0px; }

Thanks again for all of your help. I'd like to also create a stand alone table, but when I used this code, it didn't appear like the previous ones that worked successfully. This new one Tab2 the cells all had their own borders, and it didn't have an overall border. Help please..thanks <table class="tab2"> <thead> <tr><th>Number</th><th class="red-text">Item</th></tr> </thead> <tbody> <tr><td>5</td><td>A</td></tr> <tr><td>Total</td><td>5A</td></tr> </tbody> </table> #tab2 { width:170px; float: left; text-align:center; margin:0 10px 0 0; padding: 5; border-collapse:collapse; border: 1px solid #000; } #tab2 th, .tab2 td { border: 1px solid #000; }

I've got this part: text-align:center; How about changing the color of just the word "Items" Thanks again. I've been using <font color="#800000">Items</font>, isn't there a better way?

Thank you, it displays correctly now, I must have copied it incorrectly. Thanks much. Would you be intersted in telling me how to correctly center the information inside the table? And how to change the color of the word "Items" correctly? Thank you again.

Thank you again for your assistance. I changed the css code to what you suggested (below), but now it seems the tables are aligned verically, instead of across the page, and they have no border, like this: Number Items 90 $5.00 Total $5.00 Number Items 90 $5.00 Total $5.00 Number Items 90 $5.00 Total $5.00 Number Items 90 $5.00 Total $5.00 Any additionall help will be appreciated. .tab1 { width:100px; float: left; margin:0 0 20px 0; padding: 0; border-collapse:collapse; border: 1px solid #000; } .tab1 th, .tab1 td { border: 1px solid #000; }

Thanks for all of your help. I have these tables now side by side, like this: <table id="tab1"> <thead> <tr><th>Number</th><th>Items</th></tr> </thead> <tbody> <tr><td>90</td><td>$5.00</td></tr> <tr><td>Total</td><td>$5.00</td></tr> </tbody> </table> <table id="tab1"> <thead> <tr><th>Number</th><th>Items</th></tr> </thead> <tbody> <tr><td>90</td><td>$5.00</td></tr> <tr><td>Total</td><td>$5.00</td></tr> </tbody> </table> With the css code like this: #tab1{ width:100px; float: left; margin:0 0 20px 0; padding: 0; border: solid #000; border-width: 1px 1px 1px 1px; } This puts a border around each table, but in my orginal code I had each variable in it's own bordered "cell"? Can you help me put a vertical line seperating columns and a line seperating rows? Thanks again.

Thanks for your reply and guidance. So if I have this code (below) on the page, how do I identify it and differentiate it from other another table in css? Thanks again. <table> <thead> <tr><th>Number</th><th>Items</th></tr> </thead> <tbody> <tr><td>90</td><td>$5.00</td></tr> <tr><td>Total</td><td>$5.00</td></tr> </tbody> </table>

Thanks again for your help. The orginal code in this thread (that looked good in IE7) displayed five two-column tables horizontal across the page. I added your table code to the web page to test it: [<table1> <thead> <tr><th>Number</th><th>Items</th></tr> </thead> <tbody> <tr><td>90</td><td>$5.00</td></tr> <tr><td>Total</td><td>$5.00</td></tr> </tbody> </table> <table2> <thead> <tr><th>Number1</th><th>Items1</th></tr> </thead> <tbody> <tr><td>90</td><td>$5.00</td></tr> <tr><td>Total</td><td>$5.00</td></tr> </tbody> </table> And I tried to modify the css code to possibly work with the table code: .table1{ width:232px; float: left; clear:left; margin:0 0 20px 0; padding: 0; list-style: none; border: solid #000; border-width: 0 1px 1px 0; } table1 li.lt { float:left; width: 115px; border: solid #000; border-width: 1px 0 0 1px; } .table1 li.rt { float:right; width: 115px; border: solid #000; border-width: 1px 0 0 1px; } .table1 li div { width: 110px; text-align: center; color: #000; font-size: 12px; padding: .4em 0; } .table2{ width:232px; float: left; clear:left; margin:0 0 20px 0; padding: 0; list-style: none; border: solid #000; border-width: 0 1px 1px 0; } table2 li.lt { float:left; width: 115px; border: solid #000; border-width: 1px 0 0 1px; } .table2 li.rt { float:right; width: 115px; border: solid #000; border-width: 1px 0 0 1px; } .table2 li div { width: 110px; text-align: center; color: #000; font-size: 12px; padding: .4em 0; } But of course it doesn't look good. If you would like to provide more guidance it will be greatly appreciated. Thanks

Thanks for your replies. can you please give me an example of "using actual tables instead of trying to emulate them with lists" and an example of "dont use so many divs inside list elements"? thanks again

Thanks for your reply. I changed the width 162px to width:163px, however this did not solve the issue. Any other suggestions will be appreciated.

I appreciate your reply. I thought maybe someone might see why the code won't work in IE8 by just looking at it. I'll try to provide a better explanation. Their are two columns in each table. In IE7 the rows in the first column are perfectly adjacent to the rows in the second column. Like this: Number Items 90 $5.00 Total $5.00 But in IE8 the rows in the first column do not line up perfectly adjacent to the rows in the second column. It appears something like this: Number Items 90 space Total $5.00 space $5.00 The "space" is only about 1/4 of the size of the other column boxes. The "space" is more like a gap. Why does IE8 add these gaps? Any help to remedy this will be appreciated. Thanks.

If you can elaborate, that might be a little more helpful, thanks.

These tables look fine in IE7, but not in IE8. Can you help me? Thanks <ul class="tableX"> <li class="lt"><div><font color="#800000"><b>Number</font></div></li> <li class="rt"><div>Items</b></div></li> <li class="lt"><div>90</div></li> <li class="rt"><div>$5.00</div></li> <li class="lt"><div><font color="#800000"><b>Total</font></div></li> <li class="rt"><div>$5.00</b></div></li> </ul> <ul class="tableX"> <li class="lt"><div><font color="#800000"><b>Number</font></div></li> <li class="rt"><div>Items</b></div></li> <li class="lt"><div>180</div></li> <li class="rt"><div>$10.00</div></li> <li class="lt"><div><font color="#800000"><b>Total</font></div></li> <li class="rt"><div>$10.00</b></div></li> </ul> <ul class="tableX"> <li class="lt"><div><font color="#800000"><b>Number</font></div></li> <li class="rt"><div>Items</b></div></li> <li class="lt"><div>270</div></li> <li class="rt"><div>$15.00</div></li> <li class="lt"><div><font color="#800000"><b>Total</font></div></li> <li class="rt"><div>$15.00</b></div></li> </ul> <ul class="tableX"> <li class="lt"><div><font color="#800000"><b>Number</font></div></li> <li class="rt"><div>Items</b></div></li> <li class="lt"><div>360</div></li> <li class="rt"><div>$20.00</div></li> <li class="lt"><div><font color="#800000"><b>Total</font></div></li> <li class="rt"><div>$20.00</b></div></li> </ul> <ul class="tableX"> <li class="lt"><div><font color="#800000"><b>Number</font></div></li> <li class="rt"><div>Items</b></div></li> <li class="lt"><div>450</div></li> <li class="rt"><div>$25.00</div></li> <li class="lt"><div><font color="#800000"><b>Total</font></div></li> <li class="rt"><div>$25.00</b></div></li> </ul>Css code: Css code: ul.tableX { width:162px; float: left; margin:0 0 0px 5px; padding: 0; list-style: none; border: solid #000; border-width: 0 1px 1px 0; } .tableX li.lt { float:left; border: solid #000; border-width: 1px 0 0 1px; } .tableX li.rt { float:right; border: solid #000; border-width: 1px 0 0 1px; } .tableX li div { width: 80px; text-align: center; color: #000; font-size: 12px; padding: .4em 0; }

Thanks. I tried it onblur and didn't see the line of text, until I entered a letter and then refreshed, so I went with <input type="text" name="keyword" id="sbi" value="Enter Search Words Here"> Is there a trick to make the words disppear when you select the field, rather then having to delete that line of text each time before entering search words? Thanks again

Thanks for your replies. Can you please tell me why I'd want to add: onblur="this.value = 'Enter Search Words Here';" What does that do? Thanks

I am using this Form below for searching, with success. I'd like to add the text: Enter Search Words Here into the Input Field, so people will know to enter search words there. Can you tell me what change to the code below, I'll need to make to accomplish this? Thanks <form method="get" action="search.php" id="search"> <div> <input type="hidden" name="type" value="images"> <label for="sbi"><font size="6" color="#999999" face="Arial">Search:</font></label> <input type="text" name="keyword" id="sbi"> <input type="image" src="/images/searchbutton.gif" align="middle" name="B2" value="Search" /> </div> </form> CSS code: #search label { color:#666; font:1.4em Arial,sans-serif; } #sbi { font:10pt verdana,sans-serif; height:1.4em; width:20em; color:#000; border:2px inset #F5F5F5; background-color:#FFF; } #B2 { font:10pt verdana,sans-serif; width:7em; color:#fff; letter-spacing: 1px; border: 1px inset #F5F5F5; background-color: #800000; }

Thank you

I am using this Form below for searching, with success. I'd like to change the Submit, to an image button. Can you give me an example of how/where I'd make this change? Thanks <form method="get" action="search.php" id="search"> <div> <input type="hidden" name="type" value="images"> <label for="sbi"><font size="6" color="#999999" face="Arial">Search:</font></label> <input type="text" name="keyword" id="sbi"> <input type="submit" value="Search" name="B2" id="B2"> </div> </form> CSS code: #search label { color:#666; font:1.4em Arial,sans-serif; } #sbi { font:10pt verdana,sans-serif; height:1.4em; width:20em; color:#000; border:2px inset #F5F5F5; background-color:#FFF; } #B2 { font:10pt verdana,sans-serif; width:7em; color:#fff; letter-spacing: 1px; border: 1px inset #F5F5F5; background-color: #800000; }

Thanks

Can you please give me an example of what you're suggesting? Thanks

I'm simply trying to put a search box (form) on the same line as the word "Search:", but it appears underneath the word Search: instead of to the right of it in IE7. Any help will be appreciated. Thanks <font size="6" color="#666666" face="Arial">Search:</font><form method="get" action="search.php"><input type="hidden" name="type" value="images" /><input type="text" name="keyword" size="32" value="Search" id="sbi" onclick="clickclear(this, 'Search')" onblur="clickrecall(this,'Search')" style="font-family: verdana; font-weight:; font-size: 10pt; height: 18px; width:240px; color:#000000; letter-spacing: 1; border: 2px inset #F5F5F5; background-color: #ffffff" /><input type="submit" value="Search" name="B2" style="font-family: verdana; font-weight:; font-size: 10pt; width:88px; color:#FFFFFF; letter-spacing: 1; border: 1px inset #F5F5F5; background-color: #990000" /></form>

This code works successfully, however the outputted message looks boring and unprofessional. This text appears with a plain grey border around it: "You cannot upload without first logging in. If you have not already logged in, please do that first." Can someone help me improve the look of that output? How do you add attributes to those script lines? And the border too? This script is located inside container5. The css code for container5 is below. I see where the container elements can be changed, but the text: "You cannot upload without first logging in. If you have not already logged in, please do that first." is within it's own grey-bordered box inside container5 that has it's own blue border. I don't understand where in the java script it creates a grey border that surrounds that text. Can you help me further? Thanks. <div id="column-wide"> <div id="generic-container"> <div class="container5"> <!-- ========================================================== --> <script> // function takeAction() { if (document.getElementById('upload_permission').innerHTML == "Y") { window.location.href = "/up.php"; } else { alert(document.getElementById('alert_text').innerHTML); return false; } } // var member_credits = document.getElementById('member_credits').innerHTML; var upload_permission = document.getElementById('upload_permission').innerHTML; // if (upload_permission == "") { document.getElementById('upload_credit').innerHTML = ""; document.getElementById('upload_restrictions').innerHTML = "You cannot upload without first logging in.<br>"; document.getElementById('login_request').innerHTML = "If you have not already logged in, please do that first."; document.getElementById('alert_text').innerHTML = "Please log in before attempting an upload."; } else if (upload_permission == "Y") { document.getElementById('upload_credit').innerHTML = "Your upload is on file.<br>"; document.getElementById('upload_restrictions').innerHTML = "You may use this webpage to upload."; document.getElementById('login_request').innerHTML = ""; document.getElementById('alert_text').innerHTML = ""; } else { if (upload_permission.length > 1) // referrer send back more than just a flag! { document.getElementById('upload_credit').innerHTML = "*** " + upload_permission + " ***"; document.getElementById('upload_restrictions').innerHTML = ""; document.getElementById('login_request').innerHTML = ""; document.getElementById('alert_text').innerHTML = upload_permission + "\r\nPlease contact the webmaster for assistance."; } else { document.getElementById('upload_credit').innerHTML = "No update credits on file.<br>"; document.getElementById('upload_restrictions').innerHTML = "Please select<a href='page.php?page=13'><font size='2' color='#000000' face='Arial'><u>Upload Terms</u></font></a>to proceed<br>"; document.getElementById('login_request').innerHTML = ""; document.getElementById('alert_text').innerHTML = "Please select the link titled 'Upload Terms' to proceed with your initial upload."; } } </script> <!-- ========================================================== --> </div> </div> </div>

I have this Form on an html page and the associated code on page.php (below). I keep getting the "Please Fill In All Fields" message. Can you help me fix this? I'm sure I'm just missing something. Thanks Html page code: <form action="/page.php" method="post" name="contact_us" onSubmit="return capCheck(this);"> <table cellpadding="0" width="100%"> <tr> <td width="10" class="required_field">*</td> <td width="80">Your Name</td> <td><input type="text" name="name" maxlength="50" style="width:300px" /></td> </tr> <tr> <td class="required_field">*</td> <td>Email Address</td> <td><input type="text" name="email" maxlength="40" style="width:300px" /></td> </tr> <tr> <td></td> <td>Subject:</td> <td><input type="text" name="subject" maxlength="40" style="width:300px" /></td> </tr> <tr> <td></td> <td>Comments:</td> <td><textarea name="comments" style="width: 100%; height: 250px"></textarea></td> </tr> <tr> <td class="required_field">*</td> <td>Enter Image Code:</td> <td><input type="text" value="" name="captext" style="width: 100px" maxlength="6" /></td> </tr> <tr> <td></td> <td><a onclick="refresh_security_image(); return false;" style="cursor:pointer;"><u>Refresh Image</u></a></td> <td><img src="includes/captcha.php" border="0" id="verificiation_image" /></a></td> </tr> </table> <br> <br> <p> <input type="hidden" name="submited" value="1" /> <input type="submit" name="submit" value="Submit" /> </p> </form> PHP page code: //Start Contact Us if($_POST['submited'] == "1"){ $your_email = "XXXXX"; //This is your email address $from = "From: xxxxxx.com". "\r\n"; //This will show as the email sender. $user_email = $_POST['email']; $user_name = $_POST['name']; $subject = $_POST['subject']; $email_body = $_POST['comments']; if($user_email == "" or $user_name == "" or $email_body == ""){ $error = "Please Fill In All Fields"; }else{ $message = "Feedback : \n \nUsers Email : $user_email \nUsers Name : $user_name \n\nSubject : $subject \n\n\n Comments : \n\n$email_body"; //SEND THE EMAIL mail($your_email, $subject, $message, $from); $result = "Your Message Has Been Sent. Thank You"; } } //End Contact Us

I have this Form, where there is a field that requires a number to be entered into it. How can I add the function where the number has to be re-entered into the next field, and match the original number field? I want to check that the number in both inputs is the same before the form will be submitted successfully Thanks <html> <head> <title></title> </head> <body> <br> <h1 style="border-bottom:1px solid #dddcdc;"><br><center> Form</center></h1> <p><center><font face="verdana"><font size="2"><font color=#000000;"></font></font></p> <p><font face="verdana"><font size="2"><font color=#800000;">Please complete the simple form below.</font></font></p> <p><font face="verdana"><font size="2"><font color=#000000;">.</font></font></p> <p><font face="verdana"><font size="2"><font color=#000000;"> </font></font></center></p> <!--<div style="height: 80px; background-color: #336699;"> <span class="page_title"><span class="form_title">Form</span></span> </div>--> <br /> <table cellpadding="0" cellspacing="0" align="center" width="600"> <tr> <td> <font face="verdana"><font size="2"><font color=#800000;">[var.result]</font></font><font color="red"><strong>[var.error]</strong></font><br> <hr size="1" /> <br /> <form action="/page.php?page=14" method="post" name="contact_us" onSubmit="return capCheck(this);"> <table cellpadding="0" width="100%"> <tr> <td width="10" class="required_field">*</td> <td width="80">First Name:</td> <td><input type="text" name="name" maxlength="50" style="width:300px" /></td> </tr> <tr> <td class="required_field">*</td> <td>Last Name:</td> <td><input type="text" name="email" maxlength="40" style="width:300px" /></td> </tr> <tr> <td class="required_field">*</td> <td>Type:</td> <td><input type="text" name="custom1" maxlength="20" style="width:300px" /></td> </tr> <tr> <td class="required_field">*</td> <td>Number:</td> <td><input type="text" name="custom2" maxlength="20" style="width:300px" /></td> </tr> <tr> <tr> <td class="required_field">*</td> <td>Enter Image Code:</td> <td><input type="text" value="" name="captext" style="width: 100px" maxlength="6" /></td> </tr> <tr> <td></td> <td><a onclick="refresh_security_image(); return false;" style="cursor:pointer;"><u>Refresh Image</u></a></td> <td><img src="includes/captcha.php" border="0" id="verificiation_image" /></a></td> </tr> </table> <br> <br> <p> <input type="hidden" name="submited" value="1" /> <input type="submit" name="submit" value="Submit" /> </p> </form> </td> </tr> </table> <script type="text/javascript"> <!-- function refresh_security_image() { var new_url = new String("[var.base_url]/includes/captcha.php?width=132&height=36&charcators="); new_url = new_url.substr(0, new_url.indexOf("width=") + 37); // we need a random new url so this refreshes var chr_str = "123456789"; for(var i=0; i < 6; i++) new_url = new_url + chr_str.substr(Math.floor(Math.random() * 2), 1); document.getElementById("verificiation_image").src = new_url; } --> </script> <!-- captcha start --> <script type="text/javascript" id="clientEventHandlersJS" language="javascript"> <!-- function capCheck(theForm) { var xmlhttp; var sReply; DataToSend = "action=process&captext=" + escape(theForm.captext.value); if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST",'includes/process.php',false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(DataToSend); sReply = xmlhttp.responseText; } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("POST",'includes/process.php',false); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send(DataToSend); sReply = xmlhttp.responseText; } if (sReply == "good") { return true; } else if (sReply == "bad") { alert("Security code not valid, please try again"); return false; } else if (sReply == "") { alert("You must enter the security code"); return false; } else { alert("Error"); return false; } } --> </script> <!-- captch end --> </body> </html>