I've been creating a new site using Firefox 3.0, now that the site is finished on Firefox I've set about making it compatible with Internet Explorer. My problem is that I want to be able to center both vertically and horizontally a table within a cell of another table. This works great in Firefox using a more complex version of below: <table> <tr align="center"> <td valign="middle"> <table> <tr><td>CONTENT</td></tr> </table> </td> </tr> </table> Code (markup): I have infact three tables within tables using this method and the first one works fine. It's the second which causes problems in Internet Explorer. On Internet explorer though the inside table is left justified. When searching the internet for a solution I came across a thread on these forums from 2005. [Topic:11742 (wish I could post you a link instead of a reference)] - so I tried the suggestion of using <table style="margin-left:auto;margin-right:auto"> Code (markup): and got no joy. My page is has no DOCTYPE reference as I found if I applied one my first level of "table within a table" didnt work and neither did it get the margin-left code working... so I'm doing without until I work out where I've gone wrong. I expect you'll say that there's a much better way of doing it rather than using tables such as I have. I'd like to know how to do it better next time but would really appreciate a solution for my method this time Thanks for anyone who can help and sorry for the extra long post!
You should be using Divisions, google for Divs or the <div> tag. Basically dividing your page into blocks. Combined with CSS it's the web standard today.
Tables are still used to this day... I use them all the time. To be honest... I don't see why this won't work. You got the code for the rest of the page? I might be able to figure it out then.
Dadellin, This is dirty coding but in any case, if you still want to use it, try the following, if you see what I mean: <table width="100%"> <tr> <td align="center" valign="middle"> <table align="center"> <tr><td>CONTENT</td></tr> </table> </td> </tr> </table> Code (markup):
If you want to use CSS it will be: <table style="text-align:center;"> Code (markup): That will center the inside tables all around or just make a .center class in your <head> <head> <style type="text/css"> .center { text-align:center; } </style> </head> Code (markup): and add it to any thing you want centered: <table class="center"> Code (markup):
No joy guys - I don't think its anything as simple as forgetting to close a tag as I've validated the page. I've attached my index.html incase anyone can spot the error. This has me completely foxed. I've tried 6/7 different methods and IE doesn't respond to any of them.
have you tried closing your <td> tags like this: <td /> Code (markup): instead of: <td></td> Code (markup): ? Would you like to look at a web page I've been working on? If you do hover over the menu to see effect of 3d gradient text.: http://agnostic.890m.com/3rdeye Although it looks the best in the OPERA browser.
Ok, so mistake number one, finishing a layout before you even think of testing it in other browsers. Ok, so mistake number two, trying to do something 1997 style. Let's go through that code you attached... No doctype so have fun hacking around all versions of IE being in quirks mode. Two stylesheets in a row declared inconsistantly - oh hey look, it's that stupid malfing jquery CRAP. Do yourself a huge favor and throw that bloated pile of rubbish where it belongs, on the trash heap. 25 validation errors means it's not HTML, it's gibberish. 5.3k HTML file for 313 bytes of content, that's just instantly made of /FAIL/. Javascripted menu, welcome to 1997. Tables for no good reason apart from blowing bandwidth on nothing... My advice, join us in this century by throwing that all out and starting over with semantic markup and separation of presentation from content, maybe with proper indentation and not inlining every last bit of scripting so you cant tell where scripts begin and markup ends. It's a train wreck I'd not even TRY to salvage. Seriously, if you don't see a problem with this: <div id="countbox"></span></div></div></td> Code (markup): or this </align> Code (markup): or this <td colspan="2" valign="top" style="background: url('media/top_block.png') no-repeat;"><span class="article"> <p> </p></td> Code (markup): ... sigh... spans are inline-level, they cannot be used to wrap paragraphs, divs or other block-level elements. NONE of these extra wrappers are even needed since you in most cases could put them on the div's or the paragraph tags, not that most of the places you seem to have para tags are even paragraphs. There is no such tag as align, Height and width declarations in your MARKUP should NOT say px - height="30px" is invalid, if you want pixels on an attribute you say height="30". The only 'metric' an attribute can take is %, otherwise px is assumed. Only CSS let's you state metrics other than percentage. If you had style="height:30px;" THEN you can say px. You've got endless amounts of pointless redundant markup in here.
@ faithnomoread - Looking at that site would be very useful thanks. I think it might help me get Mk.II of my site "into this century" @ Deathshadow - I think I've learnt my lesson on finishing layouts before testing compatibility. It was a major oversight on my part. I recognise problems in the first two at least. The reasoning behind the first one is without it like that the java menu stops working.... but I'm replacing that with a CSS menu anyway. The second was a simple mistype which is very easily changed. The third I'm ashamed to admit that before reading your answer I didnt spot. Thanks for clarifying the correct markup. Next time I'll do better. I appreciate you taking time out to reply to my problem but I would hope you don't ridicule everyone who comes here asking for help. I imagine you don't speak to everyone like that.
You have a good imagination then. He's a professional, he know's what he is doing. All he did was state a truth and - knowing him - in a very polite manner.
I have a very matter of fact manner - on the principle if you cannot say what you mean you cannot mean what you say. I don't rap, I don't jive, and I'm not going to sugar coat it while putting the rose-coloured glasses on your head to lead you down the garden path. I leave the soft-touch treatment in the hands of people who think tools like dreamweaver and htmltidy actually increase productivity or throw silver bullet fixes, hacks and more broken code at broken code instead of fixing the actual underlying problems.
With that knowledge I take it back. I just got a little ruffled at the tone. Anyway I've taken your advice Deathshadow and trashed the lot and I'm going to redo it using div and CSS. - Assuming that is what you'd recommend instead.
<removed as realised it was wrong section and no longer relevant to the topic subject> Thanks for getting me to actually make the jump to table-less.