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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tables not lined up in IE and Opera

    Hello, new here

    I'm having a lot of trouble figuring out what's wrong with these tables. After finishing the new layout for my website ( http://www.petportraitsstudio.com ) I find that the tables are fine in Firefox but do not line up in IE and Opera (you can tell by the dog portrait).

    both tables are 800px each devided up in in 4 columns of 50px 400px 300px 50px. But the bottom table doesn't seem to line up with the top even though the measurements are the same :/ I'm very confused after playing around with it for an hour but not getting anywhere

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    The issues you are having are the reasons CSS was invented - to avoid using layer upon layer of nested tables for layout purposes. Tables should be used strictly for columnar data presentation, not to place chopped up images on a page.

    If you can't bring yourself to give up the tables, try resetting all elements to zero margin and padding, at least that way all modern browsers will treat them the same.

    Code:
    /*reset.css*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    That bit of info is courtesy of Yahoo and their YUI initiative, and has solved many layout problems in CSS based designs.

    Gary

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    * {margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    Might work and is easier to code.


  •  

    Posting Permissions

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