Centering problem in IE8 using DIVs

Question

Hi,

I am building a site using Joomla and a paticular plugin Joom Gallery. Joom Gallery has a plugin which displays scrolling images. All works great except one minor fault which I believe is something to do with IE8.

In FF the images centred, but in IE8 they are aligned to the left.

I belive the offending code is as follows: (This is generated by the plugin)

>   <style type="text/css">
>     <!-- .joomimg60_imgct { width:100% !important; float:left; }
> .joomimg60_img { display:block;
> text-align:center!important;
> vertical-align:top!important; }
> .joomimg60_txt {
> clear:both;text-align:center!important;
> vertical-align:top!important; }
>  
>     -->   </style>
> 
> 
> <div class="joomimg60_main">  
> <marquee behavior="scroll"
> direction="down" loop="infinite"  
> height="250" width="200"  
> scrollamount="1" scrolldelay="10"  
> onmouseover="this.stop()"
> onmouseout="this.start()"
> class="joomimg60_scroll">   <div
> class="sectiontableentry1
> joomimg60_row">
>  
>     <div class="joomimg60_imgct">
>       <div class="joomimg60_img">   <a href="/index.php?option=com_joomgallery&amp;func=detail&amp;id=2&amp;Itemid=30&amp;lang=en"
> >    <img src="http://clubquad.fr/components/com_joomgallery/img_thumbnails/quad_racing_3/quad_racing_20091226_1696329240.jpg"alt="Quad
> Racing"title="Quad Racing" /> 
> </a></div> <div class="joomimg60_txt">
> <a href="javascript:alert('Guests are
> not allowed to view picture details.
> Please login.')"
> class="joomimg60_name"> Quad Racing
> </a><br />   </div>
>     </div>   </div>   <div class="joomimg_clr"></div>   <div
> class="sectiontableentry2
> joomimg_row">
>     <div class="joomimg60_imgct">
>       <div class="joomimg60_img">   <a href="/index.php?option=com_joomgallery&amp;func=detail&amp;id=6&amp;Itemid=30&amp;lang=en"
> >    <img src="http://clubquad.fr/components/com_joomgallery/img_thumbnails/member_gallery_5/member_gallery_20091226_1973325895.jpg"alt="Member
> Gallery"title="Member Gallery" /> 
> </a></div> <div class="joomimg60_txt">
> <a href="javascript:alert('Guests are
> not allowed to view picture details.
> Please login.')"
> class="joomimg60_name"> Member Gallery
> </a><br />   </div>
>     </div>   </div>   <div class="joomimg_clr"></div>   <div
> class="sectiontableentry1
> joomimg_row">
>     <div class="joomimg60_imgct">
>       <div class="joomimg60_img">   <a href="/index.php?option=com_joomgallery&amp;func=detail&amp;id=1&amp;Itemid=30&amp;lang=en"
> >    <img src="http://clubquad.fr/components/com_joomgallery/img_thumbnails/off_road_2/can-am_outlander_800_20091226_1680437934.jpg"alt="Can-am
> Outlander 800"title="Can-am Outlander
> 800" />  </a></div> <div
> class="joomimg60_txt"> <a
> href="javascript:alert('Guests are not
> allowed to view picture details.
> Please login.')"
> class="joomimg60_name"> Can-am
> Outlander 800 </a><br />   </div>
>     </div>   </div>

Answer 1

Hi. I'm not exactly sure what the problem is, but it is a typical thing for browsers to display things differently.

I'm not sure you can fix this very easily if the code is being generated.

However, you can play with the CSS at the top to see if you can fix it in the generated code, then maybe you can figure out how this code gets generated and fix that too.

You could try removing the float:left and see what it does etc...

If your not familar with CSS what you have at the top defines the layout of the divs below by their class. The code inside the style tags is in quotes for backwards compatibility with older browsers. Hope that gets you on the right track.

Contacting the makers of your plugin and reporting the bug is another thing you can do.