Welcome to TalkGraphics.com
Results 1 to 7 of 7

Thread: Table Layout

  1. #1

    Default

    I am redoing my site and I want to keep the same basic layout so I can have a pastel purple strip across the top and a strip down the left side of say, 140 pixels of the same pastel color. Then in the middle is where I wanted to have a cell for the main info or graphics sections of each page. I want to be able to nest tables in the main area so that I can have boundaries for the information of various colors.
    Netscape and IE give me different appearances depending on how I define the top two cells. Can I mix pixels and percent in the same row?
    Is there some way to make sure the layout will appear the same for the two main browsers all the time? I'd like to have it the same for all screen resolutions as well if possible. If the left side were defined as 140 pixels and the right column were defined as percent would that work for all resolutions and browsers??
    http://www.buddycom.com/

    buddyco
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	redworld.jpg 
Views:	551 
Size:	12.9 KB 
ID:	9013  
    buddycom

  2. #2

    Default

    I am redoing my site and I want to keep the same basic layout so I can have a pastel purple strip across the top and a strip down the left side of say, 140 pixels of the same pastel color. Then in the middle is where I wanted to have a cell for the main info or graphics sections of each page. I want to be able to nest tables in the main area so that I can have boundaries for the information of various colors.
    Netscape and IE give me different appearances depending on how I define the top two cells. Can I mix pixels and percent in the same row?
    Is there some way to make sure the layout will appear the same for the two main browsers all the time? I'd like to have it the same for all screen resolutions as well if possible. If the left side were defined as 140 pixels and the right column were defined as percent would that work for all resolutions and browsers??
    http://www.buddycom.com/

    buddyco
    buddycom

  3. #3
    Join Date
    Aug 2000
    Location
    NS Canada
    Posts
    212

    Default

    You most certainly can mix and match percent & set pixels for table cells. Just remember that they should add up to 100%. Having said that, Netscape will allow +100% without a horizontal scroll-bar. IE, however, won't.

    To make sure your layout appears similar in both browsers, add this to your body tag :

    <body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">

    This ensures you are starting at 0/0 on your x/y axis.

    Second, add a 140 pixel wide blank .gif inside your left-hand cell. This ensures that Netscape won't take space away from it when using %'s in your other cells. You may wish to add a minimum width blank .gif for your middle cell for those at the lower resolutions but put the cell width as a percentage. ie :

    <td width="80%" valign="top">

    <img src="blank.gif" width="450" height="1" alt="">

    YOUR CONTENT HERE
    </td>


    Hope that helps! Any more problems or questions, just holler.


    cfn ... Jen
    Jen Worden
    Web Developer
    www.meadoworks.com

    [This message was edited by Jen Worden on September 04, 2000 at 05:14 PM.]
    cfn ... Jen

    Jen Worden
    Web Developer
    www.meadoworks.com

  4. #4

    Default

    There really is someone there at i/us willing to help i/us.
    I have added the blank.gif to the left cell as you suggested. IE likes that just fine; gives me a contiguous line all the way down the page. Netscapev4.6 shows breaks all the way down at the borders of each cell, even when the table attributes are set to cell padding="0" cell spacing="0" cell border="0".
    Further, (at 600x800), Netscape makes the gif shorter or repeats the cellwidth and the line two or three times depending on what percent I give the wider cell on the right. I used the attribute, background="line.gif". Should I specify it's width?

    buddycom
    Attached Images Attached Images  
    buddycom

  5. #5

    Default

    Wait a minute. You are talking about a (transparent?) gif in the foreground to ensure the size is constant. I had been trying to put it in the background. I'll work with both and get you the URL of the results.
    Also I had included the leftmargin and topmargin attributes. But you suggested marginheight="0" and marginwidth="0". Is that for Netscape?

    So far here is the begin URL:
    Start web page

    and the page as it is now up to this point:
    Web page up to now.

    But, I just don't understand how there can be a 140 pixel cell/column on the left and a fixed percentage width for the top cell/column of say, 80% and have the total add up to 100% for both a 480x640 monitor and a 600x800 monitor.

    buddyco

    [This message was edited by buddycom on September 05, 2000 at 12:52 PM.]
    buddycom

  6. #6
    Join Date
    Aug 2000
    Location
    NS Canada
    Posts
    212

    Default

    Netscape problems

    Yes, the marginheight/width are to solve Netscape's offset - in 4 and higher and isn't valid HTML - but it works. [img]/infopop/emoticons/icon_smile.gif[/img]

    The reason you're getting spaces between your cells in Netscape is that you have a line break after your closing cell tags ie. </td>
    &lt/tr>. You can by deleting this, Netscape will render them fine ie.</td>&lt/tr>
    However, you only need to add one transparent gif per column. Both browsers always defer to the largest item in each cell which is why I suggested adding a 450 pixel transparent gif to the right hand column. This will ensure your minimum table width.

    Always include height/width attributes for all images. This speeds up loading and will render text quicker giving your visitor's something to read while the pics come in around it.

    Finally, you can disregard the % comment - I was saying this as a warning not to try and force the width of (in your case) the right hand column by making it 110% or some such. A rule of thumb - always keep your full table widths to 100% or less.

    Hope that helps - any other problems, just shout!

    cfn ... Jen
    Jen Worden
    Web Developer
    www.meadoworks.com
    cfn ... Jen

    Jen Worden
    Web Developer
    www.meadoworks.com

  7. #7

    Default




    [This message was edited by buddycom on September 07, 2000 at 03:37 AM.]
    buddycom

 

 

Bookmarks

Posting Permissions

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