Question

Table gets too big and side scroll bar apears....

Asked by: sjaguar13

I have a site with a top bar (kinda like this site) and I want it to be the whole way across, but not bigger than the screen. If I take off the main part of the page, the scroll bar goes away, but when I add it back, it pops up again. I can't figure out why. The stuff in the main part isn't bigger than the page, nothing is bigger than it. I use The div tag twice, if that means anything. Should I upload the site and post it, or can you guys tell me what's wrong without looking at it?

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2002-05-31 at 11:45:36ID20306701
Tags

table

,

screen

,

scroll

,

side

Topic

Hypertext Markup Language (HTML)

Participating Experts
3
Points
100
Comments
28

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. Controllable scrolling
    I need controllable scrolling script to scroll one layer inside of other (or one but clipped layer) to up and down, compatible with IE. Scrolling should be controlled in both direction (up and down) like this workable version for NN: http://www.adm.kiev.ua/marquee.html I'll ...
  2. Control scroll bar width??
    Hi All, Is there a way to control the width of a scroll bar?. I am using Style="overflow:auto" to create the scroll bar for a div. The scroll bar looks ok in 1024x800 but it looks quite bad when viewed in 800x600. Is there any way around it?. Thanks!
  3. Move Div on Scroll
    Hello, I have a menu on the left side which is in a div tag, wondering how I can have the div tag move up or down the page as people scroll. So I want the menu to constantly stay in the same area as people move about the page. Thanks!

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: knightEknightPosted on 2002-05-31 at 11:50:19ID: 7047601

please give us a link to the site ... or cut-n-paste the relavent code.

 

by: sjaguar13Posted on 2002-05-31 at 15:19:20ID: 7047880

Here's the body section. You don't need the head part, do you?



<BODY TOPMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 BGCOLOR="#CDD2F7" TEXT="#000000">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1 WIDTH=100%>
<TR><TD COLSPAN=2 WIDTH=100%><IMG SRC="TopBar4a.gif"></TD></TR>
<TR><TD HEIGHT=50 BACKGROUND="slice\Copy\Search1-1x1.gif" ALIGN=CENTER><INPUT CLASS="IN" TYPE="TEXT" WIDTH=8> <INPUT CLASS="GO" TYPE="SUBMIT" VALUE="Search"></TD>
<TD VALIGN=TOP ROWSPAN=2><DIV ALIGN=LEFT VALIGN=TOP><IMG SRC="slice\copy\Search1-1x2.gif"></DIV>
<DIV ALIGN="CENTER" VALIGN=TOP>
<P>Thanks for your interest in our store inventory, our service and staff. We stock, merchandise and operate this unique shop to fill the niche we could not find in any other store. We are all musicians and product specialists and we love the products and the business as much as you do. Our biggest asset is our happy return customers! We will do everything we can to stock what you need, offer it to you at the best possible fair price and take care of you and your purchase after the sale. Your satisfaction is our priority.</P>

<P>We are open 7 days a week, Monday through Friday (10-8), Saturdays (10-6) & Sunday (1-5) for your convenience. We have been shipping worldwide for years and accept fax inquires and orders everyday. Another good medium is the E-Mail system...but be sure to include your NAME ADDRESS and ZIP CODE to be included in our database for mailings in the future.</P>

<P>We are an authorized repair center for most major brands like Marshall, Vox, Ampeg, Crate, Fender, Takamine and are experts in the field of tube amp repair- Mike "the tube wizard" Dal Sasso is the director of our electronics repair department and we encourage you to try our service, prices, and reliability! We can do anything you need for your instrument from simple set-ups to total vintage restoration including hard repairs and expert nitro-cellulose refinishing in all the cool custom colors!</P>

<P>If you like guitars, we carry all levels and price points and are as proud of our high quality low price beginner instruments as we are of our collector grade Custom Shop and Historic Gibson instruments.</P>

<P>John J. Slog, our working director, writes columns for Vintage Guitar, Bass Player, Guitar World, and Guitar Player magazines, does appraisals of vintage instruments for $20 each, and (along with the rest of our friendly staff) is always ready to give free advice with regards to gear and instruments. COME VISIT OUR FANTASTIC SHOWROOM! We are 1.5 hours from New York City and 1 hour from Philadelphia. Find us fast on our directions page.</P>
</DIV>
</TD></TR>
<TR><TD WIDTH=21%><IMG SRC="Menu1.gif"></TD></TR>

</TABLE>
</BODY>
</HTML>

 

by: COBOLdinosaurPosted on 2002-05-31 at 16:05:37ID: 7047930

Well I don't see any problem.  The only scroll bar I get is the one on the right.

I don't see any problem, unless you are looking at it in Netscrap 4.x.  Then it would have a problem because of width="100%"

I see you have a couple of style classes defined what do they look like?

Cd&

 

by: sjaguar13Posted on 2002-05-31 at 16:25:32ID: 7047961

Here is the CSS:


<HTML><HEAD>
<STYLE>
.IN {   text-decoration: none;
     background-color: #CCCCFF;
     font-family: verdana,arial;
     font-size: 10pt;
     color: #000000;
     font-weight : normal;
     border: 1px #000000 solid;
}

.GO {  
     color: #000000;
     text-decoration: none;
     background-color: #6666CC;
     font-family: Verdana;      
     font-size: 9pt;
     font-weight : normal;
        border: 1px #000000 solid;
}

.STUFF { font-size: 12pt;
         width: 500pt;
}

p { font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    width: 500pt
}
</STYLE>

 

by: COBOLdinosaurPosted on 2002-05-31 at 17:01:06ID: 7048024

No wonder it is screwed up.  You have widths defined in points.  If you put a fixed width on elements then the page is guaranteed to be screwed up unless you precisely size overything. You have a mix of fixed sizes percentages and unefined floats.

Make up you mind. When the width is left off the styled elements it is fine.

Cd&

 

by: sjaguar13Posted on 2002-05-31 at 19:04:10ID: 7048189

The width: 500pt; from P and .STUFF? I took those off, and it still doesn't work. Percentages are from the table, what is fixed, and what is undefined?

 

by: sjaguar13Posted on 2002-05-31 at 19:07:45ID: 7048191

If I take out this part:

<TD VALIGN=TOP ROWSPAN=2><DIV ALIGN=LEFT VALIGN=TOP><IMG SRC="slice\copy\Search1-1x2.gif"></DIV>
<DIV ALIGN="CENTER" VALIGN=TOP>
<P>Thanks for your interest in our store inventory, our service and staff. We stock, merchandise and operate this unique shop to fill the niche we could not find in any other store. We are all musicians and product specialists and we love the products and the business as much as you do. Our biggest asset is our happy return customers! We will do everything we can to stock what you need, offer it to you at the best possible fair price and take care of you and your purchase after the sale. Your satisfaction is our priority.</P>

<P>We are open 7 days a week, Monday through Friday (10-8), Saturdays (10-6) & Sunday (1-5) for your convenience. We have been shipping worldwide for years and accept fax inquires and orders everyday. Another good medium is the E-Mail system...but be sure to include your NAME ADDRESS and ZIP CODE to be included in our database for mailings in the future.</P>

<P>We are an authorized repair center for most major brands like Marshall, Vox, Ampeg, Crate, Fender, Takamine and are experts in the field of tube amp repair- Mike "the tube wizard" Dal Sasso is the director of our electronics repair department and we encourage you to try our service, prices, and reliability! We can do anything you need for your instrument from simple set-ups to total vintage restoration including hard repairs and expert nitro-cellulose refinishing in all the cool custom colors!</P>

<P>If you like guitars, we carry all levels and price points and are as proud of our high quality low price beginner instruments as we are of our collector grade Custom Shop and Historic Gibson instruments.</P>

<P>John J. Slog, our working director, writes columns for Vintage Guitar, Bass Player, Guitar World, and Guitar Player magazines, does appraisals of vintage instruments for $20 each, and (along with the rest of our friendly staff) is always ready to give free advice with regards to gear and instruments. COME VISIT OUR FANTASTIC SHOWROOM! We are 1.5 hours from New York City and 1 hour from Philadelphia. Find us fast on our directions page.</P>
</DIV>
</TD></TR>

It is fine. I guess it could be something with the P. I'm going to play around with it and see if I can't find out why.

 

by: sjaguar13Posted on 2002-05-31 at 23:39:42ID: 7048376

I have no idea. If I take out all the text and replace it with "1", it's still has the scroll bar at the bottom. Should I upload the pages and link to it?

 

by: COBOLdinosaurPosted on 2002-06-01 at 07:12:54ID: 7048633

What is undefined is the width of the cells.  Not that it would matter the may this is, because it would still get pushed out.  The table is defined as 100% and the total width of the cells is defie as 100% in the first row; which rdundantly just defines the width of the table as 100% again.

The width of the left cell floats to the width of the controls it contains.  The right cell also floats and is perfect with nothing in it.  However content forces the size to the size of the content, and 500pt is to big for my screen, and apparently for yours.  

500pt does not work!  No width definition works.  500px works for my screen, but not for every one.  Even 100% works.  500pt does not work.

You could adjust the width until you get it to work FOR YOUR SCREEN.  It will then only work for those who have the same computer, browser, screen size and resolution you do.

If you define the width of the paragraphs all you do is guarantee that the majority of users will not see it the way you intend, because it is optimize for YOUR SCREEN.  

Points are for laying out printed pages.  They have some very limited value for defining specialized fonts, but other then that they have no use in WEB page design.  Where you must use sizes.  Use pixels or percentages.  For the page you are doing let the right cell float with no definition and it will correctly fill the screen.

You can upload it and post the link if you want but it won't give me anything I don't already have except I will be able to see the images, which do not appear to have anything to do with the problem.

Cd&

 

by: sjaguar13Posted on 2002-06-01 at 12:30:12ID: 7048888

If I make it 500pt, it easily fits in my window. If I make it 300px, it has plenty of room, but still has the scroll bar. If I take out WIDTH=21% from the cell with Menu1.gif, it works, but it's not the right size. That cell comes over way too far. If I do that, how do I get the cell to be the right size?

 

by: sjaguar13Posted on 2002-06-01 at 12:31:52ID: 7048890

By the way, the page is set up for a screen size of 1024x768.

 

by: COBOLdinosaurPosted on 2002-06-01 at 15:19:49ID: 7048998

Base on the latest stats from thecounter.com; At 1024x768 you are designing a layout for 35% of users.  I normally use 800x600 for base testing which is used by 51% of users.

That aside; it does not matter what resolution you design for, if you use fixed sizing to the edges, the majority of users will not get the presentation you intend.

Are you designing the page for yourself, or visitors to the site?  If you just have to satisfy yourself then play around with fixed sizing and dimensioning, until you like it.

As it stands your design will not work properly for most users as at any resolution.  It does not work, and will never work very well the way you are doing it.  It is not a printed page.  

It is a web page that will be view based on user preferences that you cannot control.  The way you to get optimum rendering for the most users is to not fight the technology.  Leave it flexible and the browsers will give it the best possible rendering for the conditions they encounter.  Insist on print page concepts with rigid layout and most users will not get a good presentation.

This web page is a store front.  The way your are doing it, most visitors will see a store front with dirty windows, worn carpet, and peeling paint.  Only a small minority will see an acceptable page.  If a page design is dependent on a given resolution, it is like putting up barriers to prvent customers from getting to your business.

Cd&

 

by: sjaguar13Posted on 2002-06-01 at 16:14:33ID: 7049031

Don't worry about the resolution thing. I just care about getting it all in the window without the stupid scroll bar. I played around with the WIDTH=100% on the table, but it does nothing. I need the cell with the menu picture to be the width of the menu picture and I need the other crap viewable without scrolling to the right. What would I need to change? By the way, I changed the pt into px.

 

by: COBOLdinosaurPosted on 2002-06-01 at 16:42:31ID: 7049052

Okay with the table at a width of 100%.  Use the width you need on the left cell for the size you need for the image in pixels.

Do not set any width for the right cell or any of its contents.  That will let the right cell float to the the maximum width available within the window.  

At a different resolution or screen size the left cell will stay at the fixed size and the width of the right cell will adjust its width to stay within the window, unless the window gets size narrower than the graphic at the top; in which case there is nothing that can be done.

Cd&

 

by: sjaguar13Posted on 2002-06-01 at 18:49:52ID: 7049144

<TR><TD WIDTH="212px"><IMG SRC="Menu1.gif"></TD></TR> Doesn't work, how am I supposed to do it without percents?

 

by: COBOLdinosaurPosted on 2002-06-02 at 06:03:01ID: 7049431

>>>Doesn't work, how am I supposed to do it without
percents?

What does not work?  What are you seeing that you think is wrong?

I viewed it at 640x480, 800x600, 1024x768, 1152x864, and 1280x1024.  I have the menu cell at 212px and nothing set for the text cell.  

It renders correctly with no scrollbar at all resolutions.  If you are seeing something different, then it must be something to do with the graphics.  For me to see it the way you see it, I guess you will have to post a link.  This is a simple layout, there is no reason for it to be causing a problem if you lett the right side float, unless you are looking at it in an obsolete browser like Netscrap 4.x.

Cd&

 

by: TenTonJimPosted on 2002-06-02 at 13:20:54ID: 7049860

trty taking out the 1px border attributes in your style sheet that may be causing it

 

by: sjaguar13Posted on 2002-06-02 at 14:51:05ID: 7049992

The left side isn't at 212px. If I have <TR><TD WIDTH="212px"><IMG SRC="Menu1.gif"></TD></TR>, it's bigger than 212px, no matter what I change 212 to, the border doesn't move.

 

by: COBOLdinosaurPosted on 2002-06-02 at 15:03:12ID: 7049996

Then the image is using more than 212px.  The td dimensions do not control the size of the content.  It is exactly the opposite.  If the content of the cell will not fit, the browser resizes the cell until it does.

Do the image this way:

<img src="menu.gif" width="212px" border="0" margin="0" hspace="0">

Cd&

 

by: sjaguar13Posted on 2002-06-02 at 17:51:11ID: 7050180

That did nothing. I'm thining it's the other stuff in the search field cell.

 

by: COBOLdinosaurPosted on 2002-06-03 at 04:52:26ID: 7050830

If you post a link I will look but when I put the code in a browser it works fine at all resolutions as long as the right cell does not have a fixed width.  

So if I can't see the problem, there is not much ore I can do.

Cd&

 

by: sjaguar13Posted on 2002-06-06 at 20:54:00ID: 7061012

 

by: COBOLdinosaurPosted on 2002-06-07 at 06:34:58ID: 7061985

It looks like the left cell is getting pushed out.  I will play with it and see if I can figure out what is pushing it out.  Probably won't get don until tomorrow.

Cd&

 

by: COBOLdinosaurPosted on 2002-06-08 at 14:15:37ID: 7064733

There is no problem with that page.  It display perfectly at 1024.  It is your computer or your browser that has the problem.  There is nothing more I can offer.  I do not get the scrollbar.

Cd&

 

by: sjaguar13Posted on 2002-06-08 at 21:28:29ID: 7065020

If there is no problem with your browswer, how did you know the left cell is getting pushed out. Yeah, the scroll bar is gone, but look at the left cell, it's bigger than it's supposed to be. The width=212px does nothing.

 

by: COBOLdinosaurPosted on 2002-06-09 at 09:03:07ID: 7065370

The left cell is not being pushed out, is tis being sicked out by the right cell, because you insist on sizing it, and your sizing is not precise for your browser.

In order to get the scroll bar I have to turn my override filtering off an let your code control rendering.  

You have two options that work. Option one is not to size the right cell.  That will render correctly for the 35% of your visitors using 1024 resolution.  I will not be bad for about another 10% at higher resolution.

The second option is precise sizing.  On my computer it is correct at 792px.  At 793px the scrollbar shows up.  No guarantee of the exact number for your computer, but it should about right 212 + 792 + 20 for the chrome = 1024;

However I noticed that when the page is refreshed the rendering is affected by what the angel file server loads anyway, and I would suspect that with all the rendering and filtering options available the page will render as you intend for perhaps 5 of 6% of visitors.

Even tough you have font sizes specified on the page, the Angel fire stuff does not so the rendering will also be affect the font size and face the user has in preferences, because all sizing and position is based on font size.

Cd&
 

 

by: sjaguar13Posted on 2002-06-09 at 15:25:51ID: 7065821

>>The left cell is not being pushed out, is tis being sicked out by the right cell, because you insist
>>on sizing it, and your sizing is not precise for your browser.

What do you mean? The right cell doesn't have any WIDTH tag at all. I just have two, one on the menu bar and one on the top bar. I have a height on the search thing, but nothing on the big right cell. I got to thinking. You said I was inconsistent, so I took off every WIDTH tag. The left side was still pushed out, or sucked out. I see your point, though. The top bar will force the table to be 100%. I then added a WIDTH tag to the left side menu, and it worked! If you go back to the same site, I updated it. Take a look and make sure it's the same for you and not just me. Also, how do you like the design? If it was the right size and didn't have angelfire banners on it. I'm going to get a real host, but I just used angelfire to get it online quick. It won't be there when I'm done.

 

by: COBOLdinosaurPosted on 2002-06-09 at 16:36:39ID: 7065927

I like the color scheme and the menu graphic looks good, but I don't care for the look of the way the text gets formatted when it is centered like that with ragged edges on both sides.  But to each his own.

Thanks for the A. :^)

cd&

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...