All, What I'm trying to accomplish is this: Display a marquee composed of several (dozen or more) company logos, across the page from right to left in a single row. I have the following code which works as desired in Firefox, but doesn't work in other (Chrome, IE, Edge) browsers. Specifically, if the width of the combined images is greater than the width of the the overflow images are displayed on another "line" below, starting at the far left. It seems the duration of the display is as if the images are properly in line (as there is a great deal of blank space after the last image clears the .
I have tried to use suggested CSS3, and the swimming fish js examples, but they only work with a single image. As I'm using php to get multiple images from mysql, they don't fit my needs.
<div class="main"> <marquee behavior="scroll" scrollamount="5" direction="left" onmouseover="this.stop();" onmouseout="this.start();"> <?php $fetch=mysql_query("select * from banners ORDER by id"); if(mysql_num_rows($fetch)) { ?> <ul class="ulclass"> <?php while($row=mysql_fetch_array($fetch)) { $id=$row['id']; $feed= $row['image']; ?> <li class="liclassleft"> <?php echo '<img src="img/banners/'.$feed.'"'.' width="125" height="125";/>'; ?> <?php } ?> </li> <?php } ?> </ul> </marquee> </div>Important CSS lines used:
.main { border-bottom:1px #051B42 solid; max-width:99%;max-height:195px; padding:5px; float:left; margin-bottom:1px; }
.ulclass { list-style-type:none;}
.liclassleft { margin:0 auto; border-bottom:1px #808080; font-size:20px; font-family:Tahoma, Geneva, sans-serif; padding:5px;float: left;}
I understand the tag isn't what I should be using, but except for the wrapping of images it works. I'm open to using any form of replacement. Thank you, in advance. Russ