I have a jquery slider where the text overlay is absolutely positioned on top of an image for each tab/slide.Everything is working just dandy in Firefox and IE9, but in Chrome the text overlay is getting bumped down below the tab slider. IE9/Firefox:
Chrome:
I have no idea what is causing this, and have been working on it for quite a while. It's usually IE that gives me problems like this since Chrome and Firefox are both Webkit browsers.So my question is: What is causing Chrome to bump the text overlay below the slider/tabs?Here is my condensed HTML: \[code\]<!-- 1st header and pane --><img class="tab" src="http://stackoverflow.com/questions/14563273/images/biochem-1.jpg" /><div style="width:720px; display:block"> <img src="http://stackoverflow.com/questions/14563273/images/biochem-2.jpg"></a> <a href="http://stackoverflow.com/questions/14563273/#"><span class="text-overlay transparent"> <p> Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra. </p> </span></a></div><!-- 2nd header and pane --><img class="tab" src="http://stackoverflow.com/questions/14563273/images/particle-1.jpg" /><div> <img src="http://stackoverflow.com/questions/14563273/images/particle-2.jpg" /> <a href="http://stackoverflow.com/questions/14563273/#"><span class="text-overlay transparent"> <p> Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra. </p> </span></a></div>\[/code\]Here is my CSS:\[code\] /* transparent bg */.transparent { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);}/* root element for accordion. decorated with rounded borders and gradient background image */#accordion { background:#fafafa; height:250px; width:1000px; border:1px solid #ddd; margin: 0 auto; overflow: hidden;}/* accordion header */#accordion img.tab { float:left; margin-right:0px; cursor
ointer; opacity:1; filter: alpha(opacity=50); position: relative;}/* currently active header */#accordion img.current { cursor:default; opacity:1; filter: alpha(opacity=100);}/* accordion pane. should initially have zero width and display:none. the first pane should override these with inline style */#accordion div { width:0px; float:left; display:none; margin-right:0px; position: relative;}/* content inside a pane should have fixed width */#accordion div img { line-height: auto; width:720px; border: none;}#accordion div p { color: #FFFFFF; font-size: 16px; padding-left: 15px; padding-right: 15px;}.text-overlay { height: 250px; left: 470px; position: absolute; width: 250px;}\[/code\]Here is my JS:\[code\] $(document).ready(function() { $(function() { $("#accordion").tabs("#accordion div", { tabs: 'img.tab', effect: 'horizontal', //event: 'mouseover' // start from the beginning after the last tab rotate: true }).slideshow({autoplay:true}); });});\[/code\]
ointer; opacity:1; filter: alpha(opacity=50); position: relative;}/* currently active header */#accordion img.current { cursor:default; opacity:1; filter: alpha(opacity=100);}/* accordion pane. should initially have zero width and display:none. the first pane should override these with inline style */#accordion div { width:0px; float:left; display:none; margin-right:0px; position: relative;}/* content inside a pane should have fixed width */#accordion div img { line-height: auto; width:720px; border: none;}#accordion div p { color: #FFFFFF; font-size: 16px; padding-left: 15px; padding-right: 15px;}.text-overlay { height: 250px; left: 470px; position: absolute; width: 250px;}\[/code\]Here is my JS:\[code\] $(document).ready(function() { $(function() { $("#accordion").tabs("#accordion div", { tabs: 'img.tab', effect: 'horizontal', //event: 'mouseover' // start from the beginning after the last tab rotate: true }).slideshow({autoplay:true}); });});\[/code\]