Change HTML Marguee to CSS

HTML 5

My sample code

<font color=#FFFFFF>
<div data-speed="2000" data-direction="right" class='marquee'>
<%
if foundScroll = 1 then
dim scrollCount
scrollCount = 0

For r = LBound(arrScroll, 2) To UBound(arrScroll, 2)
          artistname=arrScroll(0, r)
response.write artistname &" | "
next
end if
%>
</div>


<font color=#0000FF>
<div data-speed="1000" data-direction="right" class='marquee'>
<%
if foundGenre = 1 then
   dim scrollCount2
   scrollCount2 = 0

For r = LBound(arrGenre, 2) To UBound(arrGenre, 2)
          genre=arrGenre(0, r)
response.write Genre &" | "
next
end if
%>
</div>


The above are two different marquees that scroll across my main page

Would like to convert this to css

would this work?


Thanks
LVL 23
Thomas GrassiSystems AdministratorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
No, CSS is not a programming language.  There is no 'if', 'for', or 'next' in CSS.
Michel PlungjanIT ExpertCommented:
Not completely true. CSS3 in WebKit should make it possible

http://html5advent2011.digitpaint.nl/14/
Thomas GrassiSystems AdministratorAuthor Commented:
Guys I just want to change the font and marguee  to Css

Thoughts

When I run this in debugger I am missing </font>
 But when I add it I get end tag mismatch

I use Microsoft essential web 4 to code with

And the font line has a warning msg
In html 5 the tag <font>  is not permitted

Even tho the site and this function works

I am trying to cleanup my pages

Thanks
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Thomas GrassiSystems AdministratorAuthor Commented:
Mike

the link is bad page cannot be found


Dave

Sorry I was unclear on my posting

Just need to convert this to css

<font color=#0000FF>
 <div data-speed="1000" data-direction="right" class='marquee'>

was just giving a sample of the entire code around this area.
Thomas GrassiSystems AdministratorAuthor Commented:
Guys

here is my code see attached

you can check it out at www.tomsmp3.com 

I use IE and F12 to debug  


Thanks
music.txt
Big MontyWeb Ninja at largeCommented:
do you already have a css class called marquee? if so, get rid of the FONT tag and add the color to the class:

.marquee {
    color=#FFFFFF;
    other declarations go here
}
Thomas GrassiSystems AdministratorAuthor Commented:
Josh

good one

I have a marquee.js


$(function(){
  $('.marquee').marquee();
});


change to

$(function(){
  $('.marquee').marquee();
   color=#FFFFFF;
});



Is that the place?



Ooops

I have two different Marguees

Changing that would make them all the same color

Any further thoughts?
Big MontyWeb Ninja at largeCommented:
no, that's jquery code. CSS is totally different. I suggest you take the time to go over the basics of CSS:

http://www.w3schools.com/css/
Dan McFaddenSystems EngineerCommented:
Thomas,

What everyone means, is that your HTML markup for the marquee thingy, should look like this:

In the style declaration in the header, add a '.marquee' declaration.  It should look like this:
	<style>
		body { background:url(images/ilm.jpg) repeat-x; } 
		a{color:#DC143C;float:right;margin-right:20px;}
		#bottomright{float:right;bottom:0;position:fixed;width:100%;}
		.marquee{color:#FFFFFF}
	</style>

Open in new window


The DIV with the class of 'marquee', should have the FONT tags removed
<div data-speed="2000" data-direction="right" class='marquee'>
Wynton Marsalis | XMAS | Xscape | YACHT | Yair Dalal | Yaki Da | Yardbirds | Yeah Yeah Yeahs | Yes | Yo La Tengo | Yo Majesty | Yo-Yo Ma | Young Gunz | Young Jeezy | Young MC | Young Rascals | Youngbloods | Yvonne Elliman | Zac Brown Band | Zager And Evans | 
</div>
<div data-speed="1000" data-direction="right" class='marquee'>
 | Alternative Dance | Alternative Hip-Hop | Alternative Metal | Alternative Rap | Alternative Rock | Big Band | Blue-Eyed Soul | Blues | Blues Rock | Classical | Comedy | Country Music | Dance | Dance Punk | Death Metal | Disco | Doo Wop | Easy Listening | Electronic | Electronic Dance | Electronic Rock | Electronica | EuroPop | Folk Rock | Funk | Gangsta | Hard Rock | Heavy Metal | Hip-Hop | Indie Pop | Indie Rock | Instrumental | Italo Disco | Jazz | Jazz Rock | Live Tronica | New Wave | Nu Metal | POP | Pop-Rock | Post-Rock | Progressive Rock | Psychedelic Pop | R-B | Raggae | Reggae | Rock | Rock-Roll | Soft Rock | Soul | Soundtrack | Southern Rock | Surf Rock | Synth Pop | Theme | Trip Hop | 
</div>

Open in new window


Dan
Thomas GrassiSystems AdministratorAuthor Commented:
Dan

Thanks

Removed the fonts added the style  but now the color is the same

www.tomsmp3.com

view source and you can see what I did

thoughts
Dan McFaddenSystems EngineerCommented:
Not a problem.  In the header style area, remove the ".marquee{color:#FFFFFF}"

<div data-speed="2000" data-direction="right" class="marquee" style="color=#FFFFFF">
Wynton Marsalis | XMAS | Xscape | YACHT | Yair Dalal | Yaki Da | Yardbirds | Yeah Yeah Yeahs | Yes | Yo La Tengo | Yo Majesty | Yo-Yo Ma | Young Gunz | Young Jeezy | Young MC | Young Rascals | Youngbloods | Yvonne Elliman | Zac Brown Band | Zager And Evans | 
</div>
<div data-speed="1000" data-direction="right" class="marquee" style="color=#FFFFFF">
 | Alternative Dance | Alternative Hip-Hop | Alternative Metal | Alternative Rap | Alternative Rock | Big Band | Blue-Eyed Soul | Blues | Blues Rock | Classical | Comedy | Country Music | Dance | Dance Punk | Death Metal | Disco | Doo Wop | Easy Listening | Electronic | Electronic Dance | Electronic Rock | Electronica | EuroPop | Folk Rock | Funk | Gangsta | Hard Rock | Heavy Metal | Hip-Hop | Indie Pop | Indie Rock | Instrumental | Italo Disco | Jazz | Jazz Rock | Live Tronica | New Wave | Nu Metal | POP | Pop-Rock | Post-Rock | Progressive Rock | Psychedelic Pop | R-B | Raggae | Reggae | Rock | Rock-Roll | Soft Rock | Soul | Soundtrack | Southern Rock | Surf Rock | Synth Pop | Theme | Trip Hop | 
</div>

Open in new window


Just adjust the color value so the font color is as you went it.

Dan
Thomas GrassiSystems AdministratorAuthor Commented:
Dan like this

<style>
            body { background:url(images/ilm.jpg) repeat-x; }
            a{color:#DC143C;float:right;margin-right:20px;}
            #bottomright{float:right;bottom:0;position:fixed;width:100%;}
      </style>


I did that still same color

Check the site www.tomsmp3.com
Dan McFaddenSystems EngineerCommented:
Did you update the DIV tags with the style attribute that I posted in the above code section?
Thomas GrassiSystems AdministratorAuthor Commented:
Dan

Yes I did

Here is my current code

<!-- #include file="db_connection.inc" --> 
<%
Set oConn=Server.CreateObject("ADODB.Connection") 
oConn.Open strConnect
strSQL1 = "set rowcount 20 SELECT ArtistName FROM dbo.artists WHERE ArtistID >= (SELECT FLOOR( MAX(ArtistID) * RAND()) FROM dbo.Artists ) ORDER BY ArtistID;"
strSQL2 = "select distinct genre from dbo.recordings tablesample (10 PERCENT);"
Set rsScroll=oConn.Execute(strSQL1,lngRecs,1)
Set rsGenre=oConn.Execute(strSQL2,lngRecs,1)

dim foundScroll
foundScroll = 0
if not rsScroll.eof or not rsScroll.bof then
    foundScroll = 1
    arrScroll = rsScroll.getrows()
end if

dim foundGenre
foundGenre = 0
if not rsGenre.eof or not rsGenre.bof then
    foundGenre = 1
    arrGenre = rsGenre.getrows()
end if

%>
<!DOCTYPE html> 
<HTML>
	<head>
		<style>
			body { background:url(images/ilm.jpg) repeat-x; } 
			a{color:#DC143C;float:right;margin-right:20px;}
			#bottomright{float:right;bottom:0;position:fixed;width:100%;}
		</style>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/1.js"></script>
		<script src="js/marquee.js"></script>
		<script type="text/javascript" src="js/GA-MP3.js"></script>
	
		<title>Tom's Music Site</title>
		<meta http-equiv="refresh" content="60" >
	</head>	
<body>
		<div id="fb-root"></div>
		<script type="text/javascript" src="js/Facebook.js"></script>
         
        <header> 
			<style>
			body { color:red}
  			</style>
  		</header>
  			<h1>Welcome to Tom's Free MP3 Music Site Listen for Free to over 34,000 Songs</h1>
		</body>
<body>
	
	<style>
		body { background:url(images/ilm.jpg) repeat-x; } 
		a{color:#DC143C;float:right;margin-right:20px;}
		#bottomright{float:right;bottom:0;position:fixed;width:100%;}		
	</style>
	<div data-speed="2000" data-direction="right" class='marquee' style="color:white">
<%
	if foundScroll = 1 then
		dim scrollCount
		scrollCount = 0

		For r = LBound(arrScroll, 2) To UBound(arrScroll, 2)
    		artistname=arrScroll(0, r)
			response.write artistname &" | "
		next
	end if
%>
</div>

	<style>
		body { background:url(images/ilm.jpg) repeat-x; } 
		a{color:#DC143C;float:right;margin-right:20px;}
		#bottomright{float:right;bottom:0;position:fixed;width:100%;}
		</style>
	<div data-speed="1000" data-direction="right" class='marquee' style="color:blue">
<%
	if foundGenre = 1 then
   		dim scrollCount2
   		scrollCount2 = 0

		For r = LBound(arrGenre, 2) To UBound(arrGenre, 2)
    		genre=arrGenre(0, r)
			response.write Genre &" | "
		next
	end if
%>
</div>



<font color=#DC143C>
<div>
<div style="width:40%;text-align:left;float:left;">
    <b>
    <form name="input" action="music2.asp" method="get">
    Song, Artist, Album: <input type="text" name="song">
    <input type="submit" value="Search">
    </form>
    </b></div>
    
<div style="width:30%;text-align:center;float:left;">
    <b>
    <form action="music4.asp">
    <select name="genre">
    <option value="Acid Rock">Acid Rock</option>
    <option value="Afrobeat">Afrobeat</option>
    <option value="Alternative">Alternative</option>
    <option value="Alternative Country">Alternative Country</option>
    <option value="Alternative Dance">Alternative Dance</option>
    <option value="Alternative Hip-Hop">Alternative Hip-Hop</option>
    <option value="Alternative Metal">Alternative Metal</option>
    <option value="Alternative Punk">Alternative Punk</option>
    <option value="Alternative Rap">Alternative Rap</option>
    <option value="Alternative Rock">Alternative Rock</option>
    <option value="Art Rock">Art Rock</option>
    <option value="Band Leader">Band Leader</option>
    <option value="Beat">Beat</option>
    <option value="Big Band">Big Band</option>
    <option value="Blue-Eyed Soul">Blue-Eyed Soul</option>
    <option value="Blues">Blues</option>
    <option value="Blues Rock">Blues Rock</option>
    <option value="Bluegrass">Bluegrass</option>
    <option value="Bluegrass Country">Bluegrass Country</option>
    <option value="Bubblegum Pop">Bubblegum Pop</option>
    <option value="Cabaret">Cabaret</option>
    <option value="CCM">CCM</option>
    <option value="Chicago Soul">Chicago Soul</option>
    <option value="Classical">Classical</option>
    <option value="Comedy">Comedy</option>
    <option value="Compilations">Compilations</option>
    <option value="Country Music">Country Music</option>
    <option value="Country Pop">Country Pop</option>
    <option value="Country Rock">Country Rock</option>
    <option value="Christian">Christian</option>
    <option value="Crying Style">Crying Style</option>
    <option value="Dance">Dance</option>
    <option value="Death Metal">Death Metal</option>
    <option value="Dance Hall">Dance Hall</option>
    <option value="Dance Pop">Dance Pop</option>
    <option value="Dance Punk">Dance Punk</option>
    <option value="Dance Rock">Dance Rock</option>
    <option value="Disco">Disco</option>
    <option value="DixieLand">DixieLand</option>
    <option value="Doo Wop">Doo Wop</option>
    <option value="Drama">Drama</option>
    <option value="Dub">Dub</option>
    <option value="Easy Listening">Easy Listening</option>
    <option value="EBM">EBM</option>
    <option value="Electric Blues">Electric Blues</option>
    <option value="Electro">Electro</option>
    <option value="Electro House">Electro House</option>
    <option value="Electro Pop">Electro Pop</option>
    <option value="Electronic">Electronic</option>
    <option value="Electronic Dance">Electronic Dance</option>
    <option value="Electronic Rock">Electronic Rock</option>
    <option value="Electronica">Electronica</option>
    <option value="Electronica House">Electronica House</option>
    <option value="EuroDance">EuroDance</option>
    <option value="EuroPop">EuroPop</option>
    <option value="EuroSpy">EuroSpy</option>
    <option value="Exotica">Exotica</option>
    <option value="Experimental Music">Experimental Music</option>
    <option value="Experimental Rock">Experimental Rock</option>
    <option value="Exotica">Exotica</option>
    <option value="Fast Fusion">Fast Fusion</option>
    <option value="FLamenco Rumba">FLamenco Rumba</option>
    <option value="Folk">Folk</option>
    <option value="Folk Pop">Folk Pop</option>
    <option value="Folk Rock">Folk Rock</option>
    <option value="Folk Tronica">Folk Tronica</option>
    <option value="Free Jazz">Free Jazz</option>
    <option value="French House">French House</option>
    <option value="Funk">Funk</option>
    <option value="Funk Metal">Funk Metal</option>
    <option value="Funk Soul">Funk Soul</option>
    <option value="Gangsta Rap">Gangsta Rap</option>
    <option value="Garage Rock">Garage Rock</option>
    <option value="General Jazz">General Jazz</option>
    <option value="Girl Group">Girl Group</option>
    <option value="Glam Metal">Glam Metal</option>
    <option value="Glam Rock">Glam Rock</option>
    <option value="Glitch">Glitch</option>
    <option value="Gospel">Gospel</option>
    <option value="Gospel Rock">Gospel Rock</option>
    <option value="Gothic Metal">Gothic Metal</option>
    <option value="Gothic Rock">Gothic Rock</option>
    <option value="Hard Bop">Hard Bop</option>
    <option value="Hard Rock" selected>Hard Rock</option>
    <option value="Harmonica Blues">Harmonica Blues</option>
    <option value="Heavy Metal">Heavy Metal</option>
    <option value="Hindustani">Hindustani</option>
    <option value="Hip-Hop">Hip-Hop</option>
    <option value="Holiday">Holiday</option>
    <option value="House Music">House Music</option>
    <option value="Indie Folk">Indie Folk</option>
    <option value="Indie Pop">Indie Pop</option>
    <option value="Indie Rock">Indie Rock</option>
    <option value="Industrial Metal">Industrial Metal</option>
    <option value="Industrial Rock">Industrial Rock</option>
    <option value="Instrumental">Instrumental</option>
    <option value="Instrumental Rock">Instrumental Rock</option>
    <option value="Israeli">Israeli</option>
    <option value="Italian">Italian</option>
    <option value="Italo Disco">Italo Disco</option>
    <option value="Jam Band">Jam Band</option>
    <option value="Jazz">Jazz</option>
    <option value="Jazz Funk">Jazz Funk</option>
    <option value="Jazz Rap">Jazz Rap</option>
    <option value="Jazz Rock">Jazz Rock</option>
    <option value="Latin">Latin</option>
    <option value="Latin Funk">Latin Funk</option>
    <option value="Latin House">Latin House</option>
    <option value="Latin Pop">Latin Pop</option>
    <option value="Latin R-B">Latin R-B</option>
    <option value="Latin Rock">Latin Rock</option>
    <option value="Latin Soul">Latin Soul</option>
    <option value="Live Tronica">Live Tronica</option>
    <option value="Metal">Metal</option>
    <option value="Miami Bass">Miami Bass</option>
    <option value="MST">MST</option>
    <option value="Musicals">Musicals</option>
    <option value="Novelty">Novelty</option>
    <option value="New Age">New Age</option>
    <option value="New Beat">New Beat</option>
    <option value="New Jack Swing">New Jack Swing</option>
    <option value="New Wave">New Wave</option>
    <option value="Neo Soul">Neo Soul</option>
    <option value="No Wave">No Wave</option>
    <option value="Nu Funk">Nu Funk</option>
    <option value="Nu Metal">Nu Metal</option>
    <option value="Oldies">Oldies</option>
    <option value="Orchestral">Orchestral</option>
    <option value="Other">Other</option>
    <option value="Patriotic">Patriotic</option>
    <option value="POP">POP</option>
    <option value="POP Punk">POP Punk</option>
    <option value="Pop-Rock">Pop-Rock</option>
    <option value="Post-Bop">Post-Bop</option>
    <option value="Post-Disco">Post-Disco</option>
    <option value="Post-Punk">Post-Punk</option>
    <option value="Post-Rock">Post-Rock</option>
    <option value="Progressive Country">Progressive Country</option>
    <option value="Progressive House">Progressive House</option>
    <option value="Progressive Rock">Progressive Rock</option>
    <option value="Psychedelic Pop">Psychedelic Pop</option>
    <option value="Psychedelic Rock">Psychedelic Rock</option>
    <option value="Psychedelic Soul">Psychedelic Soul</option>
    <option value="Punk">Punk</option>
    <option value="Punk Rock">Punk Rock</option>
    <option value="RAP">RAP</option>
    <option value="RAP Metal">RAP Metal</option>
    <option value="RAP Rock">RAP Rock</option>
    <option value="Reggae">Reggae</option>
    <option value="R-B">R-B</option>
    <option value="Rock">Rock</option>
    <option value="Rockabilly">Rockabilly</option>
    <option value="Rock & Roll">Rock-Roll</option>
    <option value="Roots Raggae">Roots Raggae</option>
    <option value="Roots Rock">Roots Rock</option>
    <option value="Salsa">Salsa</option>
    <option value="Smooth Jazz">Smooth Jazz</option>
    <option value="Smooth R-B">Smooth R-B</option>
    <option value="Soft Rock">Soft Rock</option>
    <option value="Soul">Soul</option>
    <option value="Sound Alike">Sound Alike</option>
    <option value="Soundtrack">Soundtrack</option>
    <option value="Southern Rock">Southern Rock</option>
    <option value="Southern Soul">Southern Soul</option>
    <option value="Spoken Word">Spoken Word</option>
    <option value="Surf Rock">Surf Rock</option>
    <option value="Swamp Rock">Swamp Rock</option>
    <option value="Swing">Swing</option>
    <option value="Synth Pop">Synth Pop</option>
    <option value="Techno">Techno</option>
    <option value="Texas Blues">Texas Blues</option>
    <option value="Texas Country">Texas Country</option>
    <option value="Theme">Theme</option>
    <option value="Thrash Metal">Thrash Metal</option>
    <option value="Trance">Trance</option>
    <option value="Trance Fusion">Trance Fusion</option>
    <option value="Trip Hop">Trip Hop</option>
    <option value="Vocal Group">Vocal Group</option>
    <option value="Vocal Jazz">Vocal Jazz</option>
    <option value="World Music">World Music</option>
    </select>
    <input type="submit" value="Select Genre">
    </form>
    </b>
    </div>
    </div>
    <br>
    <form>
    	<br>
    <input type="button" value="Show All Artists" onClick="window.location.href='MusicGtable.asp'">
    </form> 
    <br>
    <form>
    <input type="button" value="Show All Albums" onClick="window.location.href='MusicAtable.asp'">
    </form>
    <br> 
    <form>
    <input type="button" value="Show All MP3 Songs" onClick="window.location.href='musictable.asp'">
    </form> 
    <br>
    <form> 
    <input type="button" value="Disclaimer Please Read " onClick="window.location.href='Disclaimer.htm'">
    </form>
    <p>
	<script src="js/get-date.js"></script>
    </p>
<div id="bottomright">             
  <form>
    <input type="button" value="Contact US" onClick="window.location.href='mailto:webmaster@tgcsnet.com?subject=User requesting info'">
  </form>               
  <form> 
    <input type="button" value="Sign Our Guest Book" onClick="window.location.href='GB/GuestBook.htm'">
  </form> 
</div>


<div class="fb-like" data-href="http://www.tomsmp3.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<br>
<div align="left">
<a href="https://twitter.com/trgrassijr" class="twitter-follow-button" data-show-count="false">Follow US</a>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="trgrassijr">Tweet</a>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

Open in new window

Big MontyWeb Ninja at largeCommented:
you only need one STYLE section, which can be in your HEAD section. You're repeating yourself, which is not necessary, so remove the other STYLE tags that are not in the HEAD section.

next, you need to create a CSS class called marquee (it can be called anything you want, it's just a way to identify what you're styling), that looks like:

<!DOCTYPE html> 
<HTML>
	<head>
		<style>
			body { background:url(images/ilm.jpg) repeat-x; } 
			a{color:#DC143C;float:right;margin-right:20px; }
			#bottomright{float:right;bottom:0;position:fixed;width:100%; }
                        .marquee { color: #ffffff;         <-- put the color of the text here
		</style>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/1.js"></script>
		<script src="js/marquee.js"></script>
		<script type="text/javascript" src="js/GA-MP3.js"></script>
	
		<title>Tom's Music Site</title>
		<meta http-equiv="refresh" content="60" >
	</head>	

Open in new window


I noticed in your html you have multiple closing </body> tags, you can only have one, and it should be at the end of your page, right before the closing </html> tag.

finally, get rid of all <font> tags
Thomas GrassiSystems AdministratorAuthor Commented:
Josh


1. removed the extra style sections
2. If I put the color on the only style then both my marquees get the same color I want separate colors I tried this
<div data-speed="2000" data-direction="right" class='marquee' style="color:white">
the other one
<div data-speed="1000" data-direction="right" class='marquee' style="color:blue">

They still are red color.

3. closing html tags
add </body>
       </html>

to bottom

Ran debugger now clean of errors except for the facebbook twitter code


check out the source from my site www.tomsmp3.com
Thomas GrassiSystems AdministratorAuthor Commented:
Dan/Josh

My div statement was html but now the page is HTML 5  wondering if that is the reason the color option does not work?

<div data-speed="2000" data-direction="right" class='marquee' style="color:white">


<div data-speed="1000" data-direction="right" class='marquee' style="color:blue">


Both give this message in Microsoft Expression Web 4 they have a red underline

In HTML5 the attribute "data-speed" is not permitted for the <div> tag.
In HTML5 the attribute "data-direction" is not permitted for the <div> tag.

are those minor errors causing the color problem?

If I remove them what do I gain or loss?

Can they be placed elsewhere?

Thanks
Dan McFaddenSystems EngineerCommented:
The DIV tag & the style attribute are valid in all versions of HTML.  I would end your style declaration with a semi-colon (;).  Try this:

<div data-speed="2000" data-direction="right" class='marquee' style="color: white;">

<div data-speed="1000" data-direction="right" class='marquee' style="color: blue;">

As for the data-speed and data-direction attributes... those are used by your marquee JavaScript to do the scroll left.

As a side note, marquee text went out of style about 15 years ago.  Maybe it would be easier to drop the marquee and it's associated JavaScript and eliminate the issue altogether.  Just my opinion.

Dan
Thomas GrassiSystems AdministratorAuthor Commented:
Dan

Thanks for the input

Added the semi-colon    sorry same results  color still red

Code the color be coming from the last color statement which happens to be red?

This is a sample of the code  www.tomsmp3.com view source for full vision

<!DOCTYPE html> 
<HTML>
	<head>
		<style>
			body { background:url(images/ilm.jpg) repeat-x; } 
			a{color:#DC143C;float:right;margin-right:20px;}
			#bottomright{float:right;bottom:0;position:fixed;width:100%;}
		</style>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/1.js"></script>
		<script src="js/marquee.js"></script>
		<script type="text/javascript" src="js/GA-MP3.js"></script>
	
		<title>Tom's Music Site</title>
		<meta http-equiv="refresh" content="60" >
	</head>	
<body>
		<div id="fb-root"></div>
		<script type="text/javascript" src="js/Facebook.js"></script>
         
        <header> 
			<style>
			body { color:red}
  			</style>
  		</header>
  			<h1>Welcome to Tom's Free MP3 Music Site Listen for Free to over 34,000 Songs</h1>
		

	
		<div data-speed="2000" data-direction="right" class='marquee' style="color:white;">
<%
	if foundScroll = 1 then
		dim scrollCount
		scrollCount = 0

		For r = LBound(arrScroll, 2) To UBound(arrScroll, 2)
    		artistname=arrScroll(0, r)
			response.write artistname &" | "
		next
	end if
%>
</div>

		<div data-speed="1000" data-direction="right" class='marquee' style="color:blue;">
<%
	if foundGenre = 1 then
   		dim scrollCount2
   		scrollCount2 = 0

		For r = LBound(arrGenre, 2) To UBound(arrGenre, 2)
    		genre=arrGenre(0, r)
			response.write Genre &" | "
		next
	end if
%>
</div>

Open in new window


Why what is wrong with Marquee's?  Am I giving away my age? LOL

How would you purpose I display that data then? It is just a sampling of the database

Thoughts?
Dan McFaddenSystems EngineerCommented:
Last idea I have other than completely rewriting the page.

1. remove the style attribute from both the DIV tags
2. inside each DIV tag, open and close a SPAN tag
3. on the SPAN tags, put an inline style attribute with the color statement

So your DIVs would look like this (as they originally did):

<div data-speed="2000" data-direction="right" class='marquee'>

<div data-speed="1000" data-direction="right" class='marquee'>

Open in new window


Then the content of the DIVs would look like this:

<span style="color: white;">DeVotchKa | Dexys Midnight Runners | Diamond Rio | Diana King | Diana Ross and the Supremes | Dianne Renay | Dick & Dee Dee | Dickey Lee | Dido | Dierks Bentley | Digable Planets | Digital Bled | Digital Underground | Digitalism | Dinah Washington | Dino | Dino Desi & Billy | Dio | Dion and the Belmonts | Dionne Farris | </span>

<span style="color: blue;">Afrobeat | Alternative | Alternative Metal | Alternative Rock | Blue-Eyed Soul | Blues | Classical | Comedy | Country Music | Dance | Dance Pop | Disco | Doo Wop | Easy Listening | Electronic | Electronic Rock | Electronica | EuroSpy | Folk | Folk Rock | Funk | Garage Rock | Girl Group | Glam Metal | Hard Rock | Heavy Metal | Hip-Hop | House | House Music | Indie Rock | Instrumental | Italian | Jazz | Jazz Funk | Latin Rock | New Age | New Wave | Novelty | Other | POP | POP Rock | Pop-Rock | Post-Rock | Progressive House | Progressive Rock | Psychedelic Pop | Psychedelic Rock | Punk Rock | R-B | Raggae | Rock | Rock-Roll | Smooth Jazz | Soul | Soundtrack | Southern Rock | Spoken Word | Surf Rock | Techno | Trance | Trip Hop | World Music | </span>

Open in new window


I think Big Monty may have suggested this in a previous post.

Dan

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Thomas GrassiSystems AdministratorAuthor Commented:
Dan

The span worked

Check it out www.tomsmp3.com

Thanks for all your help
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.