Simple Block Centering in IE

D

damiensawyer

Hi,

I'm wondering if someone can help me with something that 'should' be
easy. What's more, it's something that I've done a dozen times, but
can't for the life of me figure out what I'm missing 'today'.

I'm trying to center a <div> using 'auto' margins.

The following works fine in FF, Chrome, Opera etc (in that the
#content block is centered). But not in IE.

Can someone please point out to me what I'm missing?

Thanks very much in advance,


Damien



---------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>

<STYLE type="text/css">
* {border:0px; margin:0px;}
body {margin:10px;}

#content
{
background-color:Yellow;
margin-left:auto;
margin-right:auto;
width:300px;
}

</STYLE>

</head>


<body>
<div id="content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec commodo magna nec purus. Integer sem nunc, vulputate at, aliquet
ut, eleifend ut, ante. Vivamus et sapien ut arcu ornare accumsan.
Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Sed quis erat sed ligula rutrum
pulvinar. Nam placerat arcu ut arcu. Sed posuere, mi sit amet commodo
vulputate, mauris lorem pretium purus, volutpat venenatis arcu nunc ut
orci. Suspendisse potenti. Mauris congue. Sed felis. Ut pellentesque
lectus quis quam. In lacinia lacus nec metus.</p>
<p>Nunc eu diam. Praesent et diam vel justo pellentesque
malesuada. Donec sed diam condimentum neque auctor molestie. Donec
condimentum commodo erat. Vestibulum ac libero eu libero faucibus
vestibulum. Cras lorem urna, venenatis ut, rutrum vel, dapibus et,
magna. Maecenas convallis hendrerit mauris. Maecenas ut nibh id erat
hendrerit pretium. Pellentesque at libero. Vestibulum placerat. In hac
habitasse platea dictumst. Aenean euismod commodo mauris. In turpis
sem, dignissim non, viverra consequat, posuere ac, risus. Donec quis
quam quis lectus laoreet hendrerit. Curabitur vestibulum leo sed
massa. Fusce accumsan nulla vel mauris. Sed elementum dolor lobortis
mauris. Nunc sodales nunc vel purus. Donec vel sapien at diam dictum
faucibus. </p>
</div>
</body>
</html>
 
R

richard

Hi,

I'm wondering if someone can help me with something that 'should' be
easy. What's more, it's something that I've done a dozen times, but
can't for the life of me figure out what I'm missing 'today'.

I'm trying to center a <div> using 'auto' margins.

The following works fine in FF, Chrome, Opera etc (in that the
#content block is centered). But not in IE.

Can someone please point out to me what I'm missing?

Thanks very much in advance,


Damien



---------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>

<STYLE type="text/css">
* {border:0px; margin:0px;}
Click to expand...

WTF is the * in reference to?
I don't believe there is a pseudo class like that.

What I'd do is quite simple.
Make 3 columns, set column 1 and 3 to a certain width like 30% or
whatever.
No width on column 2.
Now column 2 should appear to be centered.
 
N

Nick Theodorakis

Hi,

I'm wondering if someone can help me with something that 'should' be
easy. What's more, it's something that I've done a dozen times, but
can't for the life of me figure out what I'm missing 'today'.

I'm trying to center a <div> using 'auto' margins.

The following works fine in FF, Chrome, Opera etc (in that the
#content block is centered). But not in IE.

Can someone please point out to me what I'm missing?

Thanks very much in advance,

Damien
Click to expand...
....

That doctype puts your document in quirks more; thus IE (versions 6-7,
at least) will behave like older versions (like 5) that mishandled
CSS. Choose a doctype that puts your document in standards mode and IE
(version 6 and 7) will behave.

See:

<http://gutfeldt.ch/matthias/articles/doctypeswitch.html>

for help in choosing a doctype.

Nick
 
C

C A Upsdell

Hi,

I'm wondering if someone can help me with something that 'should' be
easy. What's more, it's something that I've done a dozen times, but
can't for the life of me figure out what I'm missing 'today'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Click to expand...

The DOCTYPE lacks a URL, so IE (and other browsers) will render the page
in quirks mode, possibly including IE's broken model for centering
blocks. Try using ...

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

.... if you want HTML 4.01 Transitional in standards mode.

Of course this will not work with IE5, but I assume that you know the
fix for this.
 
D

dorayme

I'm wondering if someone can help me with something that 'should' be
easy. What's more, it's something that I've done a dozen times, but
can't for the life of me figure out what I'm missing 'today'.

I'm trying to center a <div> using 'auto' margins.

The following works fine in FF, Chrome, Opera etc (in that the
#content block is centered). But not in IE.

Can someone please point out to me what I'm missing?
....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
Click to expand...

Replace yours with more like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

Or better still:

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

<html>
 
D

damiensawyer

Thanks guys - that's great.

Believe it or not, in 10 years on and off writing HTML, I've never
actually come across DOCTYPE. It was just one of those lines that I
left in because it was inserted by the HTML editor.

I'll have a read about it.

I have to admit, I felt a bit stupid asking this question - but I'm
seriously glad that I did now :)


Damien.
 
D

dorayme

<STYLE type="text/css">
* {border:0px; margin:0px;}
Click to expand...

WTF is the * in reference to?
I don't believe there is a pseudo class like that.
[/QUOTE]

TF it is is the universal selector.
What I'd do is quite simple.
Click to expand...

That is what any good truck driver would do when he knows no better. You
are handy and cannot be stopped from achieving your goals when out on
the road. I admire this.
Make 3 columns, set column 1 and 3 to a certain width like 30% or
whatever.
No width on column 2.
Now column 2 should appear to be centered.
Click to expand...

OP, I beg you not to do this... <g>
 
R

rf

richard said:
WTF is the * in reference to?
I don't believe there is a pseudo class like that.
Click to expand...

<sigh/> Yes there is. It's the Universal selector.
http://www.w3.org/TR/CSS21/selector.html#pattern-matching

You might read the rest of that document while you are there.
What I'd do is quite simple.
Make 3 columns, set column 1 and 3 to a certain width like 30% or
whatever.
No width on column 2.
Now column 2 should appear to be centered.
Click to expand...

That is not simple.
 
A

Andy

Hi,

I'm wondering if someone can help me with something that 'should' be
easy. What's more, it's something that I've done a dozen times, but
can't for the life of me figure out what I'm missing 'today'.

I'm trying to center a <div> using 'auto' margins.

The following works fine in FF, Chrome, Opera etc (in that the
#content block is centered). But not in IE.

Can someone please point out to me what I'm missing?

Thanks very much in advance,


Damien



---------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>

<STYLE type="text/css">
* {border:0px; margin:0px;}
body {margin:10px;}

#content
{
background-color:Yellow;
margin-left:auto;
margin-right:auto;
width:300px;
}

</STYLE>

</head>


<body>
<div id="content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec commodo magna nec purus. Integer sem nunc, vulputate at, aliquet
ut, eleifend ut, ante. Vivamus et sapien ut arcu ornare accumsan.
Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Sed quis erat sed ligula rutrum
pulvinar. Nam placerat arcu ut arcu. Sed posuere, mi sit amet commodo
vulputate, mauris lorem pretium purus, volutpat venenatis arcu nunc ut
orci. Suspendisse potenti. Mauris congue. Sed felis. Ut pellentesque
lectus quis quam. In lacinia lacus nec metus.</p>
<p>Nunc eu diam. Praesent et diam vel justo pellentesque
malesuada. Donec sed diam condimentum neque auctor molestie. Donec
condimentum commodo erat. Vestibulum ac libero eu libero faucibus
vestibulum. Cras lorem urna, venenatis ut, rutrum vel, dapibus et,
magna. Maecenas convallis hendrerit mauris. Maecenas ut nibh id erat
hendrerit pretium. Pellentesque at libero. Vestibulum placerat. In hac
habitasse platea dictumst. Aenean euismod commodo mauris. In turpis
sem, dignissim non, viverra consequat, posuere ac, risus. Donec quis
quam quis lectus laoreet hendrerit. Curabitur vestibulum leo sed
massa. Fusce accumsan nulla vel mauris. Sed elementum dolor lobortis
mauris. Nunc sodales nunc vel purus. Donec vel sapien at diam dictum
faucibus. </p>
</div>
</body>
</html>
Click to expand...


Hi Damien,

I don't know if you ever fixed this but my working solution is to enclose
your content div with another div like so...


<div align="center">
<div id="content">
Content goes here
</div>
</div>


....Hope this helps.

Andy
 
B

Bergamot

Ben said:
Not just deprecated but wrong. Align is only supposed to align the
inline contents of a div according to the HTML specification.
Click to expand...

Yes, but this particular sequence of divs was once commonly used to get
IE 5.x to center that #content div. Those days are long past now.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

a test posting 0
How to detect iframe doc change and loading 0
repeat-y doesn't work in IE but works fine on other browsers help please 0
a test posting 0
[CSS] IE Bug : heigth &margin-right & float incompatible 1
a test posting 1
a test posting 0
How to detect iframe's doc change/loading ? 3

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 642

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top