Scroll bar in a table

Mayoman · July 8th, 2007, 5:31 PM

I inserted a scroll bar in a table using CSS. It looks and works fine when viewed with firefox but with IE there is a space at the top. How can I fix this? Also how can I change the color of the scroll bar? The link is www.paulandbrylie.com/Endorsements.php

**MarkRH** · July 8th, 2007, 7:57 PM

Well.. I can see several problems just with the main source. There are multiple html, head, and body tags in it. There should only be one of each pair. I'd fix all that first and then go from there. Also, make sure the doctype line at the top is all one line.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Mayoman · July 8th, 2007, 8:16 PM

I'm not sure which tags to fix. Can you be more specific?

Mayoman · July 8th, 2007, 8:34 PM

I see what you mean now, the extra tags are from my included php pages. I will try to remove those tags from my php pages and see if that works.

**MarkRH** · July 8th, 2007, 8:48 PM

I have highlighted in bold red the extra tags that should be removed. Since the html is being generated within your PHP script, you'll have to look at it to find out what parts of it are outputting these extra tags.

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>TK Audio Endorsements</title>
<style type="text/css">
div 
{
background-color:#000000;
width:525x;
height:275px;
overflow: auto
}
<!--
body {
	background-image: url(TK%20Audio/TK%20Audio%2060x40%20tile.jpg);
}
.style1 {color: #FFFFFF}
-->

</style>
<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>
<table width="63%" height="570"border="0" align="center">
  
<style type="text/css">
<!--

.style1 {color: #FFFFFF}
-->
</style></head>

<body>


  <tr>
    <th height="200" bgcolor="#FFFFFF" scope="col"><table width="63%" border="8">
      <tr>
        <th scope="col"><img src="TK%20Audio/TKAUDIO800x166touched%20upinverted.JPG" width="800" height="181"></th>
      </tr>
    </table>
      
	  </body>
</html> 
     
<style type="text/css">

<!--

.style1 {color: #FFFFFF}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

      <table width="100%" border="8" align="center" bgcolor="#000000">
        <tr>
          <th scope="col"><span class="style1"><a href="index.tk.php">Welcome</a></span></th>
          <th scope="col"><span class="style1"><a href="About%20TK%20Audio.php">About TK Audio</a></span></th>
          <th scope="col"><span class="style1"><a href="Endorsements.php">Endorsements</a></span></th>
          <th scope="col"><span class="style1"><a href="TK%20Audio%20Products.php">Products</a></span></th>
          <th scope="col"><span class="style1"><a href="TK%20Audio%20Dealers.php">Dealers</a></span></th>
          <th scope="col"><span class="style1"><a href="Purchase%20Online.php">Purchase Online</a></span></th>
        </tr>
      </table>
	  

</body>
</html>
 
    <table width="100%" height="289" border="8" align="center">
  <tr bordercolor="#FFFFFF" bgcolor="#000000">
    <th width="252" height="285" bgcolor="#FF0000" scope="col">TK Audio's superior sound quality and innovative construction is becoming noticed by a growing number of well known artists. Click on the artist to view their comments about what makes TK Audio's speaker cabinets so great. Check back regularly to see the new artists who have been added as the list of endorsements continues to grow daily. </th>
    <th width="544" scope="col">
	<div>
      <table width="525" height="275" border="2">
       <tr>
		  <th scope="col"><p><a href="Endorsement%20Pages/Endorsement_Joe_Gregoire.php"><img src="TK%20AUDIO%20WEBSITE/Photos/Joel%20100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_Joe_Gregoire.php">Joel Gregoire</a></p></th>
          <th scope="col"><p><a href="Endorsement%20Pages/Endorsement_John_Lawhon.php"><img src="TK%20AUDIO%20WEBSITE/Photos/John_Lawhon100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_John_Lawhon.php">John Lawhon</a></p></th>
          <th scope="col"><p><a href="Endorsement%20Pages/Endorsement_Todd_Lee.php"><img src="TK%20AUDIO%20WEBSITE/Photos/Todd_Lee100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_Todd_Lee.php">Todd Lee</a></p></th>
          </tr>
        <tr>
           <th scope="row"><p><a href="Endorsement%20Pages/Endorsement_Clint_Springer.php"><img src="TK%20AUDIO%20WEBSITE/Photos/Clint_Springer100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_Clint_Springer.php">Clint Springer</a></p></th>
           <th scope="col"><p><a href="Endorsement%20Pages/Endorsement_Jimi_Thunder.php"><img src="TK%20AUDIO%20WEBSITE/Photos/Jimi_Thunder100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_Jimi_Thunder.php">Jimi Thunder</a></p></th>
          <th scope="row"><p><a href="Endorsement%20Pages/Endorsement_Brian_Richards.php"><img src="TK%20AUDIO%20WEBSITE/Photos/Brian_Richards100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_Brian_Richards.php">Brian Richards</a></p></th>
          
         </tr>
        <tr>
          <th scope="row"><p><a href="Endorsement%20Pages/Endorsement_Brian_Hughey.php"><img src="TK%20AUDIO%20WEBSITE/Photos/Brian_Hughey100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_Brian_Hughey.php">Brian Hughey</a></p></th>
          <th scope="col"><p><a href="Endorsement%20Pages/Endorsement_Dave_Evans.php"><img src="TK%20AUDIO%20WEBSITE/Photos/Dave_Evans100x66.jpg" width="100" height="66" border="0"></a></p>
            <p><a href="Endorsement%20Pages/Endorsement_Dave_Evans.php">Dave Evans</a></p></th>
          <td>&nbsp;</td>
         </tr>
        <tr>
          <th scope="row">&nbsp;</th>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <th scope="row">&nbsp;</th>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
         </tr>
        <tr>
          <th scope="row">&nbsp;</th>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
         </tr>
		 </div>
      </table></th>
	 
  
</table>
     
<style type="text/css">

<!--

.style1 {color: #FFFFFF}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

      <table width="100%" border="8" align="center" bgcolor="#000000">
        <tr>
          <th scope="col"><span class="style1"><a href="Contact%20TK%20Audio.php">Contact</a></span></th>
          <th scope="col"><span class="style1"><a href="Links.php">Links</a></span></th>
        </tr>
      </table>
     
    </tr>
</table>

</body>
</html>
 
</table>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=1955064; 
var sc_invisible=1; 
var sc_partition=17; 
var sc_security="32f17daf"; 
</script>

<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com/" target="_blank"><img  src="http://c18.statcounter.com/counter.php?sc_project=1955064&java=0&security=32f17daf&invisible=0" alt="web stats script" border="0"></a> </noscript>
<!-- End of StatCounter Code -->
</body>
</html>

LOL, I see you other post.. ehh, I'll post this anyway as an aid.

Mayoman · July 8th, 2007, 8:53 PM

I removed the tags from my menu and logo php pages. This didn't correct the space at top of the table with the scroll bar though. It also messed up how my menu text colors look on the welcome page. Any more ideas would be appreciated.

Mayoman · July 8th, 2007, 8:56 PM

OK. so I fixed the text color issue on the welcome page. I was missing a line of code. So now I just have the issue of the space at the top of the table with the scroll bar on the endorsement page.

**cowboy** · July 9th, 2007, 12:58 AM

Quote:

Originally Posted by Mayoman

OK. so I fixed the text color issue on the welcome page. I was missing a line of code. So now I just have the issue of the space at the top of the table with the scroll bar on the endorsement page.

IE uses a positive default margin. Set to 0, first thing.

Code:

<style type="text/css">
body {
  margin 0;
  padding 0;
  background-image: url(TK%20Audio/TK%20Audio%2060x40%20tile.jpg);
  }
div {
  margin 0; /* or as needed */
  padding 0; /* or as needed */
  background-color:#000000;
  width:525x;
  height:275px;
  overflow: auto;
  }
.style1 {
  color: #FFFFFF;
  }
</style>

Be sure to separate your tag attributes with at least 1 space.

Code:

<table width="63%" height="570"border="0" align="center">

Should be:

Code:

<table width="63%" height="570" border="0" align="center">

**MarkRH** · July 9th, 2007, 12:59 AM

Okay, I got rid of the emply space..

This section near the end of that table:

Code:

          <th scope="row">&nbsp;</th>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
         </tr>
		 </div>
      </table></th>
	 
  
</table>

Needs to be changed to:

Code:

          <th scope="row">&nbsp;</th>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
         </tr>
		</table>	
		 </div> 
		 </th>
</table>

You were just closing tags in the wrong order.

July 8th, 2007, 5:31 PM	#1 (permalink)
Mayoman Registered User Seasoned Poster Joined in Aug 2006 43 posts Gave thanks: 0 Thanked 0 times	Scroll bar in a table I inserted a scroll bar in a table using CSS. It looks and works fine when viewed with firefox but with IE there is a space at the top. How can I fix this? Also how can I change the color of the scroll bar? The link is www.paulandbrylie.com/Endorsements.php

July 8th, 2007, 7:57 PM	#2 (permalink)
MarkRH Race Surpass Super #1 Joined in Jul 2006 Lives in Oklahoma City, OK Hosted on sh102 1,218 posts Gave thanks: 18 Thanked 86 times	Well.. I can see several problems just with the main source. There are multiple html, head, and body tags in it. There should only be one of each pair. I'd fix all that first and then go from there. Also, make sure the doctype line at the top is all one line. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> __________________ SH102 : Mark Headrick - Blog - Gallery Pelicar \| Company of Valor \| Mysstie Wolfestar

July 9th, 2007, 12:59 AM	#9 (permalink)
MarkRH Race Surpass Super #1 Joined in Jul 2006 Lives in Oklahoma City, OK Hosted on sh102 1,218 posts Gave thanks: 18 Thanked 86 times	Okay, I got rid of the emply space.. This section near the end of that table: Code: <th scope="row"> </th> <td> </td> <td> </td> </tr> </div> </table></th> </table> Needs to be changed to: Code: <th scope="row"> </th> <td> </td> <td> </td> </tr> </table> </div> </th> </table> You were just closing tags in the wrong order. __________________ SH102 : Mark Headrick - Blog - Gallery Pelicar \| Company of Valor \| Mysstie Wolfestar

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

July 8th, 2007, 8:16 PM	#3 (permalink)
Mayoman Registered User Seasoned Poster Joined in Aug 2006 43 posts Gave thanks: 0 Thanked 0 times	I'm not sure which tags to fix. Can you be more specific?

July 8th, 2007, 8:34 PM	#4 (permalink)
Mayoman Registered User Seasoned Poster Joined in Aug 2006 43 posts Gave thanks: 0 Thanked 0 times	I see what you mean now, the extra tags are from my included php pages. I will try to remove those tags from my php pages and see if that works.

July 8th, 2007, 8:53 PM	#6 (permalink)
Mayoman Registered User Seasoned Poster Joined in Aug 2006 43 posts Gave thanks: 0 Thanked 0 times	I removed the tags from my menu and logo php pages. This didn't correct the space at top of the table with the scroll bar though. It also messed up how my menu text colors look on the welcome page. Any more ideas would be appreciated.

July 8th, 2007, 8:56 PM	#7 (permalink)
Mayoman Registered User Seasoned Poster Joined in Aug 2006 43 posts Gave thanks: 0 Thanked 0 times	OK. so I fixed the text color issue on the welcome page. I was missing a line of code. So now I just have the issue of the space at the top of the table with the scroll bar on the endorsement page.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)