Colored Scroll Bars

billybob3 · #1 8th May 03, 06:00 AM

I am using iframes, and trying to change the colors of the scroll bars. Below is the code that I used, which only changed the main browser window's scroll bar....but the iframe is still normal. Any suggestions? I know it's possible....sorry about the length.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Disco Jivin' & Music Lovin' Brothas'</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link {
	color: #00FF00;
	text-decoration: none;
}
a:visited {
	color: #00FF00;
	text-decoration: none;
}
a:hover {
	color: #009900;
	text-decoration: underline;
}
a:active {
	color: #00FF00;
	text-decoration: none;
}

BODY, html {
scrollbar-face-color:#000000;
scrollbar-arrow-color:#00FF00;
scrollbar-track-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-Color:#000000;
}

-->
</style>
</head>

<body bgcolor="#000000">
<div align="center">
 &nbsp;<table width="550" border="0" cellpadding="0" cellspacing="0">
 &nbsp; &nbsp;<!--DWLayoutTable-->
 &nbsp; &nbsp;<tr> 
 &nbsp; &nbsp; &nbsp;<td width="10" height="10" align="left" valign="bottom"><img src="images/topleft.gif" width="10" height="10"></td>
 &nbsp; &nbsp; &nbsp;<td colspan="2" align="center" valign="bottom"><img src="images/topline.gif" width="530" height="10"></td>
 &nbsp; &nbsp; &nbsp;<td width="10" align="right" valign="bottom"><img src="images/topright.gif" width="10" height="10"></td>
 &nbsp; &nbsp;</tr>
 &nbsp; &nbsp;<tr> 
 &nbsp; &nbsp; &nbsp;<td rowspan="4" align="left" valign="top"><img src="images/leftline.gif" width="10" height="439"></td>
 &nbsp; &nbsp; &nbsp;<td height="60" colspan="2" align="center" valign="middle"><img src="images/discojivintitle.jpg" width="530" height="60"></td>
 &nbsp; &nbsp; &nbsp;<td rowspan="4" align="right" valign="top"><img src="images/rightline.gif" width="10" height="439"></td>
 &nbsp; &nbsp;</tr>
 &nbsp; &nbsp;<tr> 
 &nbsp; &nbsp; &nbsp;<td height="16" colspan="2" align="center" valign="top"><font color="#00FF00" face="Arial, Helvetica, sans-serif"><em>We 
 &nbsp; &nbsp; &nbsp; &nbsp;put the groove, in groovy!</em></font></td>
 &nbsp; &nbsp;</tr>
 &nbsp; &nbsp;<tr> 
 &nbsp; &nbsp; &nbsp;<td width="148" height="313" valign="top"><div align="left">
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><font color="#00FF00" size="3" face="Arial, Helvetica, sans-serif"><a href="services.shtml" target="main">We've 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Got Services!</a></font></p>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><font color="#00FF00" size="3" face="Arial, Helvetica, sans-serif"><a href="upcoming.shtml" target="main">Upcome 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Events</a></font></p>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><font color="#00FF00" size="3" face="Arial, Helvetica, sans-serif"><a href="whenstarted.shtml" target="main">When 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;We Started</a></font></p>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><font color="#00FF00" size="3" face="Arial, Helvetica, sans-serif"><a href="how.shtml" target="main">How 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;We Did It</a></font></p>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><font color="#00FF00" size="3" face="Arial, Helvetica, sans-serif"><a href="pictures.shtml" target="main">Some 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Groovy Pics</a></font></p>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><font color="#00FF00" size="3" face="Arial, Helvetica, sans-serif"><a href="contact.shtml" target="main">Get 
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;In Contact</a></font></p>
 &nbsp; &nbsp; &nbsp; &nbsp;</div></td>
 &nbsp; &nbsp; &nbsp;<td width="382" valign="top"><iframe src="framecontent.shtml" name="main" frameborder="0" scrolling="yes" width="100%" height="100%">Yo 
 &nbsp; &nbsp; &nbsp; &nbsp;Dog! Get a browser compatible with frames! Thanks homie!</iframe> 
 &nbsp; &nbsp; &nbsp;</td>
 &nbsp; &nbsp;</tr>
 &nbsp; &nbsp;<tr> 
 &nbsp; &nbsp; &nbsp;<td height="50" colspan="2" align="center" valign="middle"><img src="images/musiclovintitle.jpg" width="530" height="50"></td>
 &nbsp; &nbsp;</tr>
 &nbsp; &nbsp;<tr> 
 &nbsp; &nbsp; &nbsp;<td height="10" align="left" valign="top"><img src="images/bottomleft.gif" width="10" height="10"></td>
 &nbsp; &nbsp; &nbsp;<td colspan="2" valign="top"><img src="images/bottomline.gif" width="530" height="10"></td>
 &nbsp; &nbsp; &nbsp;<td align="right" valign="top"><img src="images/bottomright.gif" width="10" height="10"></td>
 &nbsp; &nbsp;</tr>
 &nbsp;</table>
</div>
</body>
</html>

The website is online @ http://billybob3.mine.nu/groovy/

Adodikan · #2 8th May 03, 08:52 AM

I believe you have to include the scrollbar css in the framecontent.shtml document. This is how I got it to work when i had the same problem. Since the iframe is technically a child page the css only applies to the parent page.

billybob3 · #3 10th May 03, 12:52 AM

Ok, works now. That was the problem, thanks for the solution. It makes sense to me, just didn't think of that when I was making it...

Thanks!