Tom Davison

Hi, I've got this script in a fiddle, if you go to jsfiddle and append this to the URL /fRAiLtY/kcxf4/ you will be able to see it, which currently sets a cookie on your browser session, and casually counts up until the session resets. The client wants an amendment whereby the script counts up from midnight that day, i.e. 00:00:01 in the morning and if possible in random amounts. It's a "fake" points indicator that displays how many customer points have been earned that day, so having it increment in even steps is a little bit of a giveaway. If anyone can help it would be appreciated. Cheers.

Thanks, that's kinda the thing I'm after but I have very little knowledge of Javascript, I'm more of a CSS/HTML kinda guy. Can anyone explain how I'd work out the calculation? An example is: Cost Price: £100 <--- SLIDER HERE ---> Profit: £?? (slider value + cost price) Cheers.

Hi guys, I'm looking for a slider (scrollbar type) that calculates profit. I'm probably making this sound more complex than is it, basically imagine one slider (horizontal). Below it is some text, on the left hand side perhaps something called "Cost Price", on the right hand side "Profit". Then as you move the slider upwards it calculates the profit from the cost price depending on where the slider is. For example. The cost price is £100, and the resell price is set, on the slider, to £110, the profit then auto updates to £10 profit. As you move the slider obviously it's dynamic. I've been googling this for a couple of days now, the problem I've got is that google returns loads of Javascript image sliders and that's not what I want, I've tried "javascript calculation slider" but I just end up with Javascript calculators! Any pointers or help here would be great!! Cheers.

Thanks Helen, managed to suss why the tables weren't working, poor width classes on my part. Now works on all browsers so I'll attempt the DIV's at a later date. Thanks guys.

Yeah, I suppose, but can I set it to have a background colour where I've writted "product categories" and have a pixel border etc. I need to to look exactly the same as that, without tables if that's possible? Thanks.

Hello?

Anymore elaboration on my previous comment regarding how to replicate EXACTLY what I've got already just in a more browser friendly way? Cheers.

Firefox and other browsers remained the same (correct) but IE moved along slightly but not the full width. It's perhaps half the distance incorrect than what it was before, so an improvement but still not correct. Cheers

Right, ok an incorrect use of tables. I accept that. How else can I create exactly the same thing visually but without them? More DIV's within DIV's? Just seems a bit cluttered keep adding DIV's ontop of DIV's and the table thing wasn't a lot of code in reality, however if it's simply not going to work then I'll have to resolve! Would it be a case of making new DIV's with solid pixel borders and another DIV for the top bar with solid colour for the background? Seems like far more trouble than the tables (which consequently don't work I grant you) if what I'm thinking is right.

Hi guys, Got a small problem with table widths (I think). I've managed to finalise my design for the site. All the placeholder text is displaying in the right place and all the DIV's and images are working. Everythings great and I'm ready to slot it into Actinic, however... Safari, Firefox and Opera all display my website correctly. Internet Exploder, chooses to ditch the last inch of my content table. To see what I mean, go here: http://homepage.ntlworld.com/t0mbop/. If you open this in ANYTHING other than Internet Exploder it works a treat, with all the spacing matching up and so forth. In IE though, the second table (main content one) is much shorter with no obvious explanation? Obviously I've tried obvious solutions but it changes it in the other browsers too, so If I get it correct in IE it's incorrect in the others and looks hideous. Heres my code, I'm pretty sure it's something to do with the CSS or the Table, but the code is good I think. Any help appreciated. <html> <head> <title>Atlantis Aquatics</title> <style type="text/css" > body { background-color: #73c2ec; text-align:center; margin:auto; font-family:Arial, Helvetica, sans-serif; } #header { background: url(logo2.png) center; background-repeat:no-repeat; height: 180px; width: 950px; margin-right: auto; margin-left: auto; margin-top: 0px; } #main { background: url(background-main.png) center; background-repeat:repeat-y; background-position:top; width:950px; margin-right:auto; margin-left:auto; text-align:left; overflow:auto; } #searchbar { width:950px; height: 20px; margin-right:auto; margin-left:auto; margin-top:155px; text-align:center; float:left; } #nav { padding-left: 45px; padding-top: 15px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-align:left; width: 195px; float:left; } #content { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-align:left; padding-left: 17px; padding-top: 15px; float:left; width: 647px; } #footer { background: url(footer.png) center; background-repeat:no-repeat; background-position: top; height: 42px; width: 950px; margin-right: auto; margin-left: auto; } table.navigation { border-width: 1px; border-style: solid; border-color: #019cdf; border-collapse: collapse; background-color: white; width: 100%; } table.mainarea { border-width: 1px; border-style: solid; border-color: #019cdf; border-collapse: collapse; background-color: white; width: 100%; position:relative; } </style> </head> <body> <div id="header"> <div id="searchbar">in here goes searchy and navigational things </div> </div> <div id="main"> <div id="nav"> <table class="navigation" cellpadding="5"> <tr style="background-color: #019cdf;"> <td height="26" valign="center" style="font:Arial, Helvetica, sans-serif; color: #FFFFFF;">product categories</td> </tr> <tr > <td valign="top">main navigation</td> </tr> </table> </div> <div id="content"> <table class="mainarea" cellpadding="5"> <tr style="background-color: #019cdf;"> <td height="26" valign="center" style="font:Arial, Helvetica, sans-serif; color: #FFFFFF;">main content</td> </tr> <tr > <td valign="top">content main bits</td> </tr> </table> </div> </div> <div id="footer">footer and copyright stuff</div> </body> </html> Thanks

Thanks Zoli, managed to sort it dynamically with "overflow: auto;" on the #main DIV! Job's a good'en

Hi guys, first post so be gentle. I've a fair bit of experience with HTML and basic CSS, but never had much to do with DIV's until today. I'm coding a site for a friend and am struggling to get cross-browser compatibility and continuity when using nested DIV's. Here is where I currently am, for what I want Internet Explorer is displaying OK, I can work with that as I know my next step, but FireFox is displaying oddly. I've tried all sorts of other things to no avail. Please check http://homepage.ntlworld.com/t0mbop/ to see what I mean. The positioning of the word "kayligh" is meant to be there, but the background that is present in IE is NOT there in FireFox. You will need to open the link in both windows to see what I mean. I want the background to appear in both so I can continue to the next step! Here is my code so far: <html> <head> <title>Atlantis Aquatics</title> <style type="text/css" > body { background-color: #73c2ec; text-align:center; margin:auto; } #header { background: url(logo1.png) center; background-repeat:no-repeat; background-position: top; height: 181px; width: 950px; margin-right: auto; margin-left: auto; } #main { background: url(background-main.png) center; background-repeat:repeat-y; background-position:top; width:950px; margin-right:auto; margin-left:auto; text-align:left; } #nav { padding-left: 27px; padding-top: 15px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-align:left; width: 195px; float:left; } #content { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-align:left; float:left; } table.atlantis { border-width: 1px; border-style: solid; border-color: #019cdf; border-collapse: collapse; background-color: white; width: 100%; } </style> </head> <body> <div id="header"></div> <div id="main"> <div id="nav"> <table class="atlantis" cellpadding="5"> <tr style="background-color: #019cdf;"> <td height="26" valign="center" style="font:Arial, Helvetica, sans-serif; color: #FFFFFF;">product categories</td> </tr> <tr > <td valign="top">links here</td> </tr> </table> </div> <div id="content">kayligh </div> </div> </body> </html> logo1.png is the header, and background-main.png is a small slither of white with a drop shadow either side repeating to give the effect it does in IE, but it doesn't appear in FireFox. If I remove the "float" tags the div with "kayligh" in drops below the table div and the background displays in BOTH browsers. If I float the DIV's to get them side by side the background disappears in FireFox. Any help is appreciated! Tom.