sjaguar13
asked on
Table gets too big and side scroll bar apears....
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?
knightEknight
please give us a link to the site ... or cut-n-paste the relavent code.
ASKER
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><TD HEIGHT=50 BACKGROUND="slice\Copy\Sea
<TD VALIGN=TOP ROWSPAN=2><DIV ALIGN=LEFT VALIGN=TOP><IMG SRC="slice\copy\Search1-1x
<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>
<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><TD HEIGHT=50 BACKGROUND="slice\Copy\Sea
<TD VALIGN=TOP ROWSPAN=2><DIV ALIGN=LEFT VALIGN=TOP><IMG SRC="slice\copy\Search1-1x
<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>
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&
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&
ASKER
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>
<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>
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&
Make up you mind. When the width is left off the styled elements it is fine.
Cd&
ASKER
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?
ASKER
If I take out this part:
<TD VALIGN=TOP ROWSPAN=2><DIV ALIGN=LEFT VALIGN=TOP><IMG SRC="slice\copy\Search1-1x
<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.
<TD VALIGN=TOP ROWSPAN=2><DIV ALIGN=LEFT VALIGN=TOP><IMG SRC="slice\copy\Search1-1x
<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.
ASKER
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?
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&
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&
ASKER
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?
ASKER
By the way, the page is set up for a screen size of 1024x768.
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&
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&
ASKER
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.
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&
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&
ASKER
<TR><TD WIDTH="212px"><IMG SRC="Menu1.gif"></TD></TR>
>>>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&
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&
trty taking out the 1px border attributes in your style sheet that may be causing it
ASKER
The left side isn't at 212px. If I have <TR><TD WIDTH="212px"><IMG SRC="Menu1.gif"></TD></TR>
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&
Do the image this way:
<img src="menu.gif" width="212px" border="0" margin="0" hspace="0">
Cd&
ASKER
That did nothing. I'm thining it's the other stuff in the search field cell.
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&
So if I can't see the problem, there is not much ore I can do.
Cd&
ASKER
Sorry it took so long, http://www.angelfire.com/film/metal13/SitesTheNeedCritqued/1/test1.html
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&
Cd&
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&
Cd&
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
>>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.
>>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.
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&
Thanks for the A. :^)
cd&