What happens if you take out the width=100% in the second td in the second row?
Main Topics
Browse All Topics
Loading Advertisement...
Question
Table problem
In an 800x600 display, the logo.jpg in the code below causes my page to expand, making an unwanted horizonal scrollbar.
<table width="100%" height="100%" border="1">
<tr>
<td colspan="2"><div align="center"><img src="images/logo.jpg" width="700" height="105"></div></td>
</tr>
<tr>
<td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
<td width="100%" height="100%"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
As the image is only 700 wide, I can't see this should be a problem, but it seems to be :( If i take the image out, or make it smaller, all looks fine. But it must stay 700 wide!
So......any ideas?
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
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.
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.
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.
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.
Access the answers to your technology questions today.
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.
Faithfully serving IT professionals since 1996.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Free Tech Articles
-
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...
-
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...
-
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...
-
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, ...
-
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...
-
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
- 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, ...
- 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), ...
- 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, ...
- 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 ...
- 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 ...
- 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.
Answers
@snoyes_jw: Yep, but no problem there, as the image leaves 100px spare for this. Also, in im last comment, even an image of 567px wide gives the same problem :(
@rhawk: Although it is logical that this should be removed, it creates another problem! If I remove the 100% from there, the navigation occasionally ignores its 180 fixed width :( (Depends on the content in the adjoining cell).
Also, I have tried adding a fixed width to this cell, instead of a "100%" but this causes problems in larger displays (content no longer fills te entire width, instead whitespace is added to the rhs of cell)
I know of the issue. I never use he width to stretch a sell. Use a transparent gif (save a single pixel as one) and then set the image width to 180 and the height to 1. THe image is very small and works well for spacing. Does that solve the issue? I have had the issue you have int he past but the removal of all widths and use of the gif solved 99% of my issues.
im already using a transparent gif, hence the <img src="images/spacer.gif" width="180" height="1">
sorry i didn't mention it before...
However, if i remove all the widths, the width of my navigation cell seems to change on every page, depending on the content of the rhs cell. This is unfortunately unacceptable. The navigation MUST be 180px wide :( I need a completely consistent site.
<table width="100%" height="100%" border="1">
<tr>
<td colspan="2"><div align="center"><img src="images/logo.jpg" width="700" height="105"></div></td>
</tr>
<tr>
<td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
<td width="100%" height="100%"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
Several things not right with this:
1. Specify the table's cellpadding and cellspacing attributes, since there may be a default value assumed by certain browsers, and if so, you're not allowing for it when your spacer GIF is the same width as the cell. remember to allow for the borders when figuring absolute width values, too.
2. Get rid of the "100%" values in your cells, you shouldn't mix percentages and absolute values, you're asking for trouble, and I'm sure it's not W3C compliant (or whatever).
Suggestion:
The Table width should be specified absolutely if you're doing that in a cell... So if you want your table to span 100% the width of the page, use nested tables with absolute width values...
Thanks for comments...
I've just had a go at using nested tables, and removing the 100% width tags, but still can't get it to work :(
Given the requirements of my site, is it possible for someone post the code here that will work? (all the time, not just most of the time!)
1) The page must span the entire 100% width of the screen (and not more than 100%, ie NO horizontal scrollbars! ever!)
2) The navigation cell must always be fixed at 180px EXACTLY!
3) The main content cell must always span the entire remaining width of the page
<-------------------------
: logo here (700px) :
<-- 180px --><-------------- 100% minus the 180px --------->
: navigation : main content :
: goes : goes :
: here : here :
<-------------------------
: footer here :
--------------------------
I realise that HTML only "suggests" the layout to the browser, but there must be a way of doing this somehow!
Hi,
If you are only going to have 2 columns in the entire table, all you need to do is the following:
<table width="100%" height="100%" border="1" cols="2">
<tr>
<td colspan="2"><div align="center"><img src="collageimage.jpg" width="700"
height="105"></div></td>
</tr>
<tr>
<td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
<td width="100%" height="100%"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
The only difference is I have added cols=2 in the table ...have checked it on IE6.0 and Opera7.1 and it appears fine. Hope this helps. Let me know if you can have more than 2 columns, seeing from the layout you provided I assumed you will have 2 cols only.
Have you tried using CSS? Tables are not really made to handle layout on pages...
Something like this should work:
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtm
<html xmlns="http://www.w3.org/1
<head>
<title> Test XHTML & CSS2 layout </title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta name="Author" content="Maarten De Ridder" />
<link rev="made" href="mailto:prohacx@hotma
<style type="text/css">
body {
position: absolute;
text-align: center; /* not possible to get messages aligned in NN with this! */
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
/* overflow: auto; */
font-family: Verdana, Tahoma, Arial;
overflow: hidden;
}
.pageTitle { /* understood by IE and NN, but last understood one will be used */
display: block; /* inline/block does not matter here */
position: relative;
/* width: 100%; */
height: 9%;
background-color: #000066;
text-align: center;
font-family: Verdana, Tahoma, Arial;
font-size: 20px;
font-style: italic;
color: red;
}
.pageSpacer {
display: block;
position: relative;
clear: both;
height: 2px;
font-size: 1px;
line-height: 3px;
border: 0px;
margin: 0px 0px 1px 0px;
padding: 0px;
background-color: #ffffff;
border-bottom: 1px dotted #dddddd;
}
.pageBody {
display: block;
position: relative;
float: left;
width: 100%;
height: 80%;
}
.pageMenu {
display: inline;
position: relative;
float: left;
width: 180px; /*25%*/
height: 100%;
background-color: #dddddd;
font-family: arial, courier;
font-size: 12px;
font-weight: bold;
text-align: left;
color: #3D3D66;
}
.pageMenuItems {
/* border: 1px solid blue; */
padding: 2px;
margin: 70px 10px 10px 10px;
}
.pageMenu a {
display: block;
position: relative;
width: 130px;
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 3px solid #dddddd;
padding: 3px 10px 3px 10px;
color: #3D3D66;
text-decoration: none;
background-color: #dddddd;
}
.pageMenu a:link {
display: block;
position: relative;
width: 130px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 3px solid transparent;
padding-left: 10px;
color: #3D3D66;
text-decoration: none;
background-color: #dddddd;
}
.pageMenu a:visited {
color: #3D3D66;
}
.pageMenu a:hover {
color: #ff5500;
border-top: 1px solid #ff5500;
border-right: 1px solid #ff5500;
border-bottom: 1px solid #ff5500;
border-left: 3px solid #ff5500;
}
.pageMenu a:active {
color: #ff5500;
}
.pageContent {
display: inline;
position: relative;
float: left;
width: auto; /* 82% */
color: #606060;
height: 100%;
}
.pageContentHeader {
background-color: #dddddd;
border: 1px solid #dddddd;
}
.pageContentHeaderText {
display: inline;
position: relative;
float: left;
width: 50%;
text-align: left;
font-size: 30px;
background-color: #dddddd;
color: #666666;
}
.pageContentHeaderImage {
display: inline;
position: relative;
float: right;
height: 65px;
}
.pageContentHeaderImage img {
display: block;
position: relative;
}
.pageContentBody {
/* display: inline;*/
position: relative;
background-color: #ffffff;
height: 78%;
overflow: auto;
clear: both;
}
.pageContentBodyTitle {
display: block;
position: relative;
text-align: left;
font-family: Verdana, Tahoma, Arial;
font-size: 20px;
color: #3D3D66;
padding: 10px 10px 30px 30px;
clear: both;
}
.pageContentBodySection {
display: block;
position: relative;
clear: both;
float: right;
width: 80%;
border-left: 1px dotted #dddddd;
padding: 5px;
}
.pageContentBodySectionTit
display: block;
position: relative;
width: 100%;
border-bottom: 2px solid #3D3D66;
font-family: arial, verdana, tahoma, courier;
font-size: 12px;
font-weight: bold;
letter-spacing: 2;
text-transform: uppercase;
color: #3D3D66;
text-align: left;
}
.pageContentBodySectionTex
display: block;
position: relative;
font-family: arial, verdana, tahoma, courier;
font-size: 12px;
color: #6B6BB3;
text-align: left;
padding: 5px 5px 5px 20px;
}
.pageFooter { /* understood by IE and NN, but last understood one will be used */
display: block; /* inline/block does not matter here */
clear: both;
position: relative;
/* position: relative;*/
/* width: 100%; */
height: 9%;
background-color: #000066;
text-align: right;
font-family: Verdana, Tahoma, Arial;
font-size: 20px;
font-style: italic;
color: red;
}
.finisher {
clear: both;
/* width: 100%;*/
}
img {
border: 0px;
}
.w3c {
width: 100%;
text-align: center;
padding-top: 200px;
bottom: 5px;
}
.w3c a:link {
border: 0px;
}
.w3c a:hover {
border: 0px;
}
</style>
</head>
<body>
<div class="pageTitle">
put your image here
</div>
<div class="pageSpacer"> <
<div class="pageBody">
<div class="pageMenu">
<div class="finisher"></div>
<div class="pageMenuItems">
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Products</a>
<a href="#">Services</a>
<a href="#">Technologies</a>
<a href="#">Support</a>
</div>
<div class="finisher"></div>
<p class="w3c">
<!-- <a href="http://validator.w3.
src="http://www.w3.org/Ico
alt="Valid XHTML 1.1!" height="31" width="88" /></a> -->
</p>
</div>
<div class="pageContent">
<div class="pageContentHeader">
<!-- <div class="finisher"></div> -->
<div class="pageContentHeaderTe
<div class="pageContentHeaderIm
<div class="pageContentHeaderIm
<div class="pageContentHeaderIm
<div class="pageContentHeaderIm
<div class="finisher"></div>
</div>
<div class="finisher"></div>
<div class="pageContentBody">
<div class="pageContentBodyTitl
<!-- <div class="finisher"></div> -->
<div class="pageContentBodySect
<div class="pageContentBodySect
European Mask Conference EMC<br />
January 13-15, 2003<br />
Sonthofen, Germany
</div>
<div class="pageContentBodySect
A paper about using MaTISSe in a mask house has been presented.
You can download the paper or download the presentation.
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
AEC / APC 2003<br />
March 26-28, 2003<br />
World Trade Center, Grenoble, France
</div>
<div class="pageContentBodySect
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
Advanced Semiconductor Manufacturing Conference (ASMC)<br />
March 31-April 1, 2003<br />
International Conference Center, Munich, Germany
</div>
<div class="pageContentBodySect
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
SEMICON Europa<br />
April 1-3, 2003<br />
Munich Trade Fair Centre, Munich, Germany
</div>
<div class="pageContentBodySect
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
SEMICON West<br />
July 14-18, 2003<br />
Moscone Center, San Francisco, CA
</div>
<div class="pageContentBodySect
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
SPIE Photomask 2003<br />
September 9-12, 2003<br />
Monterey Conference Center, Monterey, CA
</div>
<div class="pageContentBodySect
</div>
</div>
<div class="pageContentBodyTitl
<!-- <div class="finisher"></div> -->
<div class="pageContentBodySect
<div class="pageContentBodySect
dCp
</div>
<div class="pageContentBodySect
dCp version 5.8.10 released
Ghent, April 27, 2003
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
eCp
</div>
<div class="pageContentBodySect
Nimble announces eCp released
Ghent, March 30, 2003
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
Nimblesite
</div>
<div class="pageContentBodySect
New NimbleSite Web is online
Brussels, December 20, 2002
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
eCp prototype
</div>
<div class="pageContentBodySect
Nimble announces eCp functionnal prototype
Ghent, December 15, 2002
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
dCp
</div>
<div class="pageContentBodySect
dCp version 5.8.5 released
Ghent, December 10, 2002
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
Infineon succes story
</div>
<div class="pageContentBodySect
Infineon Mask House reaches 99% uptime with MaTISSe FT MES in November
Munich, December 1, 2002
</div>
</div>
<div class="pageContentBodySect
<div class="pageContentBodySect
dCp at Infineon
</div>
<div class="pageContentBodySect
Acceptance and worldwide rollout started for dCp version 5.8.3 at Infineon
Munich, October 25, 2002
</div>
</div>
<div class="finisher"></div>
</div>
</div>
</div>
<div class="pageSpacer"> <
<div class="pageFooter">
the footer
</div>
</body>
</html>
A bit of a cheat as I can see your problem but can't get my head around why it doesn't work in a way that'd make sense. Regardless, this works, so hope it helps.
<table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr align="center">
<td colspan="2"><img src="pic.gif" width="700" height="105"></td>
</tr>
<tr>
<td width="178"> </td>
<script language="JavaScript">
var docwidth
if(window.innerWidth){
docwidth = window.innerWidth
}
if(document.body.clientWid
docwidth = document.body.clientWidth;
}
var cellwidth = (docwidth - 180);
document.write("<td width = '" + cellwidth + "'>");
</script>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
Or
<td height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
<td width="1500" height="100%"> </td>
Take the width out of the first cell, and make the second one some silly huge number. It will have to listen to the table width of 100% first, it'll also have to show the transparent gif, so that should sort it too.
Browsers have a hard time - as you've seen - when you start using the colspan attribute in some cases. In essence, the browser is adding the width of the first column (180) to the width of the image, creating the horizontal scrollbar...
The simplest workaround for this is just to use a secondary table:
<html>
<head>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center"><img src="images/logo.jpg" width="700" height="105"></td>
</tr>
<tr>
<td width="100%">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="180"><img src="images/spacer.gif" width="180" height="1"></td>
<td nowrap width="100%"> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
try this:
<html>
<head>
<title>Untitled</title>
</head>
<body>
your table:
<table width="100%" height="100%" border="1">
<tr>
<td colspan="2"><div align="center"><img src="images/logo.jpg" width="700" height="105"></div></td>
</tr>
<tr>
<td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
<td width="100%" height="100%"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
my table:
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="center" height="110" valign="middle"><img src="images/logo.jpg" width="700" height="105"></td>
</tr>
<tr>
<td>
<table align="left" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="180" valign="top">nav goes here</td>
<td>content goes here -- this will increase in width to fill 100% of the page depending on content...</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
3 Ways to Join
Business Accounts
- Perfect for organizations
- Multiple users
- Save over 36%
- Create a Business Account
Answer for Membership
- Earn free access
- Showcase your knowledge
- No credit card required
- Sign Up to Answer
Loading Advertisement...
by: rjdownPosted on 2003-12-11 at 10:39:58ID: 9922172
Just thought I'd add, the above code looks fine on displays larger than 800x600....but I need it to work with this size too...
Thanks