CODEWITHSUNDEEP
csshtmlinternet-explorer-6centering
splatto
splatto

Reputation: 3227

Centering in IE5/6/7/8, and FF

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.

Upvotes: 3

Views: 207

Answers (4)

Meta
Meta

Reputation: 1860

#YoutubeClip {
margin: 0 auto 0 auto;
}

0 = top and bottom auto = left and right

having this on the div that wraps the content within it should center the entire block and will keep it centered even if the users browser is not maximized or is re-sized.

If you are looking to center the content within the block and not the block its self

text-align: center; needs to be added to the h3 and other tags within #YoutubeClip

is what you will be looking for

I would suggest adding <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> to the top of your html file before attempting to validate so that you have a solid base to start with for validation.

As for your <ul class=""> it can be changed to a <div class=""> if your planning to use it the way you are showing in your code example. Otherwise you will need to add <li></li> around the content within it (for each separate row).

EX:

<ul>
   <li>content goes here</li>
   <li>more content</li>
</ul>

Upvotes: 0

Kerry Jones
Kerry Jones

Reputation: 21848

When you said "It appears like this" there wasn't anything to look at.

The first thing I would do is validate your code, as the <ul> tag you have is used improperly:

http://validator.w3.org/

The primary purpose for validating your code is for browser compatibility.

I can't see the CSS you're using, and I haven't ever tested with IE5, but I would try using

margin: 0 auto

to center your divs. It will probably be much more effective.

Hope that helps :)

Upvotes: 3

cjk
cjk

Reputation: 46465

To align a block level element in the center, you need:

margin-left: auto;
margin-right: auto;

Upvotes: 0

Kali Charan Rajput
Kali Charan Rajput

Reputation: 12626

you should use text-align:center for ul and h3. if you can post css than this may be better.try this.

Upvotes: 0

Related Questions