Table won't center in Firefox

Question

This is a new post in regards to a previous problem. I have
made some changes, but have been unable to find a complete solution
yet. Maybe someone can help.
I originally created a template using tables, and have since
redesigned it using CSS for most of my layout (in attempts to speed
up the loading time.) My main problem is in how Firefox (I haven't
checked this page with a Mac yet either) reads the page. It tries
to put the content left aligned (this was not reflected in the
document after I made my first post about this issue becasue I
tried to make some adjustments unsuccessfully). Here's the main
issue:
I have tried to place a table to hold the editable region of
my template in the <div> named #maincontent. Here's what
#maincontent looks like:
#maincontent {
background-image:
url(images/background/adoption-bkgd-mid-3.gif);
background-repeat: repeat-y;
background-position: center;
position: absolute;
width: 100%;
top: 305px;
text-align: center;
visibility: visible;
I want this table to appear centered in all browsers. How can
I acheive that?
If you look at the site in IE7 everything looks fine, but in
Firefox the table is left aligned (now that it has been changed
back).
Here's the site:
www.robertandsharon.com
Thanks again,
Sharon

Answer 1

Don't you also need to add a CSS width? Seems like I always
need to do
that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Give the table in the 'maincontent' <div> an 'id'
named 'mainTable' see
> code below.
>
>
> <div id="maincontent">
> <table border="0" id="mainTable" cellpadding="0"
cellspacing="0"
> width="800">
>
> Then add this css to your css style sheet.
>
> #mainTable {
> margin-left: auto;
> margin-right: auto;
> }
>
>
>
>
>
>
>
>
>
>
>
> sharonw wrote:
>> This is a new post in regards to a previous problem.
I have made some
>> changes, but have been unable to find a complete
solution yet. Maybe
>> someone can help.
>>
>> I originally created a template using tables, and
have since redesigned
>> it using CSS for most of my layout (in attempts to
speed up the loading
>> time.) My main problem is in how Firefox (I haven't
checked this page
>> with a Mac yet either) reads the page. It tries to
put the content left
>> aligned (this was not reflected in the document
after I made my first
>> post about this issue becasue I tried to make some
adjustments
>> unsuccessfully). Here's the main issue:
>>
>> I have tried to place a table to hold the editable
region of my template
>> in the <div> named #maincontent. Here's what
#maincontent looks like:
>>
>> #maincontent {
>> background-image:
url(images/background/adoption-bkgd-mid-3.gif);
>> background-repeat: repeat-y;
>> background-position: center;
>> position: absolute;
>> width: 100%;
>> top: 305px;
>> text-align: center;
>> visibility: visible;
>> }
>>
>> I want this table to appear centered in all
browsers. How can I acheive
>> that?
>>
>> If you look at the site in IE7 everything looks
fine, but in Firefox the
>> table is left aligned (now that it has been changed
back).
>>
>> Here's the site: Thanks again,
>> Sharon
http://www.robertandsharon.com
>>
>