i am having a problem with my tables over-lapping in small browsers, in big browsers they seem to look fine....but in small ones there horrid....<br />
<br />
<br />
now i made a top table 106%, figuring i would get that horizontal scroll bar, which i did, but it still didnt eliviate the problem the tables are still overlapping even with the scroll bar....if you dont understand me,take a look at my test page....and it will be obvious......<br />
<br />
<!-- m --><a class="postlink" href="http://rapbattle.com/pimp3">http://rapbattle.com/pimp3</a><!-- m --><br />
<br />
so can someone help so that if my content exceeds the browser size that a horizontal bar will appear to allow people to navagate left to right, without overlapping?<br />
<br />
<br />
thanks in advance<!--content-->Because your page has so much content...and nested tables, I decided to use a simpler example of achieving this.<br />
When I faced the problem, I needed to create a design using tables, and allow them to expand to any screen size...but the catch was I needed them to NEVER overlap. I believe this is the same problem you face. First, I tried adding a <td width=200> thinking it would collapse up until 200 pixels...but that wasn't effective at all. <br />
Basically the deal is, if you have something in a data cell that will wrap (like text) the data cell will keep getting smaller until it can no longer wrap. What I use to workaround this is by adding a data cell with a bunch of (spaces)& n b s p ; 's. This probably sounds a little strange, and looks quite silly when you view the source.....but it is very effective. <br />
Here are a couple of URL's for pages I made using this technique. <br />
<br />
<!-- m --><a class="postlink" href="http://www.volcanic-design.com/maclean/index.htm">http://www.volcanic-design.com/maclean/index.htm</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://www.volcanic-design.com/macnaughton/index.htm">http://www.volcanic-design.com/macnaughton/index.htm</a><!-- m --><br />
<br />
try viewing the page at full screen, and resizing it down. You will notice that the tables collapse until a certain point...then they stop...and force a scrollbar. Once you play with this page you will better understand. Take a view source and look for tons of non-breaking-spaces. Once you see it, you'll get it. <br />
<br />
[Edited by Dr. Web on 03-08-2001 at 01:05 AM]<!--content-->Hi Shadowz!<br />
<br />
Fixed your tables sizes, it will solve your problem for sure. Describing the table size in ??% always gives trouble. The other idea is to put a spacer.gif (transperent gif) of required size and place it in the table at top position. That spacer.gif will help you to hold the table required width.<!--content-->thank you both for your reply, and eform i can make a spacer gif by doing what? , just making a white image or an image matching my background and just insert it above my tables?<br />
<br />
thanks in advance<!--content-->what a conincidence, i am currently building my first webpage with tables (finally decided to join almost everyone else and dump frames) then i realised the problem of making the webpage suitable for many screen sizes) my idea to solve the problem of cells getting to small by using something like the following fhsdjfhsdfhsdkhjfhdsfhhfdhffhfh in the same color/colour as the background. looks a little better in your code than (spaces)& n b s p ; also maybe you could include somekey words in it
<!--content-->Using "keywords" won't work. Search engines want to see words like web design, and professional layout. If you fill up a data cell with web design, and professional layout .....it will wrap, if you delete the spaces ....webdesignandprofessionallayout....then the search engines won't pick it up anyway. Eforms idea, of using a trans gif...(made in any photo editor) is a better solution. you can make it any size you need, and it is cleaner. Indeed it is what most WYSIWYG editors use. I should have been doing as much thinking as that!<br />
<br />
Side note....did you know that non-breaking-spaces wrapped in hrefs are valid links? Wierd that!<br />
<br />
[Edited by Dr. Web on 03-08-2001 at 11:28 PM]<!--content-->
<br />
<br />
now i made a top table 106%, figuring i would get that horizontal scroll bar, which i did, but it still didnt eliviate the problem the tables are still overlapping even with the scroll bar....if you dont understand me,take a look at my test page....and it will be obvious......<br />
<br />
<!-- m --><a class="postlink" href="http://rapbattle.com/pimp3">http://rapbattle.com/pimp3</a><!-- m --><br />
<br />
so can someone help so that if my content exceeds the browser size that a horizontal bar will appear to allow people to navagate left to right, without overlapping?<br />
<br />
<br />
thanks in advance<!--content-->Because your page has so much content...and nested tables, I decided to use a simpler example of achieving this.<br />
When I faced the problem, I needed to create a design using tables, and allow them to expand to any screen size...but the catch was I needed them to NEVER overlap. I believe this is the same problem you face. First, I tried adding a <td width=200> thinking it would collapse up until 200 pixels...but that wasn't effective at all. <br />
Basically the deal is, if you have something in a data cell that will wrap (like text) the data cell will keep getting smaller until it can no longer wrap. What I use to workaround this is by adding a data cell with a bunch of (spaces)& n b s p ; 's. This probably sounds a little strange, and looks quite silly when you view the source.....but it is very effective. <br />
Here are a couple of URL's for pages I made using this technique. <br />
<br />
<!-- m --><a class="postlink" href="http://www.volcanic-design.com/maclean/index.htm">http://www.volcanic-design.com/maclean/index.htm</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://www.volcanic-design.com/macnaughton/index.htm">http://www.volcanic-design.com/macnaughton/index.htm</a><!-- m --><br />
<br />
try viewing the page at full screen, and resizing it down. You will notice that the tables collapse until a certain point...then they stop...and force a scrollbar. Once you play with this page you will better understand. Take a view source and look for tons of non-breaking-spaces. Once you see it, you'll get it. <br />
<br />
[Edited by Dr. Web on 03-08-2001 at 01:05 AM]<!--content-->Hi Shadowz!<br />
<br />
Fixed your tables sizes, it will solve your problem for sure. Describing the table size in ??% always gives trouble. The other idea is to put a spacer.gif (transperent gif) of required size and place it in the table at top position. That spacer.gif will help you to hold the table required width.<!--content-->thank you both for your reply, and eform i can make a spacer gif by doing what? , just making a white image or an image matching my background and just insert it above my tables?<br />
<br />
thanks in advance<!--content-->what a conincidence, i am currently building my first webpage with tables (finally decided to join almost everyone else and dump frames) then i realised the problem of making the webpage suitable for many screen sizes) my idea to solve the problem of cells getting to small by using something like the following fhsdjfhsdfhsdkhjfhdsfhhfdhffhfh in the same color/colour as the background. looks a little better in your code than (spaces)& n b s p ; also maybe you could include somekey words in it
<!--content-->Using "keywords" won't work. Search engines want to see words like web design, and professional layout. If you fill up a data cell with web design, and professional layout .....it will wrap, if you delete the spaces ....webdesignandprofessionallayout....then the search engines won't pick it up anyway. Eforms idea, of using a trans gif...(made in any photo editor) is a better solution. you can make it any size you need, and it is cleaner. Indeed it is what most WYSIWYG editors use. I should have been doing as much thinking as that!<br /><br />
Side note....did you know that non-breaking-spaces wrapped in hrefs are valid links? Wierd that!<br />
<br />
[Edited by Dr. Web on 03-08-2001 at 11:28 PM]<!--content-->