• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

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

L

LordSnailz

Diamond Member
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 🙁
 
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.
 
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!!
 
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
 
d'oh ... nvm. it doesn't work 🙁

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

It's centered in IE but not FF
 
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.
 
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.
 
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.
Click to expand...

Were you using the JS files he was when you were testing?
 
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).
=_
 
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").
 
hey guys, thanks for the replies ... finally got it working thanks to Rogie!!
Yeah, I know everything is butcher together ... total noob here 🙂
 
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").
Click to expand...

Even better. Then again I don't like using tables at all anymore. 😱
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top