How do I center divs in IE?
Bigmoxy
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
Bigmoxy
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).
Kerim Ellentoft
>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">
jeff
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
GTalbot
> 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
> 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>
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/