Hi, I need some help getting an image stretched, i think i've tried everything and nothing seems to be working. If someone can help me, i can give a copy of the script to whoever can. pm for more details. Thanks, Chris
Hi, No, if you goto www.apple.freebietastic.com you can see the first green bar stretches across the screen, but i also want the steps bar (the green bar at the bottom) to stretch so it's 100% width. Now i've tried everything i can think of but nothing seems to be working. Chris
what do you mean, i've tried everything i can think of. I can post the contents of the index.tpl file and the css if it would make things easier. Chris
What he meant was doing something like: <img src="image.gif" width="999px"> And insert the width you want the image to be. The browser will stretch it to exactly that width.
yes i've tried that and it does'nt work because it is'nt that image i want stretching, i made a background image of the green steps bar which is 1px width and 118px height and i've tried to stretch that and it wont work. I can post my coding here because i think i'm only missing a little thing, or i can send the files via email. Chris
Ah, you are replacing http://www.apple.freebietastic.com/images/m_3.gif with an actual background image and will have actual text sitting on top? Very good. The problem was that you kept saying "stretching" which you can do by using the above method (width="999") however, what you are really looking for is "repeating". So let's assume your new 1px-wide image has the same name... m_3.gif Whatever the image will sit in (this m_3.gif will be a BACKGROUND image!), let's call it div id="steps"... #steps { width: 100%; background: url(images/m_3.gif) 0 0 repeat-x; other stuff... } There you go : ) You cannot repeat an HTML image, only a CSS background image.
Css code body { background: #fff; margin: 10px 0 0 0; text-align: center; font-family: arial; font-size: 11px; text-align: center; /* color: #999999; background-image: url(/images/bg.jpg); */ } #container { text-align: left; margin: 0px auto; width: 100%; padding: 0px; display:block; } #offers_container { text-align: center; margin: 0 auto; width: 749px; height:749px auto; border: 0px solid #E5E5E5; padding: 0px; /* background-image: url(/images/bg.gif); background-repeat:no-repeat; */ } #bg_footer { text-align: center; margin: 0 auto; width: 749px; height:129px; border: 1px solid #E5E5E5; padding: 0px; background-image: url(/images/bg_footer.gif); background-repeat:no-repeat; } #h_container { text-align: left; margin: 0 auto; width: 749px; border: 1px solid #E5E5E5; padding: 0px; background: #ffffff; } #container2 { width: 749px; } #stuff { width: 637px; float: right; background-image: url(/images/m_2.gif); background-repeat:no-repeat; } #m_2 { width: 367px; height:136px; float: right; background-image: url(/images/m_2.gif); } #m_1 { width: 153px; height:135px; float: left; background-image: url(/images/m_1.gif); } #faq { width: 28%; float: left; } #reward { float: left; text-align: center; font-family: arial; font-size: 11px; color: #999999; width: 205px; height: auto; line-height: 150%; margin-right: 79px; margin-bottom: 10px; } #status { float: right; font-family: arial; font-size: 11px; color: #999999; width: 422px; height: 160px; line-height: 190%; } #referral_container { font-family: arial; font-size: 11px; color: #999999; width: 700px; margin-top: 21px; } #referral { background-image: url(images/referralbg.jpg); background-repeat: no-repeat; text-align: center; height: 25px; padding-top: 5px; } #referrals_container { font-family: arial; font-size: 11px; color: #999999; width: 700px; margin-top: 10px; } #referrals { height: 25px; padding-top: 5px; margin-bottom: 16px; } #footer, #footer a{ color:#767676; font-family:Verdana, Arial; font-size:9px; font-weight:normal; } .footer2 { color:#767676; font-family:Verdana, Arial; font-size:9px; font-weight:normal; border-top: 0px solid #E5E5E5; } .footer3 { color:#C0C0C0; font-family:Verdana, Arial; font-size:10px; font-weight:normal; text-align: center; } .lightgreen { color: #95ce12; } .darkgreen { color: #77a40f; } .lightred { color: #ee4040; } a:link { color: #666666; text-decoration: none; } a:visited { text-decoration: none; color: #666666; } a:hover { text-decoration: none; color: #858585; } a:active { text-decoration: none; color: #666666; } #option { text-align: center; font-family: arial; font-size: 11px; color: #999999; float: left; width: 249px; } #option2 { text-align: center; font-family: arial; font-size: 11px; color: #999999; width: 241px; float: right; } #optionextend { width: 100%; text-align: center; } #steps2 { text-align: center; font-family: arial; font-size: 12px; color: #999999; } #signupstuff { height: 154px; } #signup { font-family: arial; font-size: 11px; color: #999999; width: 749px; height:114px; line-height: 170%; text-align: center; padding-top:10px; background: url(../images/m_4.gif); background-repeat:no-repeat; } #m_3 { width: 100%; background: url(images/m_3bg.gif) 0 0 repeat-x; } .signupbutton { color: #999999; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: 150px; background: url(../images/button.png) repeat-x; padding: 0px 5px; line-height: 18px !important; line-height: 16px; height: 26px !important; height: 24px; margin: 1px; } /* Text Boxes Start */ .signupbox { width: 150px; font-family: arial; font-size: 10px; margin-top: 6px; padding: 2px; } .loginbox { width: 150px; font-family: arial; font-size: 10px; } #memberslogin { background: #ffffff; color: #999999; font-family: arial; font-size: 11px; font-weight: bold; padding: 3px; margin: 5px; float: right; border: 1px solid #E5E5E5; } #remove_back { background: #ffffff; color: #999999; font-family: arial; font-size: 11px; font-weight: bold; padding: 3px; margin: 5px; float: left; border: 1px solid #E5E5E5; } #bar { border: 0px solid #bc1818; font-family: arial; font-size: 11px; text-align: center; padding: 0px; color: #999999; width: 749px; background: #fff; margin: 0 auto; margin-bottom: 0px; } #bar_2 { border: 0px solid #E5E5E5; padding: 0px; width: 749px; height: 13px; margin: 0 auto; margin-bottom: 0px; background: url(../images/h_2.gif); background-repeat:no-repeat; } #h_2 { width: 749px; height:13px; background: url(../images/h_2.gif); background-repeat:no-repeat; text-align:center; } #bar_3 { width: 100%; height:34px; background: url(../images/h_3.gif); background-repeat:repeat-x; text-align:center; } #login { padding-top:20px; text-align:center; } #main { border: 0px solid #E5E5E5; padding: 0px; width: 749px; height: 96px; margin: 0 auto; margin-bottom: 0px; background: url(../images/main.gif); background-repeat:no-repeat; } #box { font-family: arial; font-size: 11px; text-align: center; color: #bc1818; background-color:#FFFFFF; } .box { font-family: arial; font-size: 11px; background-color: #F0F6FB; /* text-align: center; color: #999999; border: 0px solid #e5e5e5; */ } #items { margin-top: 15px; border: 1px solid #ffffff; width:749px; } #front { margin-top: 20px; padding: 0; float: left; width: 100%; line-height: 160%; text-align: left; } #box_sign { background: #e5e5e5; color: #fff; font-family: arial; font-size: 12px; font-weight: normal; width: 100%; padding-left: 5px; margin-bottom: 6px; } #terms { padding: 10px; } Code (markup): Index.tpl Code <link href="css.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { margin-top: 0px; } --> </style> <div id="container"> <div id="bar_3"> <form action="login.php" method="post" name="form1" id="form1" style="position:relative; top:10px; " > <strong>LOGIN » Email: <input name="username" type="text" id="username" class="loginbox" /> Password: </strong> <input name="password" type="password" id="password" class="loginbox" /> <strong><a href="javascript:document.form1.submit()">OK</a></strong> </form> </div> <div id="main"></div> <!-- Begin_switch_logged_out --> <div id="stuff"> <div id="front"> <center> <table> {ITEMS_TABLE} </table> </center> </td> </div> <br> <br> <br> </div> <div id="m_1"></div> <div id="m_3"> <img src="/images/m_3.gif"></div> <!-- End_switch_logged_out --> <div id="signup"> <FORM action="register.php" method="get" name="singup" id="singup"> <strong>Email: </strong><input type="text" class="signupbox" name="email"> <input type=hidden value="{REFERRAL}" name=referral> <a href="javascript:check_terms()"> <img src="images/b_ok.gif" border="0" style="position:relative; top:5px" /> </a> <br/> {REFERRAL_EMAIL} <br/> <input type="checkbox" name="agreetoterms" id="agreetoterms" >I agree to the <a href="http://incentives.pluskit.biz/terms.php" onclick="javascript:window.open('terms.php','','width=860,height=600,scrollbars');">terms and conditions</a>.<br/> <!-- <input type="submit" class="signupbutton" value="Sign Up" name="submit" disabled><br/><br/> --> </form> </div> <!-- Begin_switch_logged_in --> <div id="box"> Welcome back to <strong>{SITE_TITLE}</strong>, <strong>{USERNAME}!</strong><br/> Below you can see your status for your free <strong>{PRODUCT}</strong>. </div> <div id="box"> {USER_COMPLETED_OFFER} </div> <div id="box"> <center> Referrals:<hr>{REFERRALS} </center> </div> <!-- End_switch_logged_in --> </div> </div> Code (markup):
I found the div with Aardvark and tried to right-click to View the Background Image. Recieved this: Not Found The requested URL /templates/images/m_3bg.gif was not found on this server. Otherwise you would be getting a background image. Change the path.
Your page looks okay in IE7 but it is a total mess in FF. I am not even sure how you want it to look to give you any advice, but you should really take a look at it with Firefox
You could have changed the path instead, but it doesn't matter, you've got it showing properly now. I never looked at this page in IE, I assumed it looked all messed up because it was a work in progress. The reason the image isn't showing on the left side is that floated m1 thingie majiggy is covering it. It must have a background colour of white?. Not sure what it's doing there as it's completely empty, but the background on it needs to be transparent (remove background colour on it)-- though I'd remove it. Then you need to push it down. You could use top margins to push it down, or a bottom margin on the thing above. If you're using the left and right floated thingies to center the middle part, the middle part should be a block (which a form is anyway) and centered the usual way, margin: 0 auto; but I dunno that that is their function. I'll look in IE to see what's different. *Edit wow, it looks very nice in IE. Everything's lined up and you can't see those two side floats at all!
Hey, I found your problem. Well, first, paths were a bit messed (but it seemed to work in your case.. ). Second, I added clear: all; after the m_1 block, which fixed it all mostly. So, that was the float problem. I will post you both html and css code.. and you check the difference, so you see it for yourself. Sorry but this is gonna be big CSS body { background: #fff; margin: 10px 0 0 0; text-align: center; font-family: arial; font-size: 11px; text-align: center; /* color: #999999; background-image: url(../images/bg.jpg); */ } .clear { clear: both; } #container { text-align: left; margin: 0px auto; width: 100%; padding: 0px; display:block; } #offers_container { text-align: center; margin: 0 auto; width: 749px; height:749px auto; border: 0px solid #E5E5E5; padding: 0px; /* background-image: url(../images/bg.gif); background-repeat:no-repeat; */ } #bg_footer { text-align: center; margin: 0 auto; width: 749px; height:129px; border: 1px solid #E5E5E5; padding: 0px; background-image: url(../images/bg_footer.gif); background-repeat:no-repeat; } #h_container { text-align: left; margin: 0 auto; width: 749px; border: 1px solid #E5E5E5; padding: 0px; background: #ffffff; } #container2 { width: 749px; } #stuff { width: 637px; float: right; background-image: url(../images/m_2.gif); background-repeat:no-repeat; } #m_2 { width: 367px; height:136px; float: right; background-image: url(../images/m_2.gif); } #m_1 { width: 153px; height: 135px; float: left; background-image: url(../images/m_1.gif); } #faq { width: 28%; float: left; } #reward { float: left; text-align: center; font-family: arial; font-size: 11px; color: #999999; width: 205px; height: auto; line-height: 150%; margin-right: 79px; margin-bottom: 10px; } #status { float: right; font-family: arial; font-size: 11px; color: #999999; width: 422px; height: 160px; line-height: 190%; } #referral_container { font-family: arial; font-size: 11px; color: #999999; width: 700px; margin-top: 21px; } #referral { background-image: url(../images/referralbg.jpg); background-repeat: no-repeat; text-align: center; height: 25px; padding-top: 5px; } #referrals_container { font-family: arial; font-size: 11px; color: #999999; width: 700px; margin-top: 10px; } #referrals { height: 25px; padding-top: 5px; margin-bottom: 16px; } #footer, #footer a{ color:#767676; font-family:Verdana, Arial; font-size:9px; font-weight:normal; } .footer2 { color:#767676; font-family:Verdana, Arial; font-size:9px; font-weight:normal; border-top: 0px solid #E5E5E5; } .footer3 { color:#C0C0C0; font-family:Verdana, Arial; font-size:10px; font-weight:normal; text-align: center; } .lightgreen { color: #95ce12; } .darkgreen { color: #77a40f; } .lightred { color: #ee4040; } a:link { color: #666666; text-decoration: none; } a:visited { text-decoration: none; color: #666666; } a:hover { text-decoration: none; color: #858585; } a:active { text-decoration: none; color: #666666; } #option { text-align: center; font-family: arial; font-size: 11px; color: #999999; float: left; width: 249px; } #option2 { text-align: center; font-family: arial; font-size: 11px; color: #999999; width: 241px; float: right; } #optionextend { width: 100%; text-align: center; } #steps2 { text-align: center; font-family: arial; font-size: 12px; color: #999999; } #signupstuff { height: 154px; } #signup { font-family: arial; font-size: 11px; color: #999999; width: 749px; height:114px; line-height: 170%; text-align: center; padding-top:10px; background: url(../images/m_4.gif); background-repeat:no-repeat; } #m_3 { width: 100%; background: url(../images/m_3bg.gif) 0 0 repeat-x; } .signupbutton { color: #999999; font-family: Arial, Hevlvetica, sans-serif; text-align: center; font-size: 11px; font-weight: bold; border: 3px double #cccccc; width: 150px; background: url(../images/button.png) repeat-x; padding: 0px 5px; line-height: 18px !important; line-height: 16px; height: 26px !important; height: 24px; margin: 1px; } /* Text Boxes Start */ .signupbox { width: 150px; font-family: arial; font-size: 10px; margin-top: 6px; padding: 2px; } .loginbox { width: 150px; font-family: arial; font-size: 10px; } #memberslogin { background: #ffffff; color: #999999; font-family: arial; font-size: 11px; font-weight: bold; padding: 3px; margin: 5px; float: right; border: 1px solid #E5E5E5; } #remove_back { background: #ffffff; color: #999999; font-family: arial; font-size: 11px; font-weight: bold; padding: 3px; margin: 5px; float: left; border: 1px solid #E5E5E5; } #bar { border: 0px solid #bc1818; font-family: arial; font-size: 11px; text-align: center; padding: 0px; color: #999999; width: 749px; background: #fff; margin: 0 auto; margin-bottom: 0px; } #bar_2 { border: 0px solid #E5E5E5; padding: 0px; width: 749px; height: 13px; margin: 0 auto; margin-bottom: 0px; background: url(../images/h_2.gif); background-repeat:no-repeat; } #h_2 { width: 749px; height:13px; background: url(../images/h_2.gif); background-repeat:no-repeat; text-align:center; } #bar_3 { width: 100%; height:34px; background: url(../images/h_3.gif); background-repeat:repeat-x; text-align:center; } #login { padding-top:20px; text-align:center; } #main { border: 0px solid #E5E5E5; padding: 0px; width: 749px; height: 96px; margin: 0 auto; margin-bottom: 0px; background: url(../images/main.gif); background-repeat:no-repeat; } #box { font-family: arial; font-size: 11px; text-align: center; color: #bc1818; background-color:#FFFFFF; } .box { font-family: arial; font-size: 11px; background-color: #F0F6FB; /* text-align: center; color: #999999; border: 0px solid #e5e5e5; */ } #items { margin-top: 15px; border: 1px solid #ffffff; width:749px; } #front { margin-top: 20px; padding: 0; float: left; width: 100%; line-height: 160%; text-align: left; } #box_sign { background: #e5e5e5; color: #fff; font-family: arial; font-size: 12px; font-weight: normal; width: 100%; padding-left: 5px; margin-bottom: 6px; } #terms { padding: 10px; } HTML:
HTML <!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> <title>Apple.FreebieTastic.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="templates/css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function check_terms() { if (!document.getElementById('agreetoterms').checked) {alert('You must accept the Terms and Conditions to sign up!'); } else {document.getElementById('singup').submit();} } function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; } } } var preloadFlag = false; function preloadImages() { if (document.images) { nav_03_over = newImage("images/nav_03-over.gif"); nav_04_over = newImage("images/nav_04-over.gif"); nav_05_over = newImage("images/nav_05-over.gif"); preloadFlag = true; } } </script> <!-- End Preload Script --> <script type="text/javascript"> function openInter(type){ if (document.getElementById) if(type=='on') document.getElementById("idd").style.visibility="visible"; else document.getElementById("idd").style.visibility="hidden"; return false; } function showElements(show,names) { if (show) show = ''; else show = 'none'; var e; for (var i = 1; i < arguments.length; i++) { e = document.getElementById(arguments[i]); if (e) e.style.display = show; } } function changeOffer(myvalue){ if (myvalue==0){showElements(true,'other','other2');}else{showElements(false,'other','other2');} } function changeGift(myvalue){ var myvalue2 = myvalue - 1; document.itemform.item[myvalue2].checked = true; } var checkobj function agreesubmit(el) { checkobj=el if (document.all||document.getElementById){ for (i=0;i<checkobj.form.length;i++){ var tempobj=checkobj.form.elements[i] if(tempobj.type.toLowerCase()=="submit") tempobj.disabled=!checkobj.checked } } } function ClipBoard() { holdtext.innerText = copytext.innerText; Copied = holdtext.createTextRange(); Copied.execCommand("Copy"); } </script> <style type="text/css"> <!-- body { margin-top: 0px; } --> </style></head> <body onLoad="preloadImages();"> <style> div#idd table#outr {width: 100%} .h_container div#idd {text-align: right;} /*.h_container div#idd table#outr {width: 750px;} */ </style> <table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/nav_bg.gif"> <tr> <td height="23"> <a href="http://www.pluskit.biz/"> <img src="images/nav_01.gif" width="162" height="23" border="0" alt="" align="left"></a> <a href="http://www.pluskit.biz/" onmouseover="changeImages('nav_03', 'images/nav_03-over.gif'); return true;" onmouseout="changeImages('nav_03', 'images/nav_03.gif'); return true;" onmousedown="changeImages('nav_03', 'images/nav_03-over.gif'); return true;" onmouseup="changeImages('nav_03', 'images/nav_03-over.gif'); return true;"> <img name="nav_03" src="images/nav_03.gif" width="96" height="23" border="0" alt=""></a> <a href="http://www.pluskit.biz/" onmouseover="changeImages('nav_04', 'images/nav_04-over.gif'); return true;" onmouseout="changeImages('nav_04', 'images/nav_04.gif'); return true;" onmousedown="changeImages('nav_04', 'images/nav_04-over.gif'); return true;" onmouseup="changeImages('nav_04', 'images/nav_04-over.gif'); return true;"> <img name="nav_04" src="images/nav_04.gif" width="171" height="23" border="0" alt=""></a> <a href="http://www.pluskit.biz/" onmouseover="changeImages('nav_05', 'images/nav_05-over.gif'); return true;" onmouseout="changeImages('nav_05', 'images/nav_05.gif'); return true;" onmousedown="changeImages('nav_05', 'images/nav_05-over.gif'); return true;" onmouseup="changeImages('nav_05', 'images/nav_05-over.gif'); return true;"> <img name="nav_05" src="images/nav_05.gif" width="102" height="23" border="0" alt=""></a> </td> </tr> </table> <br /> <div id="h_container"> <div id="bar"><img src="images/header.gif" /></div> </div> </div> <link href="css.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { margin-top: 0px; } --> </style> <div id="container"> <div id="bar_3"> <form action="login.php" method="post" name="form1" id="form1" style="position:relative; top:10px; " > <strong>LOGIN » Email: <input name="username" type="text" id="username" class="loginbox" /> Password: </strong> <input name="password" type="password" id="password" class="loginbox" /> <strong><a href="javascript:document.form1.submit()">OK</a></strong> </form> </div> <div id="main"></div> <div id="stuff"> <div id="front"> <center> </center> </div> </div> <div id="m_1"></div> <div class="clear"></div> <div id="m_3"> <img src="images/m_3.gif"></div> <div id="signup"> <FORM action="register.php" method="get" name="singup" id="singup"> <strong>Email: </strong><input type="text" class="signupbox" name="email"> <input type=hidden value="0" name=referral> <a href="javascript:check_terms()"> <img src="images/b_ok.gif" border="0" style="position:relative; top:5px" /> </a> <br/> <br/> <input type="checkbox" name="agreetoterms" id="agreetoterms" >I agree to the <a href="http://incentives.pluskit.biz/terms.php" onclick="javascript:window.open('terms.php','','width=860,height=600,scrollbars');">terms and conditions</a>.<br/> <!-- <input type="submit" class="signupbutton" value="Sign Up" name="submit" disabled><br/><br/> --> </form> </div> </div> </div> <div id="footer"> <table align="center" width="800" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" class="footer2"><div align="center"><a href="terms.php">Terms of Service</a> | <a href="privacy.php">Privacy Policy</a> | <a target="_blank" href="http://www.pluskit.biz">Contact</a><br /> © Copyright 2008 Apple.FreebieTastic.com. All rights reserved.<br> <br> </div></td> </tr> <tr> <!-- <td class="footer3">Apple.FreebieTastic.com is not directly affiliated with the manufacturer(s) of the products we give away. All trademarks, logos, and products found on this site are the property of their manufacturer, and Apple.FreebieTastic.com does, in no way, claim to represent or own any of those trademarks or rights. None of the companies that produce or manufacture the products listed on our sites own, endorse, or promote Apple.FreebieTastic.com or any of its websites.<br><br></td> --> </tr> </table> <A HREF="admin/"></A></div> <div id="tipDiv" style="position:absolute; visibility:hidden; z-index:90; text-align: left;"></div> <script language="javascript" type="text/javascript"> var dom = (document.getElementById) ? true : false; var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false; var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false; var ns4 = (document.layers && !dom) ? true : false; var ie4 = (document.all && !dom) ? true : false; var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false; // resize fix for ns4 var origWidth, origHeight; if (ns4) { origWidth = window.innerWidth; origHeight = window.innerHeight; window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); } } // avoid error of passing event object in older browsers if (nodyn) { event = "nope" } /////////////////////// CUSTOMIZE HERE //////////////////// // settings for tooltip // Do you want tip to move when mouse moves over link? var tipFollowMouse= false; // Be sure to set tipWidth wide enough for widest image var tipWidth= 360; var offX= 1; // how far from mouse to show tip var offY= 1; var tipFontFamily= "arial"; var tipFontSize= "8pt"; // set default text color and background color for tooltip here // individual tooltips can have their own (set in messages arrays) // but don't have to var tipFontColor= "#999999"; var tipBgColor= "white"; var tipBorderColor= "#e5e5e5"; var tipBorderWidth= 1; var tipBorderStyle= "solid"; var tipPadding= 2; // tooltip content goes here (image, description, optional bgColor, optional textcolor) var messages = new Array(); // multi-dimensional arrays containing: // image and text for tooltip // optional: bgColor and color to be sent to tooltip messages[0] = new Array('images/spacer.gif','placeholder',"#FFFFFF"); //////////////////// END OF CUSTOMIZATION AREA /////////////////// // preload images that are to appear in tooltip // from arrays above if (document.images) { var theImgs = new Array(); for (var i=0; i<messages.length; i++) { theImgs[i] = new Image(); theImgs[i].src = messages[i][0]; } } // to layout image and text, 2-row table, image centered in top cell // these go in var tip in doTooltip function // startStr goes before image, midStr goes between image and text var startStr = '<table width="' + tipWidth + '"><tr><td align="left" width="100%"><img src="'; var midStr = '" border="0"></td></tr><tr><td valign="top">'; var endStr = '</td></tr></table>'; //////////////////////////////////////////////////////////// // initTip - initialization for tooltip. // Global variables for tooltip. // Set styles for all but ns4. // Set up mousemove capture if tipFollowMouse set true. //////////////////////////////////////////////////////////// var tooltip, tipcss; function initTip() { if (nodyn) return; tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null; tipcss = (ns4)? document.tipDiv: tooltip.style; if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites tipcss.width = tipWidth+"px"; tipcss.fontFamily = tipFontFamily; tipcss.fontSize = tipFontSize; tipcss.color = tipFontColor; tipcss.backgroundColor = tipBgColor; tipcss.borderColor = tipBorderColor; tipcss.borderWidth = tipBorderWidth+"px"; tipcss.padding = tipPadding+"px"; tipcss.borderStyle = tipBorderStyle; } if (tooltip&&tipFollowMouse) { if (ns4) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = trackMouse; } } window.onload = initTip; ///////////////////////////////////////////////// // doTooltip function // Assembles content for tooltip and writes // it to tipDiv ///////////////////////////////////////////////// var t1,t2; // for setTimeouts var tipOn = false; // check if over tooltip link function doTooltip(evt,num) { if (!tooltip) return; if (t1) clearTimeout(t1); if (t2) clearTimeout(t2); tipOn = true; // set colors if included in messages array if (messages[num][2]) var curBgColor = messages[num][2]; else curBgColor = tipBgColor; if (messages[num][3]) var curFontColor = messages[num][3]; else curFontColor = tipFontColor; if (ns4) { var tip = '<table bgcolor="' + tipBorderColor + '" width="' + tipWidth + '" cellspacing="0" cellpadding="' + tipBorderWidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%" cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr + '</td></tr></table></td></tr></table>'; tooltip.write(tip); tooltip.close(); } else if (ie4||ie5||ns5) { var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr; tipcss.backgroundColor = curBgColor; tooltip.innerHTML = tip; } if (!tipFollowMouse) positionTip(evt); else t1=setTimeout("tipcss.visibility='visible'",100); } var mouseX, mouseY; function trackMouse(evt) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY; if (tipOn) positionTip(evt); } ///////////////////////////////////////////////////////////// // positionTip function // If tipFollowMouse set false, so trackMouse function // not being used, get position of mouseover event. // Calculations use mouseover event position, // offset amounts and tooltip width to position // tooltip within window. ///////////////////////////////////////////////////////////// function positionTip(evt) { if (!tipFollowMouse) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY; } // tooltip width and height var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth; var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight; // document area in view (subtract scrollbar width for ns) var winWd = (ns4||ns5)? window.innerWidth-20+window.pageXOffset: document.body.clientWidth; var winHt = (ns4||ns5)? window.innerHeight-20+window.pageYOffset: document.body.clientHeight; // check mouse position against tip and window dimensions // and position the tooltip if ((mouseX+offX+tpWd)>winWd) tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px"; else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px"; if ((mouseY+offY+tpHt)>winHt) tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px"; else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px"; if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100); } function hideTip() { if (!tooltip) return; t2=setTimeout("tipcss.visibility='hidden'",100); tipOn = false; } function trackMouse(evt) { mouseX = (ns4||ns5)? evt.pageX: window.event.clientX; mouseY = (ns4||ns5)? evt.pageY: window.event.clientY; if (tipOn) positionTip(evt); } //--> </script> </body> </html> HTML:
Oh, and next time, when you make a post, you should write something like - "My page looks good in IE but is messed up in FF, please help" - so we all know what to solve
Thanks for the help and it finally works now, if anyone wants a copy of the script please PM me. Thanks, Chris
I'm viewing with Firefox 2 at 1440x900 resolution and let me tell ya, the problems with IE7/FF rendering differently definitely aren't fixed. Unless of course it was your intention to have boxes and images randomly placed all over the place?