-
1 Attachment(s)
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
-
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
-
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.]
-
1 Attachment(s)
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
-
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.]
-
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>
</tr>. You can by deleting this, Netscape will render them fine ie.</td></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
-
[This message was edited by buddycom on September 07, 2000 at 03:37 AM.]
-
Re: Table Layout
TalkGraphics has closed this Thread
If you have concerns, PM a Mod.
It is easier to raise a new Thread and link back to this one.
If there is a valid reason then the Threads can be merged into the older one and it re-opened.
The Thread has been closed as it is has passed its best before date (stale or old) and is prone to spamming.
