SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Comment tags Creating Space!?

    Hi,

    This is a wierd one that has got me totally stumped. I'm creating a kind of drop down menu where users will input data in each of the drop downs. I'm now trying to comment it so one of my colleagues can do a little work on it, but whenever I insert any comment tags it actually creates a gap when viewed through Internet Explorer.

    Has anyone seen anything like this before?

    I'll post the code for you (Go easy on me - I've only been using CSS for the last few weeks ):

    If you notice - I've inserted a comment tag about 10 lines down from the start of the body. In IE6 this created a gap once you hit the first drop down. Remove the comment tag and it closes back up.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Cooking Instructions</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    
    function showorhide(id){ 
       if(document.getElementById(id)){    //check the element exists and can be accessed 
           var ele = document.getElementById(id);    //get hold of the element 
           if(ele.style.display=="none"){   //see if display property is set to none, switch classe 
               ele.style.display="block";        
           }else{ 
               ele.style.display="none";      
           } 
       } 
    }
    
    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 toggle(img)
        {
           if (img.src.indexOf("Plus.gif") != -1)
           {
              img.src = "minus.gif";
           }
           else
           {
              img.src = "Plus.gif";
           }
        }
    
    //-->
    </script>
    <style type="text/css">
    <!--
    body {
    	background-color: #CBDDE6;
    	padding-bottom:600px;
    }
    ul#dropdownPink {
    	margin: 0px;
    	padding: 0px;
    	z-index: 1;
    	list-style-type: none;
    }
    
    ul#dropdownPink li {
    	width: 100%;
    	z-index: 1;
    }
    
    ul#dropdownPink a:link, ul#dropdownPink a:visited {
    	color: #000000;
    	background-color: #F6ADCD;
    	text-decoration: none;
    	font-family: Arial, Verdana, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	display: block;
    	width: 100%;
    	border: 3px solid #FFFFFF;
    	line-height: 26px;
    	z-index: 1;
    	margin-right:8px;
    }
    
    ul#dropdownPink a:hover {
    	z-index: 1;
    	text-decoration: underline;
    }
    
    ul#dropdownPinkSub {
    	margin: 0px;
    	padding: 0px;
    	z-index: 1;
    	list-style-type: none;
    }
    
    ul#dropdownPinkSub li {
    	width: 100%;
    	z-index: 1;
    }
    
    ul#dropdownPinkSub a:link, ul#dropdownPinkSub a:visited {
    	color: #000000;
    	background-color: #F6ADCD;
    	text-decoration: none;
    	font-family: Arial, Verdana, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	display: block;
    	width: 100%;
    	line-height: 26px;
    	z-index: 1;
    	margin-right:16px;
    	border-right: 3px solid #FFFFFF;
    	border-bottom: 3px solid #FFFFFF;
    	border-left: 3px solid #FFFFFF;
    }
    
    ul#dropdownPinkSub a:hover {
    	z-index: 1;
    	text-decoration: underline;
    }
    #CookingSub {
    	background-color:#FDE8F1;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    	margin-left:8px;
    	margin-right:0px;
    }
    #suboven, #submicro, #subgrill, #subBBQ, #subshallow, #subdeep, #substir, #substeam, #subpoach, #subhob, #subboil, #prep {
    	background-color:#FDE8F1;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    	border-bottom: 3px solid #FFFFFF;
    	border-right: 3px solid #FFFFFF;
    	border-left: 3px solid #FFFFFF;
    	margin-left:0px;
    	margin-right:-6px;
    }
    .DefaultFont {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    }
    #pinkimage {
    	background-image: url(pinkimage.gif);
    	background-repeat: no-repeat;
    	position: relative;
    	z-index: 10;
    	left: 0px;
    	top: 32px;
    	height: 32px;
    	width: 9px;
    }
    .icons {
    padding-right:8px;
    padding-top:3px;
    }
    
    -->
    </style>
    </head>
    <body onLoad="MM_preloadImages('minus.gif')">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="274" colspan="2" valign="top"><h1>Cooking instructions</h1>      
          <ul id="dropdownPink">
            <div id="pinkimage"></div>
            <li onClick="showorhide('CookingSub'); toggle(plusone); return false;"><a href="#"><img src="Plus.gif" border="0" align="left" name="plusone">Cooking Instructions</a></li>
          </ul>
          <div id="CookingSub" style="display:none;">
    	  
    	  
    <!-- Comments -->
    	  
    	  
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('suboven'); toggle(plusoven); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusoven"><img src="oven.gif" border="0" align="left" class="icons"> Oven</a></li>
            </ul>
            <div id="suboven" style="display:none;">
    		<table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Oven Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
    		
    		<ul id="dropdownPinkSub">
              <li onClick="showorhide('submicro'); toggle(plusmicro); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusmicro"><img src="micro.gif" border="0" align="left" class="icons"> Microwave</a></li>
            </ul>
            <div id="submicro" style="display:none;">
              <table width="100" cellpadding="8" cellspacing="0">
                <tr>
                  <td valign="top" height="350" width="700">
                      <table border="0" cellpadding="2" cellspacing="0">
                        <tr>
                          <th width="110">&nbsp;</th>
                          <th width="110">650 Watt <br>
                            Category B</th>
                          <th width="110">750 Watt <br>
                            Category D</th>
                          <th width="110">850 Watt <br>
                            Category E</th>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                      </table>
                      <table width="600" border="0" cellpadding="4" cellspacing="0">
                        <tr>
                          <td valign="top"><br>
                            Select Oven Cooking Instructions<br>
                            <select name="select" class="DefaultFont">
                              <option value=" " selected> </option>
                              <option>Cooking Instruction 1</option>
                              <option>Cooking Instruction 2</option>
                              <option>Cooking Instruction 3</option>
                              <option>Cooking Instruction 4</option>
                              <option>Cooking Instruction 5</option>
                              <option>Cooking Instruction 6</option>
                              <option>Cooking Instruction 7</option>
                              <option>Cooking Instruction 8</option>
                              <option>Cooking Instruction 9</option>
                              <option>Cooking Instruction 10</option>
                            </select>
                            <br>
                            <br>
                            <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                            <br>
                            <br>
                          </td>
                        </tr>
                      </table>
                  </td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subgrill'); toggle(plusgrill); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusgrill"><img src="grill.gif" border="0" align="left" class="icons"> Grill</a></li>
            </ul>
            <div id="subgrill" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Grill Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subBBQ'); toggle(plusBBQ); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusBBQ"><img src="BBQ.gif" border="0" align="left" class="icons"> Barbecue</a></li>
            </ul>
            <div id="subBBQ" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Barbecue Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subshallow'); toggle(plusshallow); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusshallow"><img src="shallow.gif" border="0" align="left" class="icons"> Shallow Fry</a></li>
            </ul>
            <div id="subshallow" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Shallow Fry Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subdeep'); toggle(plusdeep); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusdeep"><img src="deep.gif" border="0" align="left" class="icons"> Deep Fry</a></li>
            </ul>
            <div id="subdeep" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Deep Fry Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
          </div></td>
        <td width="6">&nbsp;</td>
      </tr>
      <tr>
        <td height="1"><img src="spacer.gif" alt="" width="446" height="1"></td>
        <td width="100%"></td>
        <td><img src="spacer.gif" alt="" width="6" height="1"></td>
      </tr>
    </table>
    </body>
    </html>

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE whitespace bug - fix here.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Has anyone seen anything like this before
    Yes I've seen this lots of times and its a bug in IE. You often find its worse when the comment tags are around floats and can actually throw the layout right out.

    Therefore you'll just have to find somewhere suitable to put your comment tags that doesn't interfere with the layout. (Trial and error)

    In fact its better to avoid any whitespace gaps in IE especially between images and their parents opening and closing tags and between inline image tags also. (and in tables).

    Its just one of those things that happens in certain situations and I had a couple of layouts the other day like that and I just moved the comment tag tag a couple of lines and it was fine (bit of a nuisance when you want to separate things though).

    Paul

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    ...you'll just have to find somewhere suitable to put your comment tags that doesn't interfere with the layout...
    Server-side is best - you can see them when you're coding, but they're gone at runtime.

  5. #5
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick responses guys

    I'll have a look into the whitespace bugfix, and then if that doesn't work, I suppose I'll just have to move my comments...

    I thought I was going crazy

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Server-side is best - you can see them when you're coding, but they're gone at runtime
    good point

  7. #7
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again.

    Sorry to be a pain (as I said, I am quite new to CSS), but I just can't get any of these fixes to work, unless of course I am more than likely doing something wrong?

    I've tried adding the float:left and clear:left to my ULs, but that didn't seem to work?

    I also tried changing the LIs to inline, which got rid of the space - but managed to screw all my borders.

    Any chance of some pointers?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Any chance of some pointers?
    Sorry just going offline but if no-one else replies I'll have a look later this evening

    paul

  9. #9
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that would be great.

    If you've better things to be doing don't worry about it - but any help would be appreciated

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I didn't get back to this but I've been busy this week.

    I also tried changing the LIs to inline, which got rid of the space - but managed to screw all my borders.
    Try adding position:relative and see if the borders come back.
    Code:
    li {display:inline;position:relative;}

    Paul

  11. #11
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Sorry I didn't get back to this but I've been busy this week.
    No worries Paul - I'm always amazed at how much time you spend on here helping people out, and I'm appreciative of any help.

    I'll have a look into your possible solution when I get into the office tomorrow and let you know how I get on!

    Thanks again.

    Chris

  12. #12
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I tried adding position:relative; to the LIs but it didn't seem to make a difference

    It sure is a tricky one...

    The thing is - I've been scouring the web for whitespace bug and fixes, but none I've found solve my problem (or I'm just not applying them correctly). I'm starting to wonder if there's something wrong / that needs changing in my current CSS?

    Any other ideas?

  13. #13
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [UPDATE]

    Hi again!

    I had a look through my CSS and decided to have a play with my border, margin and padding settings (moving them around onto different IDs, classes). And this seems to have worked! I moved some borders away from the a:link state and instead onto the actual DIV ID, and with a little twaeking I've finally got it to a state where there are no flaws.

    Thanks for all your help!

    ONE MORE QUESTION THOUGH!

    If you look at the attached code through IE6, you need around 1000px wide resolution to not receive horizontal scrollbars. The content is only approx 600px at it's widest point - so why does the browser command so much space?

    Is this something to do with overflow and clearing? (I've still haven't got a proper grasp of these concepts...)

    As always, any help would be greatly appreciated

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Cooking Instructions</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    
    function showorhide(id){ 
       if(document.getElementById(id)){    //check the element exists and can be accessed 
           var ele = document.getElementById(id);    //get hold of the element 
           if(ele.style.display=="none"){   //see if display property is set to none, switch classe 
               ele.style.display="block";        
           }else{ 
               ele.style.display="none";      
           } 
       } 
    }
    
    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 toggle(img)
        {
           if (img.src.indexOf("Plus.gif") != -1)
           {
              img.src = "minus.gif";
           }
           else
           {
              img.src = "Plus.gif";
           }
        }
    
    //-->
    </script>
    <style type="text/css">
    <!--
    body {
    	background-color: #CBDDE6;
    	padding-bottom:600px;
    }
    
    ul#dropdownPink {
    	margin: 0px;
    	padding: 0px;
    	z-index: 1;
    	list-style-type: none;
    }
    
    ul#dropdownPink li {
    	width: 100%;
    	z-index: 1;
    	display:inline;
    	position:relative;
    }
    
    ul#dropdownPink a:link, ul#dropdownPink a:visited {
    	color: #000000;
    	background-color: #F6ADCD;
    	text-decoration: none;
    	font-family: Arial, Verdana, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	display: block;
    	width: 100%;
    	border: 3px solid #FFFFFF;
    	line-height: 26px;
    	z-index: 1;
    }
    
    ul#dropdownPink a:hover {
    	z-index: 1;
    	text-decoration: underline;
    }
    
    ul#dropdownPinkSub {
    	margin: 0px;
    	padding: 0px;
    	z-index: 1;
    	list-style-type: none;
    }
    
    ul#dropdownPinkSub li {
    	width: 100%;
    	z-index: 1;
    	display:inline;
    	position:relative;
    }
    
    ul#dropdownPinkSub a:link, ul#dropdownPinkSub a:visited {
    	color: #000000;
    	background-color: #F6ADCD;
    	text-decoration: none;
    	font-family: Arial, Verdana, Helvetica, sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	display: block;
    	width: 100%;
    	line-height: 26px;
    	z-index: 1;
    	margin-right:6px;
    	border-bottom: 3px solid #ffffff;
    	border-right: 3px solid #ffffff;
    }
    
    ul#dropdownPinkSub a:hover {
    	z-index: 1;
    	text-decoration: underline;
    }
    #CookingSub {
    	background-color:#FDE8F1;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    	margin-left:8px;
    	margin-right:-6px;
    	border-right: 3px solid #FFFFFF;
    	border-left: 3px solid #FFFFFF;
    }
    #suboven, #submicro, #subgrill, #subBBQ, #subshallow, #subdeep, #substir, #substeam, #subpoach, #subhob, #subboil, #prep {
    	margin-left:0px;
    	margin-right:-3px;
    	border-right: 3px solid #ffffff;
    	border-bottom: 3px solid #ffffff;
    }
    .DefaultFont {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    }
    #pinkimage {
    	background-image: url(pinkimage.gif);
    	background-repeat: no-repeat;
    	position: relative;
    	z-index: 10;
    	left: 0px;
    	top: 32px;
    	height: 32px;
    	width: 9px;
    }
    .icons {
    padding-right:8px;
    padding-top:3px;
    }
    
    -->
    </style>
    </head>
    <body onLoad="MM_preloadImages('minus.gif')">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="274" colspan="2" valign="top"><h1>Cooking instructions</h1>      
          <ul id="dropdownPink">
            <div id="pinkimage"></div>
            <li onClick="showorhide('CookingSub'); toggle(plusone); return false;"><a href="#"><img src="Plus.gif" border="0" align="left" name="plusone">Cooking Instructions</a></li>
          </ul>	  
          <div id="CookingSub" style="display:none;">
    	  <!-- Comments -->
    	  <ul id="dropdownPinkSub">
              <li onClick="showorhide('suboven'); toggle(plusoven); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusoven"><img src="oven.gif" border="0" align="left" class="icons"> Oven</a></li>
            </ul>
            <div id="suboven" style="display:none;">
    		<table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Oven Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
    		
    		<ul id="dropdownPinkSub">
              <li onClick="showorhide('submicro'); toggle(plusmicro); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusmicro"><img src="micro.gif" border="0" align="left" class="icons"> Microwave</a></li>
            </ul>
            <div id="submicro" style="display:none;">
              <table width="100" cellpadding="8" cellspacing="0">
                <tr>
                  <td valign="top" height="350" width="700">
                      <table border="0" cellpadding="2" cellspacing="0">
                        <tr>
                          <th width="110">&nbsp;</th>
                          <th width="110">650 Watt <br>
                            Category B</th>
                          <th width="110">750 Watt <br>
                            Category D</th>
                          <th width="110">850 Watt <br>
                            Category E</th>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                        <tr>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                          <td><input type="text" name="textfield" class="DefaultFont" size="16"></td>
                        </tr>
                      </table>
                      <table width="600" border="0" cellpadding="4" cellspacing="0">
                        <tr>
                          <td valign="top"><br>
                            Select Oven Cooking Instructions<br>
                            <select name="select" class="DefaultFont">
                              <option value=" " selected> </option>
                              <option>Cooking Instruction 1</option>
                              <option>Cooking Instruction 2</option>
                              <option>Cooking Instruction 3</option>
                              <option>Cooking Instruction 4</option>
                              <option>Cooking Instruction 5</option>
                              <option>Cooking Instruction 6</option>
                              <option>Cooking Instruction 7</option>
                              <option>Cooking Instruction 8</option>
                              <option>Cooking Instruction 9</option>
                              <option>Cooking Instruction 10</option>
                            </select>
                            <br>
                            <br>
                            <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                            <br>
                            <br>
                          </td>
                        </tr>
                      </table>
                  </td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subgrill'); toggle(plusgrill); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusgrill"><img src="grill.gif" border="0" align="left" class="icons"> Grill</a></li>
            </ul>
            <div id="subgrill" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Grill Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subBBQ'); toggle(plusBBQ); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusBBQ"><img src="BBQ.gif" border="0" align="left" class="icons"> Barbecue</a></li>
            </ul>
            <div id="subBBQ" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Barbecue Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subshallow'); toggle(plusshallow); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusshallow"><img src="shallow.gif" border="0" align="left" class="icons"> Shallow Fry</a></li>
            </ul>
            <div id="subshallow" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Shallow Fry Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
            <ul id="dropdownPinkSub">
              <li onClick="showorhide('subdeep'); toggle(plusdeep); return false;"> <a href="#"><img src="Plus.gif" border="0" align="left" name="plusdeep"><img src="deep.gif" border="0" align="left" class="icons"> Deep Fry</a></li>
            </ul>
            <div id="subdeep" style="display:none;">
              <table width="100%" border="0" cellpadding="8" cellspacing="0">
                <tr>
                  <td width="123" valign="top"><p>Time<br>
                      <br>
                    </p></td>
                  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
                </tr>
                <tr>
                  <td valign="top">Temperature<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>130 &ordm;C</option>
                      <option>140 &ordm;C</option>
                      <option>150 &ordm;C</option>
                      <option>160 &ordm;C</option>
                      <option>170 &ordm;C</option>
                      <option>180 &ordm;C</option>
                      <option>190 &ordm;C</option>
                      <option>200 &ordm;C</option>
                      <option>210 &ordm;C</option>
                      <option>220 &ordm;C</option>
                      <option>230 &ordm;C</option>
                      <option>240 &ordm;C</option>
                    </select>
    &ordm;C
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>250 &ordm;F</option>
                      <option>275 &ordm;F</option>
                      <option>300 &ordm;F</option>
                      <option>325 &ordm;F</option>
                      <option>350 &ordm;F</option>
                      <option>375 &ordm;F</option>
                      <option>400 &ordm;F</option>
                      <option>425 &ordm;F</option>
                      <option>450 &ordm;F</option>
                      <option>475 &ordm;F</option>
                    </select>
    &ordm;F</td>
                </tr>
                <tr>
                  <td valign="top">Gas Mark<br>
                    <br></td>
                  <td valign="top"><select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Gas &frac12;</option>
                      <option>Gas 1</option>
                      <option>Gas 2</option>
                      <option>Gas 3</option>
                      <option>Gas 4</option>
                      <option>Gas 5</option>
                      <option>Gas 6</option>
                      <option>Gas 7</option>
                      <option>Gas 8</option>
                      <option>Gas 9</option>
                    </select></td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">Select Deep Fry Cooking Instructions <br>
                    <select name="select" class="DefaultFont">
                      <option value=" " selected> </option>
                      <option>Cooking Instruction 1</option>
                      <option>Cooking Instruction 2</option>
                      <option>Cooking Instruction 3</option>
                      <option>Cooking Instruction 4</option>
                      <option>Cooking Instruction 5</option>
                      <option>Cooking Instruction 6</option>
                      <option>Cooking Instruction 7</option>
                      <option>Cooking Instruction 8</option>
                      <option>Cooking Instruction 9</option>
                      <option>Cooking Instruction 10</option>
                    </select>
                    <br>
                    <br>
                    <textarea name="textarea" cols="70" rows="7" class="DefaultFont">Selected Instructions appear here and can be edited</textarea>
                    <br>
                    <br></td>
                </tr>
              </table>
            </div>
          </div></td>
        <td width="6">&nbsp;</td>
      </tr>
      <tr>
        <td height="1"><img src="spacer.gif" alt="" width="446" height="1"></td>
        <td width="100%"></td>
        <td><img src="spacer.gif" alt="" width="6" height="1"></td>
      </tr>
    </table>
    </body>
    </html>

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think its the 2 100% widths in the table here. I'm sure you don't need them anyway.

    Code:
    		<div id="suboven" style="display:none;">
      <table width="100%" border="0" cellpadding="8" cellspacing="0">
    			<tr>
    			  <td width="123" valign="top"><p>Time<br>
    				  <br>
    				</p></td>
    			  <td width="100%" valign="top"><input type="text" name="textfield" class="DefaultFont"></td>
    Try taking them all out (in all the other similar elements as well) and see if it makes a difference without affecting the layout.

    Paul

  15. #15
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I think its the 2 100% widths in the table here. I'm sure you don't need them anyway.

    Try taking them all out (in all the other similar elements as well) and see if it makes a difference without affecting the layout.

    Paul
    Damn it Paul! I come here asking for CSS advice only for it to be the tables causing the trouble!

    That sorted out the problem easily - I must've overlooked it whilst getting wrapped up in all the CSS.

    Thanks again Paul for all your help - MUCH appreciated.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •