473,245 Members | 1,775 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,245 software developers and data experts.

Footer doesn't stay stationary on page with javascript ticker

HI all,

I have designed a site found at http://www.pickupnewspapers.co.uk/no...ire/index.html but I cant get the footer to sit stil on the page. It is because of the javascript ticker, everytime the ticker types the footer jumps up and down. Also the ticker does not work in firefox but does in IE7 (cant test in any others as dont have a computer with it on) . I am quite amateur to html and no nothing about javascript. I am aware there are validation errors but these are nearly all to do with javascript so mean nothing to me, the others are missing alt tags on images which I cant see being a problem to the footer. My css follows as I dont know how to upload this

Expand|Select|Wrap|Line Numbers
  1.  
  2. html {
  3.     list-style: none;
  4. }
  5. ul, li {
  6.     margin: 0;
  7.     padding: 0;
  8.     list-style: none;
  9. }
  10. body {
  11.     font: 10px tahoma, arial, sans-serif;
  12.     color: #000000;
  13.     margin:0;
  14.     padding:0;
  15.     text-align:center;
  16. }
  17. #wrapper {
  18.     width: 770px;
  19.     text-align: left;
  20.     margin: 0 auto;
  21.     margin-top:10px;
  22. }
  23. #clear
  24. {clear:both; height:20px;}
  25.  
  26. #content {height:100%;    
  27.     text-align:left;
  28.     margin:0 auto;
  29.     width:770px;
  30. }
  31. #footer {
  32.     color: #FFFFFF;
  33.     text-align:center;
  34.     background: #587A9B;
  35.     border-style:solid;
  36.     border-width:1px;
  37.     border-color:#000000;
  38.     font-weight: bold;
  39.     width: 770px;
  40.     display: block;
  41.     height: 20px;
  42.     margin: 0 auto;
  43.     padding:0 auto;
  44.     clear:both;
  45. }
  46.  
  47. a:link {
  48.     font-weight: bold;
  49.     text-decoration: none;
  50.     color: black;
  51. }
  52.  
  53. a:visited {
  54.     font-weight: bold;
  55.     text-decoration: none;
  56.     color:    #000000;}
  57.  
  58. a:hover {
  59.     text-decoration: underline;    
  60. }
  61.  
  62. form {
  63.     font: 10px tahoma, arial, sans-serif;
  64.     margin: 0;
  65.     padding: 0;
  66.     color: #000000;
  67.     }
  68.  
  69. h1.sub_link {
  70.     color:#FF0000;
  71.     font-size:20px;
  72.     font:trebuchet MS, sans-serif;    
  73. }
  74.  
  75. h2 {
  76.     font:11px tahoma, arial, sans-serif;
  77.     color:#000066;
  78.     font-weight:bold;
  79.     margin:2px 0px 2px 0px;
  80.  
  81. }
  82.  
  83. h2.band {
  84.     font:15px verdana, arial, sans-serif;
  85.     border:none;
  86.     font-variant:small-caps;
  87.     font-weight:bolder;
  88.     color:    #FF0000;
  89. }
  90.  
  91. h2.info {
  92.     font:13px Trebuchet MS, sans-serif;
  93.     border:none;
  94.     font-weight:bolder;
  95.     color:#000000;
  96. }
  97.  
  98. h3 {
  99.     font:15px tahoma, arial, sans-serif;
  100.     color:#000066;
  101.     font-weight:bold;
  102.     margin:0px;
  103.     padding:0px;
  104. }
  105.  
  106. h1.style1 {
  107.     font:410% "Times New Roman", Times, serif;
  108.     color:#000000;
  109.     font-weight:bold;
  110.     margin:0;
  111.     padding-bottom:5px;
  112.     text-align:center;
  113. }
  114.  
  115. h1.style2 {
  116.     font:200% "Times New Roman", Times, serif;
  117.     font-variant:small-caps;
  118.     color:#000000;
  119.     font-weight:bold;
  120.     margin:0px;
  121. }
  122.  
  123.  
  124.  
  125.  
  126. #header {
  127.     height: 75px;
  128.     background-image:url(images/header_bg.gif);
  129.     background-repeat:no-repeat;
  130.     background-position:right;
  131.     width:770px;    
  132.     border-width: 1px;
  133.     border-color: #587A9D;
  134.     border-style: solid;
  135. }
  136.  
  137.  
  138.  
  139. #logo {width:165px;
  140.     float:left;
  141.     height:67px;
  142.     margin:0px;
  143.     padding-top:3px;
  144. }
  145.  
  146. #media_player {width:260px;
  147.     height:67px;
  148.     float:left;
  149.     margin-top:1px;
  150.     padding-left:5px;
  151.     padding-top:3px;
  152.     margin-left:5px;
  153.     margin-right:3px;
  154.     border-width: 1px;
  155.     border-color: #587A9D;
  156.     border-style: solid;
  157. }
  158.  
  159. #deadline {width:325px;
  160.     float:left;
  161.     padding-left:1px;
  162.     padding-top:3px;
  163.     height:67px;
  164.     margin-top:1px;
  165.     border-width: 1px;
  166.     border-color: #587A9D;
  167.     border-style: solid;
  168. }
  169.  
  170.  
  171.  
  172. a.quick {font-size:11px;
  173. font-family:Arial;
  174. font-weight:bold;}
  175.  
  176. a.quick:hover {font-size:11px;
  177. font-family:Arial;
  178. font-weight:bold;
  179. color:#CC0000;}
  180.  
  181. a.quick:visited {font-size:11px;
  182. font-family:Arial;
  183. font-weight:bold;
  184. color:#FFF;}
  185.  
  186.  
  187. a.links2 {color:#FF0000;
  188. text-decoration:underline;
  189. }
  190.  
  191. a.media {color:#000000;
  192. text-decoration:none;
  193. }
  194.  
  195. a.prices {color:
  196. #0000CC;
  197. text-decoration:none;
  198. }
  199.  
  200. a.prices:hover {color:#FF0000;
  201. text-decoration:none;
  202. }
  203.  
  204. a.months:link {color:#000000;
  205. text-decoration:none;
  206. }
  207.  
  208. a.months:hover {color:#CC0000;
  209. }
  210.  
  211. a.months:visited {color:#000000;
  212. }
  213.  
  214. a.months:hover {color:#CC0000;
  215. }
  216.  
  217. .img_link {
  218.      border-style: none;
  219.      margin:0px;
  220.      padding:0px; 
  221. }
  222.  
  223. #footer p {
  224.     margin: 0;
  225.     padding: 0;
  226. }
  227.  
  228. #quick_links {
  229.     height: 140px;
  230.     width: 156px;
  231.     padding:5px 0px 5px 5px;
  232.  
  233. }
  234.  
  235.  
  236.  
  237. #left_bar {background-image:url(images/quick.png);
  238. background-repeat:no-repeat;
  239. height: 496px;
  240. width: 160px;
  241. float:left;
  242. }
  243.  
  244. #quick
  245. {padding:5px 0px 0px 20px;
  246. list-style:url(images/arrow.gif);
  247. margin:0;
  248. }
  249.  
  250. #quick li
  251. {
  252. margin-top:.2em;
  253. }
  254.  
  255. #main li
  256. {float:left;
  257. margin: 0 0 0 5px;
  258. }
  259.  
  260. #months li
  261. {float:left;
  262. margin: 3px 0 0 8px;
  263. }
  264.  
  265.  
  266.  
  267. #bottom_links {
  268. float:left;
  269. padding-left:5px;
  270. }
  271.  
  272. #survey {float:left;
  273. padding:5px;
  274. }
  275.  
  276. #weather {float:left;
  277. padding-left:2px;
  278. }
  279.  
  280. #subscribe {float:left;
  281. padding-left:4px;
  282. }
  283.  
  284.  
  285.  
  286. #html_marquee {background-color:ffffff;
  287. color:#000066;
  288. border-width:1;
  289. border-style:solid;
  290. border-color:red;
  291. font-size:22pt;
  292. float:right;
  293. margin:0px;
  294. width:620px;
  295. }
  296.  
  297. .indentmenu{
  298.  
  299. font: bold 9px Arial;
  300. background-position:center;
  301. width: 772px; 
  302. /*leave this value as is in most cases*/
  303. }
  304.  
  305. .indentmenu ul{
  306. margin: 0;
  307. padding: 0;
  308. float: left;
  309. width: 100%; /*width of menu*/
  310. border: 1px solid #564c66; /*dark purple border*/
  311. border-width: 1px 0px;
  312. background: black url(images/indentbg.gif) center center repeat-x;
  313. }
  314.  
  315. .indentmenu ul li{
  316. display: inline;
  317. padding-left:1px;
  318. }
  319.  
  320. .indentmenu ul li a{
  321. float: left;
  322. color: white; /*text color*/
  323. padding: 5px 12px;
  324. text-decoration: none;
  325. border-right: 1px solid #564c66; /*dark purple divider between menu items*/
  326. }
  327.  
  328. .indentmenu ul li a:visited{
  329. color: white;
  330. }
  331.  
  332. .indentmenu ul li a:hover, .indentmenu ul li .current{
  333. color: white !important; /*text color of selected and active item*/
  334. padding-top: 6px; /*shift text down 1px for selected and active item*/
  335. padding-bottom: 4px; /*shift text down 1px for selected and active item*/
  336.     background: black url(images/indentbg2.gif) center center repeat-x;
  337. }
  338.  
  339.  
  340. #news {
  341.     float:right;
  342.     width:600px;
  343.     height:489px;
  344.     margin-left:10px;
  345. }
  346.  
  347.  
  348.  
  349. #news1 {width:580px;
  350.     float:left;
  351. }
  352.  
  353. #n1_image {width:30%;
  354.     float:left;
  355. }
  356.  
  357. #n1_text {width:65%;
  358.     float:left;
  359.     padding-left:10px;
  360.     padding-bottom:10px;
  361.     text-align:justify;
  362. }
  363.  
  364. #news2 {width:394px;
  365.     height:100px;
  366.     margin-top:20px;
  367.     padding-left:10px;
  368.     float:left;
  369. }
  370.  
  371. #n2_image {width:30%;
  372.     float:left;
  373.     padding-left:10px;
  374. }
  375.  
  376. #n2_text {width:64%;
  377.     float:left;
  378.     padding-right:5px;
  379.     text-align:justify;
  380. }
  381.  
  382. #news3 {width:580px;
  383.     height:150px;
  384.     margin-top:30px;
  385.     float:left;
  386. }
  387.  
  388. #n3_image {width:35%;
  389.     float:right;
  390.     padding-left:18px;
  391.  
  392. }
  393.  
  394. #n3_text {width:60%;
  395.     float:left;
  396.     text-align:justify;
  397. }
  398.  
  399. #about_us {float:left;
  400.     width:600px;
  401.     height:489px;
  402.     margin-left:10px;
  403.     background-image:url(images/group.jpg);
  404.     background-repeat:no-repeat;
  405.     background-position:bottom;
  406.  
  407. }
  408.  
  409. #contacts {float:left;
  410.     width:600px;
  411.     height:489px;
  412.     margin-left:10px;
  413.     background-image:url(images/map.jpg);
  414.     background-repeat:no-repeat;
  415.     background-position:bottom;
  416. }
  417.  
  418. table.contacts { empty-cells:show; 
  419. }
  420.  
  421. TD.contacts   {  
  422.      font-size:9pt;
  423.      color:black;
  424.      font-family: Trebuchet MS;
  425.      font-weight:bold;
  426. }
  427.  
  428. #deadlines {float:left;
  429. width:600px;
  430. height:489px;
  431. margin-left:10px;
  432. background-image:url(images/clock.jpg);
  433.     background-repeat:no-repeat;
  434.     background-position:bottom;
  435. }
  436.  
  437. #deadline_bar {background-image:url(images/gradient_bar.gif);
  438. width:541px;
  439. height:20px;
  440. }
  441.  
  442. #deadline_bar2 {background-image:url(images/gradient_bar2.gif);
  443. width:541px;
  444. height:40px;
  445. }
  446.  
  447. h3.deadlines {padding-left:5px;}
  448.  
  449. #deadline_text {width:520px;
  450. height:50px;
  451. padding:10px;
  452.  
  453. }
  454.  
  455. #distribution {float:left;
  456. width:550px;
  457. height:489px;
  458. margin-left:10px;
  459.  
  460. }
  461.  
  462. #distribution_text {height:125px;
  463. width:520px;
  464. padding:10px;}
  465.  
  466. #locations {width:550px;
  467. height:500px;
  468. float:left;
  469. padding:10px;}
  470.  
  471. #tabs {width:166px;
  472. margin-top:15px;
  473. float:left;
  474. }
  475.  
  476. #tabs_bg {width:166px;
  477. height:400px;
  478. float:left;
  479. background-image:url(images/tabs.gif);
  480. }
  481.  
  482. #pricing{float:left;
  483. width:600px;
  484. height:489px;
  485. margin-left:10px;
  486.  
  487. }
  488.  
  489. #page_layouts {float:left;
  490. width:531px;
  491. height:400px;
  492. margin-left:10px;
  493.  
  494. }
  495.  
  496. #example {float:left;
  497. width:200px;}
  498.  
  499. #layouts {float:left;
  500. width:280px;
  501. padding-left:50px;}
  502.  
  503. #navigation {padding-left:20px;}
  504.  
  505. #navigation a {
  506. color: #000;
  507. background:  url(images/left-tab.gif) left top no-repeat;
  508. text-decoration: none;
  509. padding-left: 10px;
  510. height:20px;
  511. }
  512.  
  513. #navigation a span
  514. {
  515. background: url(images/right-tab.gif) right top no-repeat;
  516. padding-right: 10px;
  517. height:20px;
  518. }
  519.  
  520. #navigation a, #navigation a span
  521. {
  522. display: block;
  523. float: left
  524. }
  525.  
  526. /* Hide from IE5-Mac \*/
  527. #navigation a, #navigation a span
  528. {
  529. float: none
  530. }
  531. /* End hide */
  532.  
  533. #navigation a:hover
  534. {
  535. color: #fff;
  536. background: #6098B6 url(images/left-tab-hover.gif) left top no-repeat;
  537. padding-left: 10px
  538. }
  539.  
  540. #navigation a:hover span
  541. {
  542. background: url(images/right-tab-hover.gif) right top no-repeat;
  543. padding-right: 10px
  544. }
  545.  
  546. #navigation ul
  547. {
  548. list-style: none;
  549. padding: 0;
  550. margin: 0
  551. }
  552.  
  553. #navigation li
  554. {
  555. float: left;
  556. margin: 0;
  557.  
  558. #map {width:340px;
  559. height:342px;
  560. background-image:url(images/local_map.jpg);
  561. background-repeat:no-repeat;
  562. float:right;
  563. margin-left:25px;
  564. margin-top:35px;}
  565.  
  566. #myTicker {float:left;}
  567.  
  568. table.pricing {
  569.      font-size:9pt;
  570.      color:black;
  571.      font-family: Trebuchet MS;
  572.      font-weight:bold;
  573.      text-align:center;    
  574.   }
  575.  
  576. td.pricing {
  577.     cellpadding:2px;
  578.     }
  579.  
  580. #ticker {
  581.     width:750px;
  582.       height:30px;
  583.       float:left;
  584.   }
  585.  
  586.  
thanks to all :)
Mar 7 '08 #1
3 2044
drhowarddrfine
7,435 Expert 4TB
None of that means anything without the html.
Mar 7 '08 #2
i gave a link to the html as thats what i thought i was supposed to do?

i have attached a link to the files to download

thanks
Attached Files
File Type: txt style.txt (8.7 KB, 380 views)
File Type: txt index.txt (11.0 KB, 4051 views)
Mar 7 '08 #3
drhowarddrfine
7,435 Expert 4TB
I missed the link. That's all that's needed to help with this.
Mar 7 '08 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

82
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
4
by: Stian Lund | last post by:
Hi, I'm trying to create a 2 column layout with a footer on the bottom, where the (fixed-width) sidebar follows the content in the code, while showing on the left hand side of the content. The...
3
by: Dan | last post by:
Hi Does anyone know of a good Javascript typewriter ticker that allows you to insert HTML into the ticker. I have found lots but when HTML is inserted, the ticker pauses at the point it reaches...
0
by: Kiki | last post by:
Hello, i wonder if someone could please help me.. i've got a footer control and want to display it at the bottom of the page. Because it will be the same control used accross all pages i need to...
26
by: pamelafluente | last post by:
Hi , I have a DIV element in a page with a lot of other stuff (the page can scroll several times) absolutely positioned: <div id="MyDIV" <br<brFooter </div> Just after the page load, I...
13
by: Greg | last post by:
Most suggestions on this topic recommend to use a page footer and make it visible only on the last page. My problem is that the footer is half of the height of a page which means the detail would...
1
by: lisa232 | last post by:
Hi All, I am trying to position the footer div in my page to stay at the bottom of the screen when the content does not reach or exceed the height of the browser window. I am able to position it...
7
by: Big Moxy | last post by:
site - http://projects.zanalysts.com/hearingaids1000/default.aspx css - http://projects.zanalysts.com/hearingaids1000/css/styles.css js -...
7
by: =?Utf-8?B?U2hhcm9u?= | last post by:
Hello, I'm using the ToolTip control, but I want it to behave a bit different. I want the toolTip to popup not only once when the control is enter and the mouse is stationary. I want the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.