Philip

YEah, I got it to work now. I actually didn't change much, in the loginCheck function I changed a few things to this: function checkLogin() { var username = document.getElementById("username").value; var password = hex_md5(document.getElementById("password").value); var loginstatus = document.getElementById("login-status"); var status = getText(loginstatus); //Commented out = changed //if(loginstatus == 'Please Login Above') { replaceText(loginstatus, "Logging " + username + " in."); var url = "php/login.php?username=" + username + "&password=" + password; //document.forms[0].reset(); sendRequest(request, url); // } }

If I take it out of global, it sits at "Logging <i>name</i> in" Wait, it kinda works now. You have to hit the submit button, it will show up with "logging xxnamexx in" and then if you click it again, it will show if it worked or not.

Something like this: http://www.bookmarkmania.com/ajax/show_hide_div.html ? If yes, just look at the source code, let me know if you need an explanation.

Still didn't work. Driving me crazy =P

Hey guys, I'm not too lucky when it comes to JS & AJAX scripting. When I'm lucky, it lets me do basic stuff. I know there has to be a simple solution, like one line of code that I'm missing. Goal: Login with AJAX form Problem: Once the form is submitted once, you can't submit it again. Let's say that you entered in a typo for your password, and you were rejected to be logged in, then you would want to enter in your info again. Well, for my form, once it submits once, you can't submit again. http://www.bookmarkmania.com/ajax/test/login.html User: philip Pass: test To login with the info above, its on an onblur cue, so just tab off the password box. And for those who say its a security threat, I have a script for md5'ing it before it gets submitted to the server, so its more secure. AJAX script: function createRequest() { var request = null; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null; } } } if (request == null) { alert("Error creating request object!"); } else { return request; } } var request = createRequest(); JS Script: function sendRequest(request, url) { request.onreadystatechange = finishLogin; request.open("GET", url, true); request.send(null); } function checkLogin() { var username = document.getElementById("username").value; var password = hex_md5(document.getElementById("password").value); var loginstatus = document.getElementById("login-status"); var status = getText(loginstatus); if (status == "Please Login Above") { replaceText(loginstatus, "Logging " + username + " in."); var url = "php/login.php?username=" + username + "&password=" + password; document.forms[0].reset(); sendRequest(request, url); } } function finishLogin() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText; var loginfail = response.substring(0, 1); var name = response.substring(1, response.length); if(loginfail == '0') { var loginstatus = document.getElementById("login-status"); replaceText(loginstatus, "Login Successful! Welcome back " + name); window.redirect='main.php'; } } if (request.status != 200) { var loginstatus = document.getElementByID("login-status"); replaceText(loginstatus, "Request Status isn't working"); } if(loginfail == '1') { var loginstatus = document.getElementById("login-status"); replaceText(loginstatus, "Login Failed (Wrong Info) " + name); request = createRequest(); } } } Thanks guys!

Whoopsies, I thought I got rid of that last night. I noticed it too. Guess I forgot to upload the new file (Stupid me)

I tried that last night, I'm not sure if I'm doing it 100% the way you are saying though. Here's the new code: JS Code: function grayOut(vis, el, options) { // Pass true to gray out screen, false to ungray // options are optional. This is a JSON object with the following (optional) properties // opacity:0-100 // Lower number = less grayout higher = more of a blackout // zindex: # // HTML elements with a higher zindex appear on top of the gray out // bgcolor: (#xxxxxx) // Standard RGB Hex color code // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'}); // Because options is JSON opacity/zindex/bgcolor are all optional and can appear // in any order. Pass only the properties you need to set. var options = options || {}; var zindex = options.zindex || 50; var opacity = options.opacity || 70; var opaque = (opacity / 100); var bgcolor = options.bgcolor || '#000000'; var dark= document.getElementById('darkenScreenObject'); var dlg = document.getElementById(el) if (!dark) { // The dark layer doesn't exist, it's never been created. So we'll // create it here and apply some basic styles. // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917 var tbody = document.getElementsByTagName("body")[0]; var tnode = document.createElement ('div'); // Create the layer. tnode.style.position='absolute'; // Position absolutely tnode.style.top='0px'; // In the top tnode.style.left='0px'; // Left corner of the page tnode.style.overflow='hidden'; // Try to avoid making scroll bars tnode.style.display='none '; // Start out Hidden tnode.id='darkenScreenObject'; // Name it so we can find it later tbody.appendChild(tnode); // Add it to the web page dark=document.getElementById('darkenScreenObject'); // Get the object. } if (vis) { // Calculate the page width and height if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) { var pageWidth = document.body.scrollWidth+'px'; var pageHeight = document.body.scrollHeight+'px'; } else if( document.body.offsetWidth ) { var pageWidth = document.body.offsetWidth+'px'; var pageHeight = document.body.offsetHeight+'px'; } else { var pageWidth='100%'; var pageHeight='100%'; } //set the shader to cover the entire page and make it visible. dark.style.opacity=opaque; dark.style.MozOpacity=opaque; dark.style.filter='alpha (opacity='+opacity+')'; dark.style.zIndex=zindex; dark.style.backgroundColor=bgcolor; dark.style.width= pageWidth; dark.style.height= pageHeight; dark.style.display= 'block '; dlg.style.display= 'block '; } else { dark.style.display= 'none'; dlg.style.display= 'none'; } } CSS: /* horizon used to get absolute center */ #horizon { text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 0px; overflow: visible; visibility: visible; display: block; z-index:100 } /*Pop-up box*/ #dialog { display:none; font:10pt tahoma; border:1px solid gray; background-color: #f00; margin-left: -125px; position: absolute; top:150px; left: 50%; width:250px; height: 210px; z-index:100; background:white; padding:2px; } /*Gray-out*/ #cover { display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:gray; filter:alpha(Opacity=50); opacity:0.5; -moz-opacity:0.5; -khtml-opacity:0.5; z-index:99; } HTML: (I have more, but this is the end) ... <?php include $path."/css/php/footer1.php"; ?> <div id="horizion"> <div id="dialog"> <form action="/info_newsletter.php" method="post" class="f-wrap-1"> <h3>Newsletter Signup:</h3> <b>Email Address:</b><br /> <input id="email" name="email" type="text" tabindex="1" maxlength="75" value=""/><br /> <b>Confirm Email Address:</b><br /> <input id="email2" name="confirm_email" type="text" tabindex="1" maxlength="75" value=""/><br /> <p class='highlight'>This must be a valid email address!</p> <input type="submit" value="Submit!" class="f-submit" tabindex="3" /> <div align="center"><a href="#" onclick="grayOut(false, 'dialog');">Close [X]</a></div></form> </div> </div> </body> </html> I'm just not sure what I exactly need to change to get it the way you're saying, but I get the basic idea Thanks for the help

Go ahead and either split it up, or only include the style sheet once otherwise, you have 3 of the same links to your stylesheet inside the BODY area, since you already have it in the HEAD of your document. Also, I don't know what you mean by the colors aren't right, because they are right to what you have in the CSS: body,div { color: white;[ margin: 1; padding: 0; text-align: center; background: black }

Take a look at it in IE, sorry. It doesn't work in IE7, and I am not able to test the others, so I'm not sure what it looks like in IE 6 or 5 I thought I said something about IE. I was tired

Why would you want to do this? Here's an example I found earlier, quoted:

What is your current code Your padding/margins might be pretty large if the text isn't at the top of the page

Try using a span on the next button: <span class="right">NEXT</span> <p class="left">PREV</p> <p class="center">1 2 3</p> If you don't use a span, the text-align will automatically break the line after the centered text.

Hey guys, I've been wanting to try something for a while now, and I have finally found some coding that goes along with it. However, with the layout I am using for a site, it does not work. I know for a fact that it is IE's Z-Index stupidity, because it works fine in Firefox. I've tried 2 different sets of code to gray-out the background, and have tweaked both for the past mmm, 5 or 6 hours as well as using Google poking around for a solution. Here's what I'm basically trying to accomplish Here's whats happening with the style (click the Sign up! button) Here's the current JS code (taken from here): function showPopUp(el) { var cvr = document.getElementById("cover") var dlg = document.getElementById(el) cvr.style.display = "block" dlg.style.display = "block" if(document.body.style.overflow = "hidden") { cvr.style.width = "100%" cvr.style.height = "100%" } } function closePopUp(el) { var cvr = document.getElementById("cover") var dlg = document.getElementById(el) cvr.style.display = "none" dlg.style.display = "none" document.body.style.overflowY = "scroll" } Then the link calling it: <a href="#" onclick="showPopUp('dialog');">(Sign up!)</a> The CSS for the cover (the gray-out) and the Popup: #cover { display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:gray; filter:alpha(Opacity=50); opacity:0.5; -moz-opacity:0.5; -khtml-opacity:0.5; z-index:99; } #dialog { display:none; left:200px; top:200px; width:300px; height:300px; position:absolute; z-index:100; background:white; padding:2px; font:10pt tahoma; border:1px solid gray; } The full CSS (yeah, it's an open source design, pretty sweet one I might add): /* LEGAL ===== Copyright: Daemon Pty Limited 2006, http://www.daemon.com.au Community: Mollio http://www.mollio.org $ License: Released Under the "Common Public License 1.0", http://www.opensource.org/licenses/cpl.php License: Released Under the "Creative Commons License", http://creativecommons.org/licenses/by/2.5/ License: Released Under the "GNU Creative Commons License", http://creativecommons.org/licenses/GPL/2.0/ */ /* THE BIG GUYS */ * {margin:0;padding:0} body {padding: 0 0 20px;background: #F3EFE7 url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif} /* LINKS */ a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer} a:link {color:#3D3127} a:visited {color:#999} a:hover,a:active {color:#817159} /* FORMS */ form {margin: 0 0 1.5em} input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0} fieldset {border: none} label {display:block;padding: 5px 0} label br {clear:left} textare {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0} /* FORMS - general classes */ input.f-submit {padding: 1px 3px;background:#645540;color:#fff;font-weight:bold;font-size:96%} /* FORMS - f-wrap-1 - simple form, headings on left, form elements on right */ form.f-wrap-1 {width:100%;padding: .5em 0;background: #F3EFE7;border-top: 1px solid #d7d7d7;position:relative;} form.f-wrap-1 fieldset {width:auto;margin: 0 1em} form.f-wrap-1 h3 {margin:0 0 .6em;font: bold 155% arial;color:#3D3127} form.f-wrap-1 label {clear:left;float:left;width:100%;border-top: 1px solid #fff} /* hide from IE mac \*/ form.f-wrap-1 label {float:none} /* end hiding from IE5 mac */ form.f-wrap-1 label input, form.f-wrap-1 label textarea, form.f-wrap-1 label select {width:15em;float:left;margin-left:10px} form.f-wrap-1 label b {float:left;width:8em;line-height: 1.7;display:block;position:relative;} form.f-wrap-1 label b .req {color:#c00;font-size:150%;font-weight:normal;position:absolute;top:-.1em;line-height:1;left:-.4em;width:.3em;height:.3em;} form.f-wrap-1 div.req {color:#666;font-size:96%;font-weight:normal;position:absolute;top:.4em;right:.4em;left:auto;width:13em;text-align:right;} form.f-wrap-1 div.req b {color:#c00;font-size:140%} form.f-wrap-1 label select {width: 15.5em} form.f-wrap-1 label textarea.f-comments {width: 20em} form.f-wrap-1 div.f-submit-wrap {padding: 5px 0 5px 8em} form.f-wrap-1 input.f-submit {margin: 0 0 0 10px} form.f-wrap-1 fieldset.f-checkbox-wrap, form.f-wrap-1 fieldset.f-radio-wrap {clear:left;float:left;width:32em;border:none;margin:0;padding-bottom:.7em} form.f-wrap-1 fieldset.f-checkbox-wrap b, form.f-wrap-1 fieldset.f-radio-wrap b {float:left;width:8em;line-height: 1.7;display:block;position:relative;padding-top:.3em;} form.f-wrap-1 fieldset.f-checkbox-wrap fieldset, form.f-wrap-1 fieldset.f-radio-wrap fieldset {float:left;width:13em;margin: 3px 0 0 10px} form.f-wrap-1 fieldset.f-checkbox-wrap label, form.f-wrap-1 fieldset.f-radio-wrap label {float:left;width:13em;border:none;margin:0;padding:2px 0;margin-right:-3px} form.f-wrap-1 label input.f-checkbox, form.f-wrap-1 label input.f-radio {width:auto;float:none;margin:0;padding:0} form.f-wrap-1 label span.errormsg {position:absolute;top:0;right:-10em;left:auto;display:block;width:16em;background: transparent url(images/errormsg_bg.gif) no-repeat 0 0;} form.f-wrap-1 label span.errormsg b {padding: 10px 0;margin: 0 10px 0 30px;color:#B30800;font-weight:bold;display:block;width:auto;float:none;line-height:1.3} /* TYPOGRAPHY */ p, ul, ol {margin: 0 0 1.5em; }/*z-index:2;*/ h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em;}/*z-index:2;*/ h1 {font-size: 196%;margin-top:.6em;} h2 {font-size: 136%} h3 {font-size: 126%} h4 {font-size: 116%} h5 {font-size: 106%} h6 {font-size: 96%} .highlight {color:#E17000} .subdued {color:#999} .error {color:#c00;font-weight:bold} .success {color:#390;font-weight:bold} .caption {color:#999;font-size:11px} .date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px} small {font-size:11px} /* LISTS */ ul {margin: .3em 0 1.5em 0;list-style-type:none} ul.related {margin-top: -1em} ol {margin: .5em .5em 1.5em} ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal} li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0} li.doc {background-position: 3px -500px;} ul.nomarker li {background:none;padding-left:0} dl {margin: 0 0 1em 0} dt {font-weight:bold;margin-top: 1.3em} dl dl {margin: 0 0 1.5em 30px} /* GENERAL */ img {border:none} hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both} .clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px;} /* LAYOUT - HEADER */ #header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px} #header #site-name {font: 300% arial;letter-spacing: -.05em;margin:0 0 0 0px;padding:0px 0;color:#FFFFFF;border:none} /* added the 2 lines below */ #header #site-name-small1 {font: 125% arial; letter-spacing: -.05em;margin:0 0 0 0px;padding:0px 0;color:#FFFFFF;border:none} #header #site-name-small2 {font: 150% arial; letter-spacing: -.05em;margin:0 0 0 40px;padding:0px 0;color:#FFFFFF;border:none} /* NAV - top horizontal nav */ #nav, #nav ul {padding: 0;margin: 0;list-style: none;z-index:1;} #nav {;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px} #nav li {position:relative;background: #645540;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #342B20;border-right: 3px solid #000000;padding:0;} #nav a, #nav a:link, #nav a:visited, #nav a:active {text-decoration:none;cursor:pointer;color:#FFF;display: block;padding: 4px 10px 2px} #nav a:hover {color:#FFF;font-weight:bold;} #nav li ul {border:none;background: #FFF url("images/featurebox2_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em;} #nav li:hover ul, #nav li.sfhover ul {left: 0; background-position: 0 0; min-height:0;} #nav li li {background: #645540;border-bottom: 2px solid #000000;padding-left:0; }/*A49377*/ #nav li li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff} #nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {padding: 3px 10px 2px;width:14em} #nav li li.last {border-bottom:none} #nav li.active {background: #A49377;border-bottom: 3px solid #645540;} #nav li.active ul {border:none;background: #FFF url("images/featurebox2_bg.gif") no-repeat 100% 100%} #nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {} #nav li.active a:hover {color:#000} #nav li.active li {border:none;border-top: 1px solid #000;border-bottom: 1px solid #000} /*c15c5c*/ #nav li.active li.last {border-bottom: none} #nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff} #nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff} #nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%} /* hide from IE mac \*/ #nav li {width:auto} /* end hiding from IE5 mac */ /* SEARCH */ #search {color:#fff;font-weight:bold;position:absolute;top:10px;right:110px;left:auto;width:18em;} #search form {margin:0} #search input {width:8em;margin: 0 0 -1px;height:1.2em} #search label {padding:5px 0 0;display:inline} #search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em} /* wagonwheel */ #poweredby {width:59px;height:63px;position:absolute;top:-150px;right:0;} /* LAYOUT - main body of page */ #wrap {min-width:770px;max-width:1200px;margin: 0 auto;position:relative;} #content-wrap {position:relative;width:100%;} #utility {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px;} #sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px;} #content {position:relative;margin: 0 25px;} #content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold} #content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none} #content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline} .featurebox {color:#333;padding: 15px 20px 20px;border-top: 1px solid #d7d7d7;margin: 0 0 1.5em;} .featurebox p, .featurebox h1, .featurebox h2, .featurebox h3, .featurebox h4, .featurebox h5, .featurebox h6 {margin: 0 0 .3em;border-bottom: 1px solid #000;color:#000} .featurebox p {border:none;margin: 0 0 1em;color:#000} .featurebox a {font-weight:bold} .thumbnail {margin: 0 0 0 10px;position:relative;float:right;width:100px;padding:5px;background:#F3EFE7} .thumbnail img {border: 1px solid #F3EFE7} .pagination {background: #f2f2f2;color:#666;padding: 4px 2px 4px 7px;border: 1px solid #ddd;margin: 0 0 1.5em} .pagination p {position:relative;text-align:right;} .pagination p a:link, .pagination p a:visited, .pagination p a:hover, .pagination p a:active {text-decoration:none;background:#fff;padding:2px 5px;border: 1px solid #ccc} .pagination p a:hover {background:#342B20;color:#fff} .pagination p span {text-decoration:none;background:#fff;padding:2px 5px;border: 1px solid #ccc;color:#ccc} .pagination * {margin:0} .pagination h4 {margin-top:-1.45em;padding:0;border:none} #cover {display:none; position:absolute;left:0px; top:0px;width:100%;height:100%;background:gray;filter:alpha(Opacity=50);opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;z-index:99;} #dialog {display:none;left:200px;top:200px;width:300px;height:300px;position:absolute;z-index:100;background:white;padding:2px;font:10pt tahoma;border:1px solid gray;} #resultslist-wrap {margin: 0 0 1.5em;font-size:92%} #resultslist-wrap dt, #resultslist-wrap dl {margin: 0} #resultslist-wrap dt {font: bold 85% arial;padding: 3px 0} #resultslist-wrap li {padding: 0 0 1em;margin:0 0 0 1.2em;font: bold 145% arial} #resultslist-wrap li dd {font: normal 73% arial} #resultslist-wrap li dl {margin:0} #resultslist-wrap dd {line-height:1.3} #resultslist-wrap dd.filetype, #resultslist-wrap dd.date {color:#999;display:inline;padding-right:.5em} /* TABLES */ .table1 {border: 2px solid #000;border-collapse:collapse;width:100%} .table1 td {background: #fff url("images/sprites.gif") repeat-x 0 -1600px;padding:3px;border: 1px solid #ddd} .table1 th {text-align:left;border: 1px solid #ddd} .table1 thead th {color:#fff;font-size:145%;background: #900 url("images/sprites.gif") repeat-x 0 -1300px;padding: 10px 6px} .table1 tbody th {color:#fff;font-size:115%;background: #88b8db url("images/sprites.gif") repeat-x 0 -1400px;padding: 6px} .table1 tbody th.sub {font-size:100%;color:#000;background: #efefef url("images/sprites.gif") repeat-x 0 -1500px;padding: 6px} /* TABLES - calendar */ .calendar {width:200px;font-size:92%} .calendar td {text-align:center;border: 1px solid #ddd} .calendar th {text-align:center;border: 1px solid #ddd} .calendar thead th {padding: 3px 2px;border: 1px solid #ddd} .calendar tbody th {padding: 2px;border: 1px solid #ddd} .calendar tbody th.sub {padding: 2px;border: 1px solid #ddd} /* 'MORE' LINK - provides an accessible alternative to just using 'more' as a link at the end of paragraphs */ a.morelink:link, a.morelink:visited, a.morelink:hover, a.morelink:active {background: transparent url("images/sprites.gif") no-repeat 5px -500px;padding-left:21px} a.morelink:hover {background: transparent url("images/sprites.gif") 5px -400px} .morelink span {position:absolute;left:-9999px;width:900px;} /* CODE - formatting for code inserted into body - more here: http://dizque.lacalabaza.net/temp/lipt/ */ ol.code {font-family: monospace;position:relative;} ol.code li {color: #666;margin-bottom: 1px} ol.code code {color: #000;display: block} ol.code .cmt {color: #4077d2} li.tab0 code {padding-left: 4em} li.tab1 code {padding-left: 8em} li.tab2 code {padding-left: 12em} li.tab3 code {padding-left: 16em} li.tab4 code {padding-left: 20em} li.tab5 code {padding-left: 24em} ol.code li {background: #f3f3f3 url("images/td_bg.gif") no-repeat 100% 100%} p.note {margin: 1em;border: 1px solid #ddd;background: #f0f0f0;padding: 1em} /* LAYOUT TYPE E */ #type-e #content-wrap {background: transparent url("images/content_wrap_e_bg.gif") repeat-y 100% 0} #type-e #utility {position:absolute;top:0;left:auto;right:25px;width:165px;border-top: 5px solid #999; } #type-e #content {margin: 0 243px 0 50px} /* SECONDARY NAVIGATION - vertical navigation */ #nav-secondary, #nav-secondary ul {position:static;} #nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#F3EFE7} #nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px} #nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #F3EFE7 url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block} #nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} #nav-secondary a:link {color:#000} #nav-secondary a:visited {color:#000} #nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} #nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} #nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc} /* SECONDARY NAVIGATION - 2nd TIER */ #nav-secondary ul {margin: 0 0 1em 23px;padding:0} #nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block} #nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00} #nav-secondary li.active li {border: none;margin:0} #nav-secondary li.active li.active a:link, #nav-secondary li.active li.active a:visited, #nav-secondary li.active li.active a:hover, #nav-secondary li.active li.active a:active {font-weight:bold} /* SECONDARY NAVIGATION - middle */ #nav-secondary ul {margin: 0 0 1em 23px;padding:0} #nav-secondary li.na li a, #nav-secondary li.na li a:link, #nav-secondary li.na li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block} #nav-secondary li.na li a:hover, #nav-secondary li.na li a:active {color: #c00} #nav-secondary li.na li {border: none;margin:0} #nav-secondary li.na li.na a:link, #nav-secondary li.na li.na a:visited, #nav-secondary li.na li.na a:hover #nav-secondary li.na li.na a:active {font-weight:normal} /* SECONDARY NAVIGATION - 3rd TIER */ #nav-secondary ul ul {margin: 0 0 1em 13px;padding:0} #nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px} #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited, #nav-secondary li.active li.active li a:hover, #nav-secondary li.active li.active li a:active {font-weight:normal} #nav-secondary li.active li.active li.active a:link, #nav-secondary li.active li.active li.active a:visited, #nav-secondary li.active li.active li.active a:hover, #nav-secondary li.active li.active li.active a:active {font-weight:bold} /* SECONDARY NAVIGATION - 4th TIER */ #nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0} #nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px} #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited, #nav-secondary li.active li.active li.active li a:hover, #nav-secondary li.active li.active li.active li a:active {font-weight:normal} #nav-secondary li.active li.active li.active li.active a:link, #nav-secondary li.active li.active li.active li.active a:visited, #nav-secondary li.active li.active li.active li.active a:hover, #nav-secondary li.active li.active li.active li.active a:active {font-weight:bold} /* LAYOUT - FOOTER */ #footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999} #footer p {margin:0} #footer a:link {color:#999} Any ideas on where the Z-Index needs to be placed for IE to see it okay?

Haha, that's fitting.

I think there is a little too much spacing between the lines of text.

Speaking of "developer" :P, the 'web developer' toolbar for firefox rocks! [url=http://chrispederick.com/work/webdeveloper/](link)[/url] That really sells me on FF, because i haven't seen anything like it on IE yet.

You have too many images that you don't need. They could be made text, and then use that amount of bandwidth to add something to the site, to invite us in. Your logo can be just text, not an image. Same with the menu buttons - just make the background an image that changes and then have the font above it. Under Login/Pro Search, why do you have a background image? Why not make it a color, instead of having the user download another image to use?

mysql query: ALTER TABLE `tablename` MODIFY `password` varchar (255); should work

Try reading up on this: http://www.databasejournal.com/features/mysql/article.php/3300511

1.3MB of images, thats too much. The sounds are really, [i]really[/i], [b]really[/b] annoying. I also feel like you tried to cram as many photos in as possible, giving it a busy feel to it. Try using more text! I'm looking at your source, and it doesn't seem like you actually coded the template. Reasoning: <!-- PUT YOUR CONTENT BETWEEN HERE --> .... And your CSS is all over the place. You have clips of it everywhere. Try putting it all in one spot

http://jerryc.tw/ is his site... You can download the mp3 version there

Why does photo #37 look familiar? Thats just creepy.

http://bluga.net/projects/uploadProgressMeter/ I haven't actually installed it before, but it works pretty decent from what I've heard.

Yeah, red brings up a good point, you're page (with all the images on it) is 467 kb, which is HUGE!

Good :) I do like the images =D