Solved

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

Posted on 2002-05-31
28
438 Views
Last Modified: 2008-02-26
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?
0
Comment
Question by:sjaguar13
  • 14
  • 12
  • +1
28 Comments
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
please give us a link to the site ... or cut-n-paste the relavent code.
0
 

Author Comment

by:sjaguar13
Comment Utility
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>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 

Author Comment

by:sjaguar13
Comment Utility
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>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 

Author Comment

by:sjaguar13
Comment Utility
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?
0
 

Author Comment

by:sjaguar13
Comment Utility
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.
0
 

Author Comment

by:sjaguar13
Comment Utility
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?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 

Author Comment

by:sjaguar13
Comment Utility
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?
0
 

Author Comment

by:sjaguar13
Comment Utility
By the way, the page is set up for a screen size of 1024x768.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 

Author Comment

by:sjaguar13
Comment Utility
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:sjaguar13
Comment Utility
<TR><TD WIDTH="212px"><IMG SRC="Menu1.gif"></TD></TR> Doesn't work, how am I supposed to do it without percents?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
>>>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&
0
 
LVL 2

Expert Comment

by:TenTonJim
Comment Utility
trty taking out the 1px border attributes in your style sheet that may be causing it
0
 

Author Comment

by:sjaguar13
Comment Utility
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 

Author Comment

by:sjaguar13
Comment Utility
That did nothing. I'm thining it's the other stuff in the search field cell.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 

Author Comment

by:sjaguar13
Comment Utility
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0
 

Author Comment

by:sjaguar13
Comment Utility
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.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
Comment Utility
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&
 
0
 

Author Comment

by:sjaguar13
Comment Utility
>>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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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&
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now