Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Simple Block Centering in IE

Reply
Thread Tools

Simple Block Centering in IE

 
 
damiensawyer@yahoo.com.au
Guest
Posts: n/a
 
      11-24-2008
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>
 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      11-24-2008
On Sun, 23 Nov 2008 17:51:13 -0800 (PST), http://www.velocityreviews.com/forums/(E-Mail Removed)
wrote:

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


 
Reply With Quote
 
 
 
 
Nick Theodorakis
Guest
Posts: n/a
 
      11-24-2008
On Nov 23, 8:51*pm, (E-Mail Removed) wrote:
> 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">

....

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

--
Nick Theodorakis
(E-Mail Removed)
contact form:
http://theodorakis.net/contact.html

 
Reply With Quote
 
C A Upsdell
Guest
Posts: n/a
 
      11-24-2008
(E-Mail Removed) wrote:
> 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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-24-2008
In article
<(E-Mail Removed)>,
(E-Mail Removed) wrote:

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

--
dorayme
 
Reply With Quote
 
damiensawyer@yahoo.com.au
Guest
Posts: n/a
 
      11-24-2008
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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-24-2008
In article <(E-Mail Removed)>,
richard <(E-Mail Removed)> wrote:

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


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>

--
dorayme
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-24-2008

"richard" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Sun, 23 Nov 2008 17:51:13 -0800 (PST), (E-Mail Removed)
> wrote:


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


<sigh/> Yes there is. It's the Universal selector.
http://www.w3.org/TR/CSS21/selector....ttern-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.


 
Reply With Quote
 
Andy
Guest
Posts: n/a
 
      11-24-2008

<(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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

 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      11-24-2008

Andy wrote:
> <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>>
>> I'm trying to center a <div> using 'auto' margins.

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


That's deprecated markup, which *nobody* should be recommending these day.

> ...Hope this helps.


I doesn't, even if your target is IE 5x.

--
Berg
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Fo:Block can you check to see if a block contains any text by using the block id? morrell XML 1 10-10-2006 07:18 PM
Problem with enterprise application block - data block Showjumper ASP .Net 1 03-19-2005 03:48 PM
Block DIV within a block DIV? Noozer HTML 3 01-06-2005 10:24 PM
CSS2 - Centering block boxes Chris Beall HTML 8 07-20-2003 07:26 PM



Advertisments