Re: FN-FORUM: Css horizontal alignment (mark II)

date posted 3rd September 2007 23:56

Hi John

Hope I'm not too late being a Monday it was a nightmare getting home today
but anyways.... If you've not already sorted your problem I've tested a
solution and it works, see below:

In your css replace everything above (and including) .centeralign with:

****Please make a copy of your original code first, one just in case and two
so that you can compare them and see what changes were made to make it work
(and for everyone else the reason margin-left: auto; margin-right: auto is
use instead of margin: 0 auto; is so that you can specify a top and bottom
margin)****

body {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url('images/background.gif');
background-position: 50% 0%;
background-repeat: no-repeat;
background-color: #d6d6d6;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none
}

#page
{
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
top: 0px;
left: 0px;
}

.centrealign {
width: 700px;
background-color: transparent;
text-align: center;
padding: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
}

.bottompara
{
width: 680px;
padding-right: 10px;
margin: 0px;
}

Then in your html wrap everything on the page inside a div called page:




Also in IE7 a large white box appears at the top, wasnt sure if that was
meant to be there so I gave .centrealign a transparent background instead of
white to remove it, change it back if you want a white box and also give the
class .top a white background too so that its white in firefox.


*** This is for if the top white box is to be removed [begin]***

Then give your paragraph at the bottom a class of class="bottompara", if
you do not you will see why. (This si for IE7, doesnt affect Firefox)

*** This is for if the top white box is to be removed [end]***


This works for IE7 & firefox 2, not tested in IE6 but it should work, ive
not taken the complete code of a site I did that centers in IE6 but most of
it so if it doesnt work in IE6 I'm sure we can implement the rest of the
code for you.

Just one more thing, you need to watch you padding and margins, they work
different between firefox and IE.


Hope that helps, let me know.

Martin



----- Original Message -----
From: "John Deaville" [EMAIL REMOVED]
To: [EMAIL REMOVED]
Sent: Monday, September 03, 2007 4:53 PM
Subject: Re: FN-FORUM: Css horizontal alignment (mark II)


>
> Thanks for all the replies
>
> I am sure that part of the problem is that I have modified my original
> html
> and css from what started off as another project, when I shjould have just
> started from scratch - which is what I will do when I actually get around
> to
> redesigning the site proper
>
> And then I am sure I will be asking you more questions !
>
> Thanks again
>
>
> john
>
>
> --
> Freelancers, contractors earn more with Prosperity4
> Call 0870 870 4414 or visit www.prosperity4.com
> and benefit from Inland Revenue approved expenses today.
>
> To advertise here: http://www.freelancers.net/advertising.html
>
>