I'm trying to centre the content of a div such that the display is correct in IE 5,6,7 and 8, as well as FF.
<div id="YoutubeClip">
<h3>Subscribe on YouTube!</h3><br>
<ul class="gallery clearfix"><a href="http://www.someyoutubevideo.com" rel="prettyPhoto" title="Some youtube title"><img alt="some youtube title" src="youtube clip image" border="0"></a></ul>
Some youtube title
</div>
My CSS is simple:
text-align: center
As expected, this displays the image and the text centered in FF.
In IE5, the image is left justified. The text is also left justified, with only one word on a line, like the following:
It
appears
like
this.
IE 6 has the same problem as above.
IE 7 appears to have the same problem, but when I put a border around the div, the content overflows the border.
The display appears correct in IE8
Any help into this would be great. I'm trying to learn CSS better and I haven't been able to figure out the intricacies of this issue yet.