Link to home
Start Free TrialLog in
Avatar of wreed06
wreed06

asked on

Text and Tables spill out of containers

I have 3 left-floated images.  Then I have a table I want to place on top of the middle image.  I can do that making the table a float using negative margins.  Here's my problem:  If the user uses ctrl + to make the screen bigger, the table spills out of that middle image onto the 3 image and even off the main portion of my page.  None of the image spill.  I've used percents for the image widths.  Widths don't seem to make any difference on the table or the rows and columns.  

I have two questions:

1.  How can I keep the table within the limits of my middle image?  Attached is a picture of how I want the table to always stay and a picture of what it looks like if I use ctrl + to make the screen bigger.  Also is the HTML code I'm using for the table.  I won't keep the border around the table.

2.  I also have spill over with text.  I've attached a picture of how I always want the text to look like (size wise), and what the spillover looks like if I use crtl +.  How can I keep text in container no matter how many times crtl + is used?
This is my table HTML
 
<div style="float:left;margin:-29.75% 0 0 42%;padding:0;">
   <table border=1 cellspacing=0 cellpadding=0 width="80%">
      <tr><td><td style="font-weight:bold;font-size:1em;padding-bottom:.5em;">Login</td></td></tr>
      <tr><td width="30%"><b>&nbsp;Name</td>
          <td width="60%"><input type=text id=Logname name=Logname tabindex=1 value=""></td>
      </tr>
      <tr><td width="30%"><b>&nbsp;Password&nbsp;&nbsp;</td>
         <td width="60%"><input type=password id=UserPassword name=UserPassword tabindex=2 value=""></td>
      </tr>
      <tr><td width="30%"><b>&nbsp;Company</td>
         <td width="60%"><SELECT id=XLr8Company name=XLr8Company tabindex=3 onchange="JavaScript:local_XLr8DropDowns()">
         </SELECT></td>
      </tr>
      <tr><td width="30%"><b>&nbsp;Period</td>
         <td width="60%"><SELECT id=XLr8PeriodEnd name=XLr8PeriodEnd size=1 tabindex=4>
         </SELECT></td>
      </tr>
      <tr><td align=right colspan=3><input type=submit value="Login" tabindex=99 id=submit1 name=submit1></td>
      </tr>
   </table>
</div>
 
--------------------
 
This is my text HTML code:
 
<div style="background-color:#fff;"><csgroup name="11E61874" locked="locked"></csgroup>
   <div style="height:1.2em;background-color:#96A5CD;width:100%;color:black;text-align:center;
        font-weight:bold;font-size:125%;">This is a company name&nbsp;&nbsp;
        <span style="color:white;font-size:60%;">This is a long, long, long company tag
              line</span>               
    </div>
<!-- more stuff -->
</div>

Open in new window

CorrectView.png
SpilloverView.png
CorrectText.png
SpilloverText.png
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Hi wreed6,

Don't use ems for the text as those will resize.  Use pixels or points.
I find that spill over in a floated DIV layout to be the earmark of a solely DIV layout -- ie. you can tell which sites use DIVs and floats, because they almost always overspill their boundaries.  I wish Kravimir would join this discussion, he thinks he has a fix for it, but I have not seen it.  If you used strictly a table layout, you would not get any spill over.  I am curious, why are you using BOTH table and DIV layout, why not one or the other?
Avatar of wreed06
wreed06

ASKER

I generally use divs; very rarely do I use tables.  I usually use floated divs with percentage widths and place them in a container that seems to avoid spillover.  I do have trouble with text spilling out of its container however, as in the case of my title bar.

I'm adapting existing code that used tables for the entire layout, and a separate table for login information.  I removed the table for images, but kept  the table for the login - am a little timid about using divs on data where columns have be lined up.  I want the yellow spat behind the data entry and am not sure that I can do so in a table.

I'm about to just say to heck with it and stick it all in a table and drop the splat.
Avatar of wreed06

ASKER

Lolly-Ink,
I don't see how that article helps me.  It talks about using ems as the font measurement which I'm already doing.  That does not keep my text from overflowing.
SOLUTION
Avatar of scrathcyboy
scrathcyboy
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of wreed06

ASKER

Jason1178,
Pixels or points do spillover.  Use points on a page.  Press the Ctrl and + keys at the same time multiple times.  The text contents eventually spill out of its container.  If you start with large point sizes, spillover happens sooner.

I want to know how to prevent spillover - I want the text to stay in it's container while the user controls font size.  I guess the container has to grow and shrink.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of wreed06

ASKER

Yes, jason1178, I found that the best way is to put a div inside a div to prevent spillage as well.  However, I can do that with images and three column layouts fine.  I seem to be having trouble with the table and text in this case.  I just don't get it.  I tried putting the table inside a div - the div rescaled fine, but the table ignored it.  I don't have to use a table for the data entry part, but it seemed to make sense to.

So my remaining question is how do I contain the form AND place it where I want it without spillover?  The form right now is in a table but doesn't have to be as long as the columns line up vertically.

Secondary to that is how do I keep the text in my title bar from spilling?  I'll play with that some more, because I might be able to use divs and percents a little better there.

I really need a definitive answer to the form question.  I think we're on the brink, Jason.
Avatar of wreed06

ASKER

Ok, I guess I solved the text spillover (which was really spill-UNDER).  I had a height on my title bar.  I removed the height parameter and now the title bar area expands downward as the text needs to wrap.  Not necessarily pretty if the text wraps, but at least the text does not spill downwards into other divs.

Now to conquer the form table, div, whatever works, issue...
So where are you now with the layout?   Can we get a link?
Avatar of wreed06

ASKER

Past few days have been crazy and I had to work on other things.  I'm finally back on this.  I can't really post a link as it's not on the web.  It's actually a login page for a customer and I'm not very comfortable sharing it publically.

I've been playing with putting the table in a div container and using float and margin positioning on the splat image, I removed the table all together an put the data entry fields in a div and positioned it.  Nothing stops the spillage.  I frustrated, tired, need to get this done, and it just won't work.  My images stay in position and actually, don't even move when the user resizes the page.  That's what I want these data entry fields to do, but they won't.

So, for lack of a better solution, I'm going to make the initial size large enough that one doesn't need to increase page size.  However, some already have a large page size.  I'll find a happy medium between normal and say 2 sizes up.  That will have to be good enough.  I need to get this finished an that is the last outstanding problem.  Sometimes, good enough, is good enough!
Avatar of wreed06

ASKER

Ok, now that I have my head back into the project, maybe this is a better question:

What should a webpage look like when a user makes the viewport larger (View, Zoom in Firefox, or Ctrl + in Firefox and IE)?  If you have text in a colored background with a border (and the text is not a graphic), what do you expect the text to do?  Say, the user makes the view 3 or 4 times larger.  What should happen with the text?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of wreed06

ASKER

Excellent, Jason.  I agree.  I found a way to do it where you can increase the view 2 to 3 times depending on the browser and the design holds together.  

I removed the table all together.  I put each field name and each input field in separate divs and put the whole group of them in a controlling div.  Everything has a % width.  Everything stays in its container until the view gets just stupid big.  One thing I find about input fields is that they won't wrap.  They will get as big as the container, then spill out - by then the view is stupid big anyway.

I think tables just do not play nice with a parent container.  I think a table is just going to do what a table wants to do and you can't control it inside a div.  At least that's what I found.

Thank you all for your input.
>> One thing I find about input fields is that they won't wrap.

Nope, never.

>> I think tables just do not play nice with a parent container.  I think a table is just going to do what a table wants
>> to do

There's a big, long-winded technical explanation of that, but you've boiled it down nicely.  The two types of containers are fundamentally different and behave in different ways when zoomed.  The saving grace of tables is that the behavior, even if undesired, is predictable.  CSS is only somewhat predictable and you really have to learn the bugs and quirks to obtain true cross-browser compatibility (kind of like the early HTML wars between Netscape and IE).  I'll take that in trade for the flexibility and smaller file sizes that CSS based pages can give.
Avatar of wreed06

ASKER

Thank you, Jason, you've been very helpful.  

I learned HTML using CSS, so I doubt I'll do table designs in the future.  I've been trying to take CSS down to it's lowest level.  I use floats and percents, put everything in a container and put groups of containers in a larger container, I do pretty well across browsers.  There are slight differences between Firefox and IE, but usually it comes down to using margins or padding for fine-tuning placement.  If I use one or the other, I get something acceptable in both browsers.  Minor differences across browsers just don't matter that much.

One site I did that I'm particularly proud of is www.alpacalogic.com, if you're interested to see.
LOL...

Is that for real?
Avatar of wreed06

ASKER

um... yes...  I was just trying to show you a site I did.  It's an actual product and has a market place.  Is the site as a website ok?
>> It's an actual product and has a market place.

Who knew?  

The site is great.  I was just laughing over the product.