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>
 
Ad

Advertisements

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;}

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
....

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">

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">

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.
 
Ad

Advertisements

D

dorayme

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

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.

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.

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.

<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.

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>


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
 
Ad

Advertisements

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.

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.
 
Ad

Advertisements


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

Top