|
Simple Block Centering in IE
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> |
Re: Simple Block Centering in IE
On Sun, 23 Nov 2008 17:51:13 -0800 (PST), damiensawyer@yahoo.com.au
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. |
Re: Simple Block Centering in IE
On Nov 23, 8:51*pm, damiensaw...@yahoo.com.au 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 nick_theodorakis@hotmail.com contact form: http://theodorakis.net/contact.html |
Re: Simple Block Centering in IE
damiensawyer@yahoo.com.au 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. |
Re: Simple Block Centering in IE
In article
<0dc7a9a8-4a6e-4f21-a67d-a75355c21d45@v13g2000yqm.googlegroups.com>, damiensawyer@yahoo.com.au 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 |
Re: Simple Block Centering in IE
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. |
Re: Simple Block Centering in IE
In article <jp2ki4lh21hterco8r41rojg4om3e6995u@4ax.com>,
richard <member@newsguy.com> 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 |
Re: Simple Block Centering in IE
"richard" <member@newsguy.com> wrote in message news:jp2ki4lh21hterco8r41rojg4om3e6995u@4ax.com... > On Sun, 23 Nov 2008 17:51:13 -0800 (PST), damiensawyer@yahoo.com.au > 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. |
Re: Simple Block Centering in IE
<damiensawyer@yahoo.com.au> wrote in message news:0dc7a9a8-4a6e-4f21-a67d-a75355c21d45@v13g2000yqm.googlegroups.com... > 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 |
Re: Simple Block Centering in IE
Andy wrote: > <damiensawyer@yahoo.com.au> wrote in message > news:0dc7a9a8-4a6e-4f21-a67d-a75355c21d45@v13g2000yqm.googlegroups.com... >> >> 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 |
| All times are GMT. The time now is 08:12 PM. |
Powered by vBulletin®. Copyright ©2000 - 2013, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.