I'm working on my first gadget and things are coming along well. However, there's a small frustrating issue I'm fighting. I am using external css files instead of inline styles, but when I set background-color the background of my flyout doesn't change. If I use an inline style it works. (body style="background-color:black;" ) Any explaination


<html xmlns="">
<title>Gallery Thumbnails</title>
<script type="text/javascript" src="js/local.js"></script>
<script type="text/javascript" src="js/ajax.js" ></script>
<script type="text/javascript" src="js/gadget.js"></script>
<script type="text/javascript" src="js/flyout.js"></script>
<script type="text/javascript" src="js/xml.js"></script>

<link type="text/css" rel="stylesheet" href="css/flyout.css" />
<body onload="printThumbnails();">
<table id="thumbnails" align="center"></table>
<div id="navPrevious" style="position:absolute;top:230px;left:0px;" visible="false" onclick=moveImgPrevious();">&lt;&lt;</div>
<div id="navNext" style="position:absolute;top:230px;left:530px;" visible="true" onclick=moveImgNext();">&gt;&gt;</div>


background-color: black;
font-size: 6pt;
color: white;
font-family: Arial;

Re: Sidebar Gadget Development Can't set body background-color for flyout from external css

Jonathan Abbott

You've found a bug - well done . I can reproduce it.

If you put the style on the <BODY> tag it works okay, just doesn't work from a stylesheet. ie This works:
<body style="background-color:black;">

If that's not an option, create a DIV that fills the whole page and set the background on that. That works okay.

EDIT: Added to the known bugs list, bug#23.  I've added a Repro for MS.