Table aligns fine in Internet Explorer and Safari but not in FireFox

Discussion in 'Web Design and Development' started by Fromethius, Aug 11, 2008.

  1. Fromethius macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
    #1
    I'm currently developing a new site for Day Tool, and I have the current build hosted under http://daytool.com/new2/

    However, I have noticed that in FireFox the table that displays all of the content is off center (measured).

    The site displays perfectly in Safari and Internet Explorer.

    Why? Thanks.

    Side-note: Also, in FireFox the image on the front page has a messed up border. This is another issue with FireFox. Why is this?
     
  2. ProwlingTiger macrumors 65816

    ProwlingTiger

    Joined:
    Jan 15, 2008
    #2
    As for the border, use
    Code:
    border-right: 1px;
    border-left: 1px;
    
    ...same for top and bottom.
    I'm still looking at the centering. IE and FF always give me trouble on that too, at least when I handcoded. Dreamweaver makes it a bit easier now.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Don't use tables for layout, that's your problem. There's also a number of empty tags in your code. Also avoid align="center" attributes. Move all styling to your CSS.
     
  4. ProwlingTiger macrumors 65816

    ProwlingTiger

    Joined:
    Jan 15, 2008
    #4
    Yeah, use

    Code:
    <div id="name"> in your html. put content within div tags.
    #name {
    attributes } for you CSS
     
  5. Fromethius thread starter macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
    #5
    I tried using css with using a class with text-align: center; but it did not center the table.

    Are there any other centering tags in css besides text-align?

    And what do you mean by empty tags in my code?
     
  6. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #6
    "empty tags" are things like <p> or <span> or <div> with no semantic purpose. Using a <p> to give horizontal space, not to denote an actual paragraph, is a bad practice. Once you get more into this you'll understand why. Semantics means using html tags only for what they are intended, and not for presentation. This is one of the reasons why tables are not used for layout any more - when used for layout they are not holding tabular data, which is their purpose.

    Generally to center a block-level element with css you will but the left and right margins to "auto".
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Actually, by "empty tags" I meant code like below, taken from the site:
    HTML:
    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    There's no text inside those tags, and as such they are empty. From the CSS it looks like you are trying to use the above for some type of styling, which is also bad. The b tag is also deprecated so should not be used.
     
  8. Fromethius thread starter macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania
    #8
    Actually, I didn't write that bit. I found that from an html script online to make rounded rectangles.

    Also, I have yet to find out how to center it properly in firefox :(
     
  9. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #9
    Did you follow my suggestion of margin: 0 Auto; ?
     
  10. Fromethius thread starter macrumors member

    Joined:
    Jun 26, 2008
    Location:
    Pennsylvania

Share This Page