- see footer for list info -<Ok, so I was sloppy Paul, here's a less sloppy answer... code is from ALA website, I've added some comments in so you can spot the essential hack bits:
<style> body {
margin: 0;
padding: 0;
border: 0;
text-align:center;
}
#centerContent {
margin: 10px auto;
padding: 0;
border: 1px solid #566;
width: 599px; /* box model hack
non CSS compliant browsers don't recognise the characters in the voice-family value
and choke. Then you set a width minus padding/margin/border because they also render
box model differently
*/ voice-family: "\"}\"";
voice-family:inherit;
width: 597px; }
/* Opera also renders bm diff but picks up the voice-family so the following is a hack
just for Opera */
html>#centerContent {width: 597px;}
</style>
<div id="centerContent"> hullo </div>
This gives you centred, fixed width div across all browsers.. for a flexible width div then percentage side margins are the way forward, with very small hacks.
HTH d p.s. shouldn't this be on the scripting list Russ?? nudge nudge
Paul Johnston wrote:
- see footer for list info -<On Fri, 2004-12-10 at 12:03 +0000, Damian Watson wrote:
- see footer for list info -<One way is to have body style of text-align:center then specify a fixed width for your div. This will center all content however so you need a style on the div: text-align:left.
This (unfortunately) is NOT the correct way to do it! This is broken in various browsers.
Try this in both Firefox and IE and you'll see what I mean.
---code--- <html> <head> <style type="text/css"> body { text-align: center; } .centeredDiv { width: 80%; text-align: left; border: 1px solid #666666; } </style> </head> <body>
<div class="centeredDiv"> <p>Hello!</p> </div>
</body> </html> ---code---
The div does NOT "center" align at all! There is actually no simple way of "centering" content using cross-browser CSS in XHTML (wouldn't it be nice if there was).
For more info on how to "center" properly, take a look at this:
http://www.sitepoint.com/forums/printthread.php?t=213250
There are many and varied CSS things out there, but the basic idea is that using:
margin: 0px auto;
will center a div in Firefox (and most others) and for IE you do this:
body { text-align: center; } #container { margin-left: auto; margin-right: auto; text-align: left; }
This isn't entirely perfect, but works a darn site better than what was previously emailed and works in Firefox!
Paul
_______________________________________________
For details on ALL mailing lists and for joining or leaving lists, go to http://list.cfdeveloper.co.uk/mailman/listinfo
-- CFDeveloper Sponsors:-
- Hosting provided by www.cfmxhosting.co.uk -< - Forum provided by www.fusetalk.com -< - DHTML Menus provided by www.APYCOM.com -< - Lists hosted by www.Gradwell.com -< - CFdeveloper is run by Russ Michaels, feel free to volunteer your help -<
