How (the heck) do you center a Web page in IE8 (for the umpteenth time)?
in [CSS]
|
Prev: Mason's new web site. Comments?
Next: How (the heck) do you center a Web page in IE8 (for the umpteenth time)?
From: Nick Theodorakis on 12 Mar 2010 18:57 On Mar 12, 6:06 pm, "Jim" <j.coll...(a)cross-comp.com> wrote: > I know this topic is old, but has anyone found a way to center a > Web page in IE8 without turning on Compatibility Mode that > also centers the page in earlier versions of IE and of course > works in Firefox, etc? > > Jim This is really a stylesheet question, so followups set accordingly. Assuming you mean to horizontally center the content, the way to do it is to make the left and right margins equal. One way is simply to apply the same width to the left and right margins, but allow the content to adjust. For example, in your stylesheet you might use: body { margin: 0 10%; } Alternatively, define the width of the content and let the margins be set to auto: body { width: 80%; margin: 0 auto; } The first will center the body content in most browsers, new and old, in both standards and quirks mode, whereas the second will need to be in standards mode in modern browsers. Nick -- Nick Theodorakis nick_theodorakis(a)hotmail.com contact form: http://theodorakis.net/contact.html
From: Jonathan N. Little on 13 Mar 2010 19:10 Mason C wrote: > On Fri, 12 Mar 2010 15:57:05 -0800 (PST), Nick Theodorakis<nick.theodorakis(a)gmail.com> wrote: > >> On Mar 12, 6:06 pm, "Jim"<j.coll...(a)cross-comp.com> wrote: >>> I know this topic is old, but has anyone found a way to center a >>> Web page in IE8 without turning on Compatibility Mode that >>> also centers the page in earlier versions of IE and of course >>> works in Firefox, etc? >>> >>> Jim >> >> This is really a stylesheet question, so followups set accordingly. >> >> Assuming you mean to horizontally center the content, the way to do it >> is to make the left and right margins equal. One way is simply to >> apply the same width to the left and right margins, but allow the >> content to adjust. For example, in your stylesheet you might use: >> >> body >> { >> margin: 0 10%; >> } >> >> Alternatively, define the width of the content and let the margins be >> set to auto: >> >> body >> { >> width: 80%; >> margin: 0 auto; >> } >> >> The first will center the body content in most browsers, new and old, >> in both standards and quirks mode, whereas the second will need to be >> in standards mode in modern browsers. >> >> Nick > > Neither of them center for me but this works for my 800px-wide page: > > <body style="min-width: 40px; max-width: 800px; margin: auto;"> > > but I'm puzzled by the whole centering thing. Should one center or not? > Just how did either of Nick's examples fail you? Either set the width on a block AND set margins to auto, or set margins with the same value AND have the blocks width set to auto (default). <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-language" content="en-us"> <title>template</title> <style type="text/css"> body { margin: 0 10%; } p { background-color: #eee; } </style> </head> <body> <p> <em>There should be even margins both left and right sides of this paragraph.</em> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo volutpat augue. Morbi hendrerit, lorem vel iaculis congue, orci est vehicula mi, scelerisque hendrerit urna leo tempus justo. Integer lacinia, dolor id lacinia pulvinar, lacus odio tempus mauris, sit amet porta eros justo id mauris. Nam dolor erat, cursus non, fringilla commodo, convallis scelerisque, massa. Duis ac ligula. Nulla aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis pede non lectus. Ut interdum eleifend felis. Donec erat lectus, venenatis at, accumsan non, eleifend ac, nibh. Praesent hendrerit tempor eros. In vulputate fringilla felis. </p> </body> </html> or <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-language" content="en-us"> <title>Set Margin</title> <style type="text/css"> body { margin: 0 10%; } p { background-color: #eee; } </style> </head> <body> <p> <em>There should be even margins both left and right sides of this paragraph.</em> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo volutpat augue. Morbi hendrerit, lorem vel iaculis congue, orci est vehicula mi, scelerisque hendrerit urna leo tempus justo. Integer lacinia, dolor id lacinia pulvinar, lacus odio tempus mauris, sit amet porta eros justo id mauris. Nam dolor erat, cursus non, fringilla commodo, convallis scelerisque, massa. Duis ac ligula. Nulla aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis pede non lectus. Ut interdum eleifend felis. Donec erat lectus, venenatis at, accumsan non, eleifend ac, nibh. Praesent hendrerit tempor eros. In vulputate fringilla felis. </p> </body> </html> -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Mason C on 13 Mar 2010 22:29
On Sat, 13 Mar 2010 19:10:06 -0500, "Jonathan N. Little" <lws4art(a)gmail.com> wrote: forgive the top post, purists. My page has a fixed width: sized boxes in columns on left and right and an image in the center. The "margin: 0 10%" does not center it except by accident. I think that works only if the page width is flexible. I can center, but *should* I ? Or should I let it reside on the left side of the screen as so many pages do? MasonC >Mason C wrote: >> On Fri, 12 Mar 2010 15:57:05 -0800 (PST), Nick Theodorakis<nick.theodorakis(a)gmail.com> wrote: >> >>> On Mar 12, 6:06 pm, "Jim"<j.coll...(a)cross-comp.com> wrote: >>>> I know this topic is old, but has anyone found a way to center a >>>> Web page in IE8 without turning on Compatibility Mode that >>>> also centers the page in earlier versions of IE and of course >>>> works in Firefox, etc? >>>> >>>> Jim >>> >>> This is really a stylesheet question, so followups set accordingly. >>> >>> Assuming you mean to horizontally center the content, the way to do it >>> is to make the left and right margins equal. One way is simply to >>> apply the same width to the left and right margins, but allow the >>> content to adjust. For example, in your stylesheet you might use: >>> >>> body >>> { >>> margin: 0 10%; >>> } >>> >>> Alternatively, define the width of the content and let the margins be >>> set to auto: >>> >>> body >>> { >>> width: 80%; >>> margin: 0 auto; >>> } >>> >>> The first will center the body content in most browsers, new and old, >>> in both standards and quirks mode, whereas the second will need to be >>> in standards mode in modern browsers. >>> >>> Nick >> >> Neither of them center for me but this works for my 800px-wide page: >> >> <body style="min-width: 40px; max-width: 800px; margin: auto;"> >> >> but I'm puzzled by the whole centering thing. Should one center or not? >> > >Just how did either of Nick's examples fail you? Either set the width on >a block AND set margins to auto, or set margins with the same value AND >have the blocks width set to auto (default). > ><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd"> ><html> ><head> > <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> > <meta http-equiv="content-language" content="en-us"> > <title>template</title> > ><style type="text/css"> >body >{ >margin: 0 10%; >} >p >{ >background-color: #eee; >} > ></style> > ></head> ><body> > ><p> ><em>There should be even margins both left and right sides of this >paragraph.</em> Lorem ipsum dolor sit amet, consectetuer adipiscing >elit. Ut commodo volutpat augue. Morbi hendrerit, lorem vel iaculis >congue, orci est vehicula mi, scelerisque hendrerit urna leo tempus >justo. Integer lacinia, dolor id lacinia pulvinar, lacus odio tempus >mauris, sit amet porta eros justo id mauris. Nam dolor erat, cursus non, >fringilla commodo, convallis scelerisque, massa. Duis ac ligula. Nulla >aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis pede non >lectus. Ut interdum eleifend felis. Donec erat lectus, venenatis at, >accumsan non, eleifend ac, nibh. Praesent hendrerit tempor eros. In >vulputate fringilla felis. ></p> > ></body> ></html> > >or > ><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd"> ><html> ><head> ><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> ><meta http-equiv="content-language" content="en-us"> ><title>Set Margin</title> > ><style type="text/css"> >body { margin: 0 10%; } >p { background-color: #eee; } > ></style> > ></head> ><body> ><p> ><em>There should be even margins both left and right sides of this >paragraph.</em> Lorem ipsum dolor sit amet, consectetuer adipiscing >elit. Ut commodo volutpat augue. Morbi hendrerit, lorem vel iaculis >congue, orci est vehicula mi, scelerisque hendrerit urna leo tempus >justo. Integer lacinia, dolor id lacinia pulvinar, lacus odio tempus >mauris, sit amet porta eros justo id mauris. Nam dolor erat, cursus non, >fringilla commodo, convallis scelerisque, massa. Duis ac ligula. Nulla >aliquet. Vivamus porttitor ligula dictum elit. Ut sagittis pede non >lectus. Ut interdum eleifend felis. Donec erat lectus, venenatis at, >accumsan non, eleifend ac, nibh. Praesent hendrerit tempor eros. In >vulputate fringilla felis. ></p> > ></body> ></html> |