Browser Variance for DIV Displays in Slideshow

I have a flexslider slideshow on a site I'm developing. It uses the <ul> and <li> elements to differentiate slides. Within each of these <li> elements, I have an image. In addition, I've created a DIV overlay that allows me to have html text included so the site owner can simply change out the text without having to include it in the image itself. At present, I have 5 slides.

The issue I'm having is that in CHROME, if I add the DIV overlay for each <li> element, it displays as I want it to where each slide has a different text and each slide displays the single DIV.

In Firefox and Explorer, both start layering the DIVS as the slideshow progresses until the final slide shows 4 overlapping divs and even the text overlapping. It's as if the individual <li> elements are stacked on one another instead of sliding in from the right like the images do. Somehow the CSS is ignoring the slideshow and just displaying the DIVS in each slide as though they are static on the screen.

Here's my code and URL:
<div style="width:100%; height:auto; z-index:799; background-color:#fff; border-bottom:8px #500113 solid; position:relative; margin-top:-5%">
<div class="flexslider">

<ul class="slides">
<li><div style=" background-image:url(includes/slideshow/images/bkg_transparency.png); background-repeat:repeat; height:15%; position:absolute; width:100%; bottom:10%; padding-bottom:15px; font-family:Verdana, Geneva, sans-serif; font-weight:bolder; font-size:300%; padding-left:50px; color:#500113;"></div><div style="height:15%; position:absolute; width:100%; bottom:10%; padding-bottom:15px; font-family:Verdana, Geneva, sans-serif; font-weight:bolder; font-size:300%; padding-left:50px; color:#500113;">DRIVE FOR US AND SEE</div><a href="#" target="_blank"><img src="includes/images/slideshow/1.jpg" alt="#pgTitle#" title="#pgTitle#" /></a></li>
<li><div style=" background-image:url(includes/slideshow/images/bkg_transparency.png); background-repeat:repeat; height:15%; position:absolute; width:100%; bottom:10%; padding-bottom:15px; font-family:Verdana, Geneva, sans-serif; font-weight:bolder; font-size:300%; padding-left:50px; color:#500113;">HOME ON WEEKENDS</div> <a href="#" target="_blank"><img src="includes/images/slideshow/2.jpg" alt="#pgTitle#" title="#pgTitle#" /></a></li>
<li><div style=" background-image:url(includes/slideshow/images/bkg_transparency.png); background-repeat:repeat; position:absolute; width:100%; bottom:10%; padding-bottom:15px; font-family:Verdana, Geneva, sans-serif; font-weight:bolder; font-size:300%; padding-left:50px; color:#500113;">FULL WAREHOUSING MANAGEMENT SOLUTIONS</div> <a href="#" target="_blank"><img src="includes/images/slideshow/3.jpg" alt="#pgTitle#" title="#pgTitle#" /></a></li>
<li><div style=" background-image:url(includes/slideshow/images/bkg_transparency.png); background-repeat:repeat; height:15%; position:absolute; width:100%; bottom:10%; padding-bottom:15px; font-family:Verdana, Geneva, sans-serif; font-weight:bolder; font-size:300%; padding-left:50px; color:#500113;">BENEFITS PACKAGES FOR DRIVERS</div> <a href="#" target="_blank"><img src="includes/images/slideshow/4.jpg" alt="#pgTitle#" title="#pgTitle#" /></a></li>
<li><div style=" background-image:url(includes/slideshow/images/bkg_transparency.png); background-repeat:repeat; height:15%; position:absolute; width:100%; bottom:10%; padding-bottom:15px; font-family:Verdana, Geneva, sans-serif; font-weight:bolder; font-size:300%; padding-left:50px; color:#500113;">MAN LANDS ON MOON!</div> <a href="#" target="_blank"><img src="includes/images/slideshow/5.jpg" alt="#pgTitle#" title="#pgTitle#" /></a></li>
</ul>
</div>
</div>
 
 
  <script type="text/javascript">
    $(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

Open in new window


This uses a separate CSS file to control the styling of the DIV container, etc.

The url: http://www.bohreninc.com/new/index.cfm
LVL 1
day6Asked:
Who is Participating?
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.

Julian HansenCommented:
From what I can see the problem is that your div overlay on the previous slide - the one with

FULL WAREHOUSING MANAGEMENT SOLUTIONS

Is too long for the div so it is displaying the ONS of the Solutions on the next slide.

Two options

1. Reduce your font size

But I would rather ...

2. Fix the width on your div.

Currently you have the width of the div at 100% AND you have a padding left of 50px which is making the div 50px longer than its container.

To fix this you can either set the width of the DIV to 1214px (width of li 1264px less 50px padding)
0
day6Author Commented:
@JulianH

The text or padding have no effect on the slides replicating the divs each time. I removed both text and the padding-left and it still accumulates the divs stacking over each other each time the slide advances. I can tell it is because the slide has a background repeating image that is about a 30% transparent white 25x25px png file. On the first slide its transparency is right, then as it goes, the div becomes more and more solid in color... which tells me it is overlapping each time.

Again, it works fine on Chrome, but FF and Explorer don't seem to be interpreting it right.
0
Julian HansenCommented:
Ok - but you should fix that padding issue anyway

To fix the problem you are talking about add

position: relative to line 25 of

flexslider.css

The div's are positioned absolutely but in FF because they are not relative to their immediate parent (<li>) when the li shifts the next one is brought on top of the first - weird bug because theoretically they should all stack in the beginning but that's the problem.

Add the line above and it should resolve the issue.
0

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
day6Author Commented:
@JulianH

It fixed it.
0
Julian HansenCommented:
Great - glad you got sorted.
0
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.