css/javascript gurus - help needed, simple question re: centering objects

[LordSnailz]

document.getElementById('gallery').style.display = 'block';

Is there anyway to add code in there to center my object? From what I understand, the above replaces id=gallery style to display=block, right?


Originally, I have the following html code -

<table style="width: 790px; text-align: center; margin-left: auto; margin-right: auto; background-color: rgb(165, 154, 132);" cellspacing="7">

All the table items are centered but when add the id=gallery, everything is left aligned --

<table style="width: 790px; text-align: center; margin-left: auto; margin-right: auto; background-color: rgb(165, 154, 132);" id="gallery" cellspacing="7">

In my css, I have

table#gallery
{
margin-left: auto;
margin-right: auto;
display:none;
}

The javascript is suppose to switch it from display:none to block right? It works but all my cell contents are still left aligned, instead of centered.

Any suggestions is greatly greatly appreciated, I've tried everything possible and I'm a css/js noob

 

[LordSnailz]

bump!

 

[PseudoKnight]

Maybe I'm missing something obvious but I guess it could be a rendering issue. Have you tried it with different browsers?

 

[LordSnailz]

PseudoKnight -
weird, you're right, it works in IE but not in FF. Any suggestions on how I can get this to work in FF as well? Hope this narrows down the problem a bit.

 

[imported_Rogie]

How are you calling your function? Got your test page anywhere?

 

[LordSnailz]

This is my function to set the display to block.

function blah() {
document.getElementById('loadingpic').style.display = 'none';
document.getElementById('gallery').style.display = 'block';
}

what really bugs me is that it looks center on IE but not FF. Is there some css or js bug with FF?
I'll work on getting a test page up soon.

Again any help to resolve this is greatly appreciated!!

 

[LordSnailz]

I seems like there's a difference between how FF and IE treats
table#gallery
{
display:none;
text-align: center;
margin-right:auto;
margin-left:auto;
}

It's centered on IE but not FF

 

[LordSnailz]

d'oh ... nvm. it doesn't work

Test link again --
-removed- all fixed, thanks to Rogie!

It's centered in IE but not FF

 

[Rip the Jacker]

The culprit is prototype.js, not the CSS or HTML file(s).

 

[LordSnailz]

hrmm, thanks rip, any suggestions, on how I can fix it?

 

[imported_Rogie]

Set tbody, tr, and td to use display:block for the style.
Then add a padding:10px or something to your tbody.
Maybe take out those last few br unless you put another pic there.
And stuff.

 

[LordSnailz]

rogie: nope, tried it and it doesn't work, same thing, centered on IE but not in FF.

 

[imported_Rogie]

That centered it for me. Tested on IE6/7, FF, Mozilla, Opera, Netscape.

Update your test with those changes and let me see. Or pm me if you got AIM/Yahoo.

 

[Rip the Jacker]

Originally posted by: Rogie
That centered it for me. Tested on IE6/7, FF, Mozilla, Opera, Netscape.

Update your test with those changes and let me see. Or pm me if you got AIM/Yahoo.

Were you using the JS files he was when you were testing?

 

[xtknight]

As of now, on that page, everything is centered for me in:

Windows/IE6
Windows/Firefox 1.5
Windows/Opera 9
Linux/Firefox 1.5
Linux/epiphany-browser

 

[imported_Rogie]

Yes, I was using the JS files. He just typoed one of the styles I suggested the first time. It's fine now.

 

[Rip the Jacker]

That has to be the weirdest code I've ever seen. Starts out all fine with lowercase modern xhtml and then has a load of inline styles, and unnecessary divs + tables (which are uppercase).
=_

 

[dukdukgoos]

You shouldn't use display: block on a table in a modern browser, they have a special display property called display: table. Rather than setting style.display = "block" use style.display = "", that will set it back to the default value of the property (in this case, "table").

 

[LordSnailz]

hey guys, thanks for the replies ... finally got it working thanks to Rogie!!
Yeah, I know everything is butcher together ... total noob here

 

[imported_Rogie]

Originally posted by: dukdukgoos
You shouldn't use display: block on a table in a modern browser, they have a special display property called display: table. Rather than setting style.display = "block" use style.display = "", that will set it back to the default value of the property (in this case, "table").

Even better. Then again I don't like using tables at all anymore.