Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Problem with HTML showing gap in top menu tabs

Posted on 2008-06-10
2
Medium Priority
?
237 Views
Last Modified: 2010-04-09
I am sure this is probably easy but I have yet to figure it out.

On this page http://www.drinkpoga.com/ on the top menu tabs (Home, Shop, About Us, etc.) when the screen is maximized greater than about 1024x768 then a small white gap shows up in the right side right above where it say welcome.

How do I correct this so that it is scaleable for the entire screen size?

Thanks.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><!-- #BeginTemplate "/Templates/Main.dwt" --><!-- DW6 -->
<head>
<!-- #BeginEditable "doctitle" --> 
<title>drinkpoga.com - Home</title>
<script type="text/javascript" src="flashembed.min.js"></script> 
<!-- #EndEditable -->
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
</head>
 
<body onload="MM_preloadImages('images/tabov.gif','images/menu/contactov.gif','images/menu/aboutov.gif','images/menu/companyov.gif','images/menu/productsov.gif','images/menu/servicesov.gif','images/menu/faqov.gif','images/menu/photoov.gif','images/menu/linksov.gif','images/menu/guestbookov.gif','images/menu/emailov.gif','images/menu/cartov.gif')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td rowspan="2" bgcolor="#D2D2CA" width="137"><div align="center"><a href="http://www.drinkpoga.com"><img src="images/pmlogo.jpg" width="137" height="122" border="0" alt=""/></a><br />
        <font color="#003300"><font size="-5"><strong>Independent Distributor</strong></font></font> 
      </div></td>
    <td bgcolor="#D2D2CA"><p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
    <td bgcolor="#D2D2CA" width="505" valign="bottom"><div align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/DRINKPOGAcom-new2.gif" alt="" width="490" height="90" vspace="30"/></div></td>
    <td bgcolor="#D2D2CA" align="right" width="382"><div align="center"><img src="images/greathealth.jpg" width="193" height="66" alt=""/></div></td>
  </tr>
  <tr> 
    <td width="17"><img src="images/topleft.gif" width="17" height="26" alt=""/></td>
    <td class="topbg" height="26" align="right" valign="bottom" colspan="2"><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','images/tabov.gif',1)"><img name="Image26" border="0" src="images/tab.gif" width="80" height="16" alt=""/></a><a href="http://shop.drinkpoga.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image998','','images/menu/cartov.gif',1)"><img src="images/menu/cart.gif" alt="Shop" name="Image998" width="80" height="16" border="0" id="Image998" /></a><a href="about.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image53','','images/menu/aboutov.gif',1)"><img name="Image53" border="0" src="images/menu/about.gif" width="80" height="16" alt=""/></a><a href="contactus.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/menu/contactov.gif',1)"><img name="Image43" border="0" src="images/menu/contact.gif" width="80" height="16" alt=""/></a></td>
  </tr>
  <tr> 
    <td colspan="4" bgcolor="#AAAAAF"><img src="images/clearpixel.gif" width="1" height="1" alt=""/></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="dark" width="136" bgcolor="#F7F7F4" valign="top"> 
      <div id="menu"> 
        <ul id="menuitems">
          <br />
          <li><a href="http://www.drinkpoga.com">HOME</a></li>
          <li><a href="products.htm"> PRODUCTS</a></li>
          <li><a href="meetings.htm">MEETINGS</a></li>
          <li><a href="exhibits.htm"> EXHIBITS</a></li>
          <li><a href="http://www.pogamoonga.com/" target="_blank"> FAQ</a></li>
          <li><a href="video.htm">MEDIA ROOM</a></li>
          <li><a href="happenings.htm">POGA HAPPENINGS</a></li>
          <li><a href="stories.htm">POGA STORIES</a></li>
          <li><a href="opportunity.htm"> OPPORTUNITY</a></li>
          <li><a href="contactus.htm">CONTACT US</a></li>
          <li><a href="http://shop.drinkpoga.com" target="_blank">SHOP</a></li>
        </ul>
      </div>
	  
	  
	
 
      <p align="center"><img src="images/drinkbottle.jpg" width="130" height="258" alt=""/></p>
      <p><img src="images/leftline.gif" width="136" height="1" alt=""/></p>
      <p align="center"><font color="#003300">RAQUEL WALL<br />
        <font size="-5">Independent Distributor<br />
        </font></font><strong><font color="#000000">435-674-9119</font></strong></p>
      <p align="center"><img src="images/leftline.gif" width="136" height="1" alt=""/></p>
      <p align="center"><a href="doctor.htm">Click Here to see what Dr. Hansen 
        has to say!</a></p>
      <hr />
      <p align="center"><font color="#009966">Conference Calls: on<br />
        Meet the Founders; Mondays 9:00 PM EST<br />
        Talk to the Doc: Thursdays 9:00 PM EST<br />
        Meet the Elite: Saturdays 1:00 PM EST<br />
        <br />
        Dial Toll-free <br />
        1-866-885-0409<br />
        Access code: 8976538<br />
        30 minute call</font></p>
      <p align="center"><script language="JavaScript1.2" src="http://www.altavista.com/static/scripts/translate_engl.js"></script></p>
      </td>
    <td valign="top" class="leftbg" width="26">&nbsp;</td>
    <td valign="top" width="100%"><br/>
      
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="17">&nbsp;</td>
          <td valign="top" width="100%"> 
            <!-- #BeginEditable "Body" --> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td colspan="3"><img src="images/welcome.gif" width="120" height="16" alt=""/></td>
              </tr>
              <tr bgcolor="#AAAAAF"> 
                <td colspan="3"><img src="images/clearpixel.gif" width="1" height="1" alt=""/></td>
              </tr>
              <tr> 
                <td class="leftbg"><img src="images/clearpixel.gif" width="23" height="8" alt=""/></td>
                <td width="100%" valign="top"> <table width="100%" border="0" cellspacing="5" cellpadding="5">
                    <tr> 
                      <td colspan="3"><div align="center"> 
                          <h2><font color="#003300" face="Verdana, Arial, Helvetica, sans-serif">Drink 
                            it, Share it, Live it!</font></h2>
                        </div></td>
                    </tr>
                    <tr> 
                      <td>&nbsp;</td>
                      <td valign="top"> <div align="center">
                          <script>
/*
 * window.onload event occurs after all HTML elements have been loaded
 * this is a good place to setup your Flash elements
 */
window.onload = function() {  
   
    /*
      use flashembed to place flowplayer into HTML element 
      whose id is "" (below this script tag)
    */
    flashembed("intro", 
   
		/* 
			first argument supplies standard Flash parameters. See full list:
			http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
		*/
      {
         src:'../FlowPlayerClassic.swf',
			width: 468, 
			height: 350
      },
		
      /*
			second argument is Flowplayer specific configuration. See full list:
			http://flowplayer.org/player/configuration.html
		*/
      {config: {   
			videoFile: 'http://www.drinkpoga.com/intro.flv'
      }} 
   );
}
</script>
 
<!-- this DIV is where your Flowplayer will be placed. it can be anywhere -->
<div id="intro"></div>
 
                        </div>
                        <hr /> </td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr> 
                      <td colspan="3"><div align="center">If you would like to 
                          receive more information, please fill out the form below!&nbsp;</font></strong></p> 
                        </div>
                          <center>
                          <style>
#SignUp .signupframe {
  border: 1px solid #2F762A;
  background: #CCE7D7;
  color: #060505;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
                          <script type="text/javascript" src="http://app.icontact.com/icp/loadsignup.php/form.js?c=190634&l=2589&f=1258">
</script></center>
                        <hr />
                        <blockquote>
<blockquote>
<div align="left"></div>
                          </blockquote>
                        </blockquote></td>
                    </tr>
                    <tr> 
                      <td>&nbsp;</td>
                      <td><div align="center"><font color="#009933" size="3" face="Arial, Helvetica, sans-serif"><strong>Ground 
                          Level! Ask for more details about this great business 
                          opportunity!</strong></font></div></td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr> 
                      <td>&nbsp;</td>
                      <td valign="top"><div align="center">
                        
						</td>
                      <td valign="top"><p align="center">&nbsp;</p>
                        </td>
                    </tr>
                  </table>
                  <p align="center">&nbsp;</p>
                  </td>
                <td width="23" class="rightbg"><img src="images/clearpixel.gif" width="23" height="1" alt=""/></td>
              </tr>
              <tr> 
                <td width="23" rowspan="2"><img src="images/innerbottomleft.gif" width="23" height="23" alt=""/></td>
                <td width="100%"><img src="images/clearpixel.gif" width="1" height="22" alt=""/></td>
                <td width="23" rowspan="2"><img src="images/br.gif" width="23" height="23" alt=""/></td>
              </tr>
              <tr> 
                <td width="1" bgcolor="#AAAAAF" height="1"><img src="images/clearpixel.gif" width="1" height="1" alt=""/></td>
              </tr>
            </table>
            <!-- #EndEditable -->
            <br/>
          </td>
          <td width="17">&nbsp;</td>
        </tr>
        <tr>
          <td width="17">&nbsp;</td>
          <td class="smaller" align="center" width="100%">
            <p class="smaller" ><a href="index.htm">home</a> | <a href="products.htm">products</a> 
              | <a href="about.htm">about us</a> | <SCRIPT TYPE="text/javascript">
<!-- 
// protected email script by Joe Maller
// JavaScripts available at http://www.joemaller.com
// this script is free to use and distribute
// but please credit me and/or link to my site
 
emailE='drinkpoga.com'
emailE=('raquel' + '@' + emailE)
document.write('<A href="mailto:' + emailE + '?Subject=DrinkPoga.com Website">e-mail</a>')
 
 //-->
</script></p>
            <p class="smaller">drinkpoga.com &copy; 2008</p>
                      </td>
          <td width="17">&nbsp;</td>
        </tr>
      </table>
    </td>
    
    <td class="smaller" valign="top" width="135" align="center">
 
      <p><br/>
        <br/>
        <img src="images/pomegranate-s.jpg" width="110" height="110" alt=""/><br/>
        <font color="#003300"><strong><a href="pomegranate.htm">POMEGRANATE</a></strong></font> 
      </p>
      <p><br/>
        <img src="images/leftline.gif" width="136" height="1" alt=""/><br/>
        <br/>
        <img src="images/aloe-vera-s.jpg" width="110" height="110" alt=""/> 
        <br/>
        <font color="#003300"><strong><a href="aloe.htm">ALOE</a></strong></font> 
      </p>
      <p> <img src="images/leftline.gif" width="136" height="1" alt=""/><br/>
        <br/>
        <img src="images/morniga.jpg" width="110" height="110" alt=""/> <br/>
        <strong><font color="#003300"><a href="moringa.htm">MORINGA</a></font></strong> 
      </p>
      <hr />
      <p><a href="https://www.pogamoonga.com/signup/basepages/precheck.asp?selLanguage=English" target="_blank"><img src="images/joinnow.gif" width="115" height="116" border="0" /></a></a> 
        &nbsp; </p>
      <p>&nbsp; </p></td>
 
  </tr>
</table>
 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2684288-1";
urchinTracker();
</script>
</body>
<!-- #EndTemplate --></html>

Open in new window

0
Comment
Question by:DMTechGrooup
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 4

Accepted Solution

by:
intrwrks earned 1000 total points
ID: 21753132
The problem is from rows 43 - 51 in the code you posted. The first, third, and fourth cell you are setting the width to a specific amount. The second cell is left to fend for itself on this row, but down to the next row, the second cell is set to 17.

The browser is trying to follow the width you are giving it for each cell, but since each cell has a specific size set and you specify 100% width on the whole table, something has to give. So it is taking it evenly from each cell. As the windows width gets bigger so does each cell. This is causing the space.

You will need to re-work the table layout for this to work properly.

Jason
0
 
LVL 4

Assisted Solution

by:sajay_j
sajay_j earned 1000 total points
ID: 21776335
Hi

Please replace Line 54: of above code as below; I trust it will solve..

<td width="17" class="topbg"><img src="images/topleft.gif" width="17" height="26" alt=""/></td>

Open in new window

0

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

730 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