How do I center divs in IE?

#1

url: http://www.dennicasplace.com/fashionmeetsmusic/FMM_Music2.html

I have 4 DIVs defined as follows:

..style150 {
width:800px;
height:150px;
margin-left: auto;
margin-right: auto;
border:1px solid black;
}
..style200 {
width:800px;
height:200px;
margin-left: auto;
margin-right: auto;
border:1px solid black;
}

They center correctly in FF, Safari, etc. but not in IE where they are
aligned left. Here is a sample of the entire DIV:

<div class="style150">
<img alt="" src="F/FMM_Shine.jpg" width="170" height="113"
style="float: left;margin: 15px 15px 15px 15px;">
<p class="style73" style="margin: 15px 15px 15px
15px;">FMM aims to showcase emerging musical performers through
their <strong>SHINE PROGRAM</strong>. FMM's
Shine program features launch parties and monthly showcases as
well as formalizing the artist's approach to the music industry,
providing the necessary tools, artist development network and
resources for potential success. FMM strives to create an
environment where artists can network with industry
executives. </p> </div>

Any insight and help is greatly appreciated!!

Regards,
Tim

#2

On Jun 27, 1:31*pm, Bigmoxy <timburk... (AT) gmail (DOT) com> wrote:

Quote:

url:http://www.dennicasplace.com/fashionmeetsmusic/FMM_Music2.html

I have 4 DIVs defined as follows:

.style150 {
* * * * width:800px;
* * * * height:150px;
* * * * margin-left: auto;
* * * * margin-right: auto;
* * * * border:1px solid black;}

.style200 {
* * * * width:800px;
* * * * height:200px;
* * * * margin-left: auto;
* * * * margin-right: auto;
* * * * border:1px solid black;

}

They center correctly in FF, Safari, etc. but not in IE where they are
aligned left. Here is a sample of the entire DIV:

div class="style150"
img alt="" src="F/FMM_Shine.jpg" width="170" height="113"
style="float: left;margin: 15px 15px 15px 15px;"
* * * * * * * * <p class="style73" style="margin: 15px 15px 15px
15px;">FMM aims to showcase emerging * musical performers through
their <strong>SHINE PROGRAM</strong>. FMM's
* * * * * * * * * * * * * * * * Shine program features launch parties and monthly showcases as
* * * * * * * * * * * * * * * * well as formalizing the artist's approach to the music industry,
* * * * * * * * * * * * * * * * providingthe necessary tools, artist development network and
* * * * * * * * * * * * * * * * resourcesfor potential success. FMM strives to create an
* * * * * * * * * * * * * * * * environment where artists can network with industry
executives. </p> * * * * * * * * * * * * ** * * * * * * </div

Any insight and help is greatly appreciated!!

Regards,
Tim

I came up with a solution, albeit an ugly one. I wrapped each DIV with
<div align="center"> and then added text-align: left to each of the
classes (i.e. style150 and style200).

#3

Bigmoxy <timburkart (AT) gmail (DOT) com> skrev :

Quote:

Any insight and help is greatly appreciated!!

Use a proper doc type.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

http://www.alistapart.com/articles/doctype
--
Kerim

#4

Kerim Ellentoft wrote:

Quote:

Bigmoxy <timburkart (AT) gmail (DOT) com> skrev :

Any insight and help is greatly appreciated!!

Use a proper doc type.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"

http://www.alistapart.com/articles/doctype

This is absolutely correct, although it being circa 2002 it doesn't
mention which or why.

Use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

unless you have a reason to use xhtml, not that I know what that might be.

You are currently running in what is known as quirks mode. IE ignores
margin: auto in that. All browsers treat quirks mode (as opposed to
standards) mode differently, a great reason to use standards mode by
starting with the right doctype.

Note that how box widths are determined is different in standards
mode. In general standards mode treats widths as the width of the
content, where quirks modes (there is more than one!) includes padding
and borders in determining widths.

jeff

#5

On 27 juin, 16:31, Bigmoxy <timburk... (AT) gmail (DOT) com> wrote:

Quote:

url:http://www.dennicasplace.com/fashionmeetsmusic/FMM_Music2.html

I have 4 DIVs defined as follows:

.style150 {
width:800px;
height:150px;
margin-left: auto;
margin-right: auto;
border:1px solid black;}

.style200 {
width:800px;
height:200px;
margin-left: auto;
margin-right: auto;
border:1px solid black;

}

They center correctly in FF, Safari, etc. but not in IE

Which version of IE? This is important to mention. There are many
differences between IE 6, IE 7 and IE 8. You should be trying/aiming
to support IE 8 first.

Generally speaking, you should mention browser versions when posting
for assistance in a web authoring newsgroup.

where they are

Quote:

aligned left. Here is a sample of the entire DIV:

div class="style150"
img alt="" src="F/FMM_Shine.jpg" width="170" height="113"
style="float: left;margin: 15px 15px 15px 15px;"
p class="style73" style="margin: 15px 15px 15px
15px;">FMM aims to showcase emerging musical performers through
their <strong>SHINE PROGRAM</strong>. FMM's
Shine program features launch parties andmonthly showcases as
well as formalizing the artist's approachto the music industry,
providing the necessary tools, artist development network and
resources for potential success. FMMstrives to create an
environment where artists can network with industry
executives. </p> </div

Tim,

1- Please search a bit before posting: your question has been answered
several dozens of times in the last 12 months.

2- Try to use semantic class names: style73, style150, style200 is not
semantic at all. By semantic, I mean to use identifiers describing the
functions, the roles.

Good examples: warning, recipe, menu, etc.

W3C Quality Assurance Tips for Webmasters
Use class with semantics in mind.
http://www.w3.org/QA/Tips/goodclassnames

3- Declare a doctype with a strict DTD, not a transitional DTD.

I recommend

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

and I recommend you closely examine this page:

Making your page using web standards - how to
https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/Making_your_page_using_web_standards_-_how_to

Finally, for an interactive example of how to center elements (with
explanations):

Interactive demo on CSS horizontal alignment and horizontal formating
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html

Also worth mentioning:
Centring using CSS by David Dorward
http://dorward.me.uk/www/centre/

regards, Gérard
--
Internet Explorer 7 bugs: 175 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
Internet Explorer 8 bugs: 50 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

How do I center divs in IE?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

How do I center divs in IE? - 06-27-2009 , 04:31 PM

Re: How do I center divs in IE? - 06-27-2009 , 05:03 PM

Re: How do I center divs in IE? - 06-27-2009 , 05:09 PM

Re: How do I center divs in IE? - 06-29-2009 , 06:18 PM

Re: How do I center divs in IE? - 06-29-2009 , 11:09 PM