By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,091 Members | 1,546 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > footer doesn't stay stationary on page with javascript ticker
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,091 IT Pros & Developers. It's quick & easy.

Footer doesn't stay stationary on page with javascript ticker

P: 2
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.  
  559. #map {width:340px;
  560. height:342px;
  561. background-image:url(images/local_map.jpg);
  562. background-repeat:no-repeat;
  563. float:right;
  564. margin-left:25px;
  565. margin-top:35px;}
  566.  
  567. #myTicker {float:left;}
  568.  
  569. table.pricing {
  570.      font-size:9pt;
  571.      color:black;
  572.      font-family: Trebuchet MS;
  573.      font-weight:bold;
  574.      text-align:center;    
  575.   }
  576.  
  577. td.pricing {
  578.     cellpadding:2px;
  579.     }
  580.  
  581. #ticker {
  582.     width:750px;
  583.       height:30px;
  584.       float:left;
  585.   }
  586.  
  587.  
thanks to all :)
Mar 7 '08 #1
Share this Question
Share on Google+
3 Replies
drhowarddrfine
Expert 5K+
P: 7,435
None of that means anything without the html.
Mar 7 '08 #2
P: 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, 297 views)
File Type: txt index.txt (11.0 KB, 3084 views)
Mar 7 '08 #3
drhowarddrfine
Expert 5K+
P: 7,435
I missed the link. That's all that's needed to help with this.
Mar 7 '08 #4

Post your reply

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

Question stats

  • viewed: 1682
  • replies: 3
  • date asked: Mar 7 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates