I’ve wasted WAY too much time trying to figure this out on my own, so am appealing for help here. This is driving me crazy.
I am building a page I can use as a template and it needs two tables: one will hold 10 thumbnails which will populate an iframe with a large version of each pic. The other table is a pedigree. I know tables are supposedly passé and would gladly accept suggestions on some non-table way to build the thumbnail grid but the pedigree pretty much needs to stay as a table because it’s … well … a data table.
My problem is that no matter what I try, neither table will centre within the parent div. I’ve even put each table in its own div and it appears to be centred in DW Design View but in Live View or in a browser the tables are flush left. I’ve even taken the standard margin: 0 auto; and changed it to margin: 0 50px; but nope - it’s determined to stay flush left.
Could someone please be so kind as to look at the file(s) and tell me what I’m not seeing. The culprit file is at http://goto-hwl.com/Savladai/EMPTY-individual.php and the css file is at http://goto-hwl.com/Savladai/SavStyles.css. Thanks so much!!
It’s very simple, in your CSS simply add the following selector to your CSS file.
#thumbstable table {
margin: 0 auto;
}
The DIVs (pedtable, thumbstable) around the tables are redundant. Get rid of them. That should also center your tables, btw. You can align text left inside the table, if you want)
(if you ABSOLUTELY NEED those divs for some unknown reason… (as I said before they seem redundant in the current markup/content… note this:
#pedtable {
text-align: left;/the table was proably already centered at this point…/
margin: 0px 50px; /* this becomes redundant*/
float: left; /* get rid of this
}
so what you really needed was to give those containers the SAME WIDTH as the TABLE THEY CONTAIN, and margin:0 auto.
Hope that helps
Hmmm - what happened to the post I wrote before this one, thanking both of you for your quick responses?!! I also explained a bit of what I’d been trying but now it’s all gone. Weird. Anyway, the following is my second response to your two posts:
Well, I managed to get rid of the divs with no disastrous results but I cannot use auto instead of 50px. If I change it to auto, the tables snap to the left. The thumbnail grid I can leave with the 50px because it (hopefully) will always have at least 5 thumbnails across. The pedigree table, though, really does need to be auto-positioned because some of the dog names are really long and some really short. The only one I’ve filled out so far actually had to have no horizontal positioning because it takes up the full 700px width. Others I know will only need 500 to 600px, which is why I want to use auto.
I guess I’ll just have to live with the pedigree to the left. It looks awful but I really can’t spend any more time fiddling with it.
I have to keep the floats, too, because even after removing the divs, if I remove the floats I can’t even see the two tables in Design view. :>(
Stop designing in design view. That’s not a real browser. It’s a code editing program. If it displays like that in FF/Opera/Chrome/IE, then FINE. Fix it or leave it, but don’t assume that design view represents an accurate presentation of browsers nowadays. Design views’ engine is based of REALLYYYYYYYY OLD opera.
If the table snaps to the left hwne using margin:auto, something is up. Either the display value isn’t table, it’s floated, or absolute position, or there just isn’t enoug hwidth set at all.
I’m going to try to re-write my original response to this, since the second one doesn’t explain the problem I was having. If I don’t use the float:left attribute the tables fly off the page. At least when I had the redundant divs (which I knew were redundant but was desperate) I could still see the tables, way over to the right. Without the divs I see nothing when I remove the floats.
There is something really strange happening with this page as a whole because even the encompassing “individuals” div was mis-behaving until I added the overflow:hidden attribute. Before that, the lines DW draws to depict a div would only encompass the top graphic and the text below it. The iframe started within the div but then dangled below it and the two tables floated around under the iframe but appeared to be totally outside the div, even though in code view the </div> was definitely after the tables. I even went in and carefully counted all the beginning and ending div tags to make sure I wasn’t missing one somewhere but all are intact, as far as I can see.
Now I’m going to copy this before I post it, so I don’t have to type it a third time if it gets lost again. :>)
Thanks again to both of you for your help.
I’m well aware of that, Ryan, and don’t rely on Design view to tell whether a page works or not. As I mentioned in my original post, it’s in a browser that they don’t display correctly - I always check the pages in one or more (I have about 6) browsers. That’s where the pages break. It’s just a lot faster for me to type in Design View than in Code View and since some of my dogs are from Sweden, it’s hard enough to type their names even in Design View!
if tables were “flying off” I then assuome there might have been some negative right margin on the previous element involved.
Back to centering tables tho. In order to center with the margin:0 auto method; the element beign centered must:
- Not be floated… it really defeats the purpose of float anyway.
- be given explicit with one way or another;
There is something really strange happening with this page as a whole because even the encompassing “individuals” div was mis-behaving until I added the overflow:hidden attribute.
it wasn’t misbehaving. That’s the way its supposed to be. Since you FLOATED the tables they were removed from the normal flow… as such they are not countet in the width of the parent. What you have ran into is a way to auto clear floated elements ( many a member would have recommended that to you), BUT to see what I mean (AND ONLY TO SEE WHAT I MEAN) … remove overflow:hidden; and add <div style="clear:both></div> before closingthe DIV in question and you get the same result just not as graceful as with overflow:hidden. Also floating the container div willmake it auto clear floats… but that leaves you with a floated container div so … not handy.
Thanks dresden_phoenix! Your post kicked my brain over into a different channel and I’ve fixed the page. I started by removing the “individuals” div (that was the one with overflow:hidden on it) AND the iframe plus all the various floats. Surprise - the tables behaved once I changed the 50px to auto. Then I added back in the iframe and … hmmm. Things were messed up again, so I wrapped the iframe in <p></p> tags and bingo - it was centred and everything else stayed centred as well, so I added back in the individuals div (without the float and overflow) and the page stayed put. Thanks so much for heading me in the right direction!