...

View Full Version : How can I center this table now?



MCD4x4
04-22-2006, 10:49 PM
Hi All,

I just did some work on this page and added a script I needed, the problem is, it the code its at Left, I would like to center it. What would I need to change? Thanks

http://www.njhirailers.com/alphabetize_test.htm

VIPStephan
04-22-2006, 10:57 PM
I hope on the actual page you will have a doctype and use some CSS?
What do you want to center? The whole table or just the text in the cells?
Always use CSS to do the styling. To center the table horizontally write the following code into the <head> section of your HTML:


<style type="text/css">
table {margin: 0 auto;}
</style>


By the way: I don't have a font called "chicago" on my computer, and thus won't see it...

MCD4x4
04-23-2006, 12:39 AM
I want to center the whole table but if I highlight it and center the cursor and past, the table just go back to the left. I tried sticking that in the head tags but nothing happened.

Arbitrator
04-23-2006, 03:19 AM
To center content in standards browsers you use CSS on the object to be centered like Stephan demonstrated. Preferably you want to apply this to a div containing the content though. Example:

<div style="margin-left: auto; margin-right: auto;"><table></table></div>

Of course, if you're viewing in Internet Explorer you need to exploit a bug:

<style type="text/css">
body { text-align: center; }
</style>

Since this causes problems in standards browsers you also need to do this to make everything look normal again:

<div style="text-align: left;"><table></table></div>

Combine them for:

<style type="text/css">
body { text-align: center; }
</style>
<div style="margin-left: auto; margin-right: auto; text-align: left;"><table></table></div>

Of course your problem still seems unclear to me ("highlight it [...] back to left") so I can't say for sure if this'll help.

VIPStephan
04-23-2006, 07:38 PM
[...] if you're viewing in Internet Explorer you need to exploit a bug:

<style type="text/css">
body { text-align: center; }
</style>
This is right but only applies to IE 5 which doesn't do the centering with margin: auto;. It is fixed since IE 6 and you can ignore that unless you want your page to be backwards compatible.


Of course your problem still seems unclear to me ("highlight it [...] back to left") [...]
Yeah, I'm a little confused too. Could you please update your link above with the updated version? This way we can follow what you have been doing and can give you better advice.

By the way: I don't see any reaction when I click the column titles to sort the content after...

Arbitrator
04-24-2006, 12:15 PM
This is right but only applies to IE 5 which doesn't do the centering with margin: auto;. It is fixed since IE 6 and you can ignore that unless you want your page to be backwards compatible.Hmm... Technically you're right. However, this doesn't work when IE6 is in quirks mode; pages rendered in IE's quirks mode include those without a doctype declaration (like MCD4x4's page here) and those that (correctly) include an XML declaration.

VIPStephan
04-24-2006, 02:09 PM
Ok, yeah, I didn't see it from this point. Haven't checked MCD4x4's site for a doctype...

MCD4x4
04-24-2006, 02:34 PM
Hi Guys,

Thanks for the help. I'm using the latest IE, when I load this page clicking on the titles, whats below them does alphabetize. I've tried it in AOL and it works there too. If I put FrontPage in to Preview mode it works there as well. Arbitrator, where do I need to stick that code to get it to center the whole table? I never ran into this problem where I couldn't move a table in FP.

http://www.njhirailers.com/alphabetize_test.htm

Did anyone notice anyother problems?

http://www.njhirailers.com

Arbitrator
04-24-2006, 02:59 PM
Just use the examples I put in my previous post. To center the entire page, surround the entire page with the shown div tags and relevant code. The rest goes in the style tags which themselves go inside the head tags. You already have some style tags on your page so it shouldn't be hard to find where they go. Since you're using FrontPage go to the code view and add the stuff in.

I'm not going to get into the large number of coding problems your page has but I will tell you that in Mozilla (Firefox/Netscape) your text and email image on the left are overlapping your other text. The image under "Conditions Here" appears to be broken and when I try to right-click the broken image icon or any other image on the page I get an alert message thanking me for visiting the page for some reason. It seems to be an anti-image theft script but IMO it's more annoying than effective since all you have to do is view the page source to get the image URL. In Firefox it's even easier since you just right-click the page, hit page info, and grab the images from the media tab.

Just for consistency I would also make the banner image on your home page a link to your home page to match what your status bar message says. I would also try to build a layout that's a bit more consistent across pages overall. Changing the background and stuff is fine but the navigation should be in the same place on every page. For example, I see on the page with the pink background the home page button is on the bottom of the page instead of the top.

MCD4x4
04-24-2006, 03:25 PM
Ok, thank you very much, that worked. Just out of curiosity, using front page I make sure their are no errors on the page before I send it up. Why are the pages no good in the other browsers you mentioned? I would assume frontpage write the code in the right way but it seems it does not. is there a way to avoid having this problem with different browsers? Thanks again for the help.

Arbitrator
04-24-2006, 03:40 PM
Since Microsoft FrontPage (unlike other editors such as Macromedia Dreamweaver and Adobe GoLive) is actually made by the same company that makes (Microsoft) Internet Explorer, their editor caters to that browser. The best way to test your webpages is to actually view them in the browsers themselves since the previews can be misleading. This means you'll need the programs IE, Firefox (or Netscape; they both use the same rendering engine), and possibly Opera, though in general your page should look similar to Firefox/Netscape in that browser.

The reason the page looks different in the browsers is because each browser has its own way of reading code. Internet Explorer in particular has a lot of bugs, handles code that doesn't match how the web standards say it should be handled, and doesn't support newer code. Of course the other browsers aren't perfect either but their handling of the code correctly is much more reliable than IE. You can't ignore IE however since it's the most used browser since it comes with the most used OS (Windows) so you need to work with the code until it works in both. The best way of doing this is to make sure you know HTML and CSS so you can tweak and write the code directly since WYSIWYG (what-you-see-is-what-you-get) editors themselves tend to be inefficient (even big names like FrontPage).

MCD4x4
04-24-2006, 03:56 PM
Can you recommend another browser I can download so I can check these things out, or would I need to download a few browsers to be able to check for problems? Also, I don't really write any of the code, I just fool around with it in Front page until I get it right. Can I do it this way and get it right for the other browsers? I change the code here and there to get what I want but I don't actually write it.

Arbitrator
04-24-2006, 04:49 PM
All you should need are Internet Explorer which you have and:

Browser: Mozilla Firefox: http://www.mozilla.com/firefox/
Browser: (Optionally) Opera: http://www.opera.com/

Those browsers should serve your purposes. The other is Safari but without a Mac computer you can't test that.

Code Validator: http://validator.w3.org/

Ensures that your code is actually valid.

Internet Explorer Developer Toolbar (Beta) (http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en)
Firefox Web Developer Extension [Toolbar] (http://chrispederick.com/work/webdeveloper/)

Allows you special methods to test and view your web page such as in different monitor resolutions or visible lines around various parts of your page so you can see how various page elements are interacting.

In address to your other Q, Editing in FrontPage can work but it's going to be a lot of pain troubleshooting afterward if you do anything other than the real simple stuff. Unless it has a thing that allows you to render the way other browsers do like I know Adobe GoLive does, I doubt you can get it right off the bat using FrontPage's previewer though; for some reason I doubt Microsoft would allow you to preview in their competitor's browsers.

Concerning your last line: that's what learning's for.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum