HTML code suddenly causing problems with page

  • 1
  • Question
  • Updated 3 years ago
  • Answered
For years I have been using the following code to create an information ticker on my index page.

<div align="center"><FONT face="georgia" color="#ffffff" size="+2">
<MARQUEE bgcolor="#31474B" direction="left" width="85%">
<STRONG>....'Enter text example here </STRONG>
</MARQUEE></FONT></div>

It always worked perfectly but suddenly it has caused the page to go crazy with ALL the content, photos and text and video etc moving across the page in a crazy fashion.  I had to delete the index page and re do it again.  I added a widget with the code again and although it looked perfectly fine in preview, it went crazy again when published.
Any help would be appreciated as I really liked using the moving text to add updates to my page.
Many thanks!!!!
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
  • confused

Posted 3 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Alexander,

The effect may be because of the deprecation of the <marquee> tag. 

You may like to research this as a solution: Marquee in the Age of HTML5 and CSS3
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Alexander,

The effect may be because of the deprecation of the <marquee> tag. 

You may like to research this as a solution: Marquee in the Age of HTML5 and CSS3
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
Thanks but I'm afraid I'm not at all literate in regard to writing HTMLbut if anyone out there could provide me with a script which would work in a similar manner to the one I used before, I'd be extremely grateful.  Anyway, many thanks Gop for your information. Cheers
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Alexander,

This is a CSS sheet for the marquee. 

You can try to add this to an HTML widget at the place you wish to display the scrolling teeext. Suggest that you try it on a test page first. I haven't styled the text or the background that the text will scroll in.

<style>
.myMarquee{
  width: 200px; height: 50px; white-space: nowrap;
  overflow: hidden;
  overflow-x:-webkit-marquee;
  -webkit-marquee-direction: forwards;
  -webkit-marquee-style: scroll;
  -webkit-marquee-speed: normal;
  -webkit-marquee-increment: small;
  -webkit-marquee-repetition: 5;
  overflow-x: marquee-line;
  marquee-direction: forward;
  marquee-style: scroll;
  marquee-speed: normal;
}
</style>

 <marquee class="myMarquee">
Your text here
    </marquee>
(Edited)
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
That works on a test page Gop, many thanks!  Will I still be able to change the background colour and font to be the same as the previous html I used?  If so where should it go.  Huge thanks for your help thus far!!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Glad it worked Alexander.

As far as the font and colours go:

  • Backround colour: I would place the code into a custom panel and select the background for that box.
  • Font: The font settings I am really unsure of now since the Style Designer seems to over-ride inline settings, especially in custom panels. I will ask Stefan for his advice on this issue so hopefully he will have time to review this thread. 
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi there!

You can definitely add a background color and font to the code that Gop shared. Here's the revised version:

<style>
.myMarquee{
width: 200px; height: 50px; white-space: nowrap;
overflow: hidden;
overflow-x:-webkit-marquee;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: small;
-webkit-marquee-repetition: 5;
overflow-x: marquee-line;
marquee-direction: forward;
marquee-style: scroll;
marquee-speed: normal;
background: #5dc4d3;
font-family: Comic Sans MS;
font-size: 15px;
}
</style>

<marquee class="myMarquee">
Your text here
</marquee>

You can add your own background color, font-family and font-size.

I hope that helps!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Correct, Gop! This will allow Alexander to add a background color to his marquee without needing to use a Custom Panel Widget.
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
Sorry for nor replying sooner Gop and Sanja....just one more thing is there anyway at all to change the actual font colour ?  Thank you so much for your help it's much appreciated!!
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
Hi.
Yes, you can change this by adding in the style section:
color:green;
(or whatever color you like)
I'd like to use this coding on my website, please. Is this ok?
(Edited)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Phil,

It's public domain so go ahead.
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
Thanks all for your help on this!