Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Feb 2003
    Location
    Brooklyn, New York
    Posts
    149
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I center this table now?

    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
    BrianNY/Rookie

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    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:
    Code:
    <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...

  • #3
    Regular Coder
    Join Date
    Feb 2003
    Location
    Brooklyn, New York
    Posts
    149
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by MCD4x4; 04-23-2006 at 12:45 AM.
    BrianNY/Rookie

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,276
    Thanks
    28
    Thanked 272 Times in 266 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by Arbitrator
    [...] 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.
    Quote Originally Posted by Arbitrator
    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...

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,276
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by VIPStephan
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Ok, yeah, I didn't see it from this point. Haven't checked MCD4x4's site for a doctype...

  • #8
    Regular Coder
    Join Date
    Feb 2003
    Location
    Brooklyn, New York
    Posts
    149
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    BrianNY/Rookie

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,276
    Thanks
    28
    Thanked 272 Times in 266 Posts
    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.
    Last edited by Arbitrator; 04-24-2006 at 03:02 PM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Regular Coder
    Join Date
    Feb 2003
    Location
    Brooklyn, New York
    Posts
    149
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    BrianNY/Rookie

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,276
    Thanks
    28
    Thanked 272 Times in 266 Posts
    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).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Regular Coder
    Join Date
    Feb 2003
    Location
    Brooklyn, New York
    Posts
    149
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    BrianNY/Rookie

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,276
    Thanks
    28
    Thanked 272 Times in 266 Posts
    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)
    Firefox Web Developer Extension [Toolbar]

    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •