Hi,
Change the images - don't use transparent backgrounds see comment above - This one's just Awesome 
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* reset all padding/margin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
background: #F1F1F1;
padding: 20px;
font-size: 100%;
}
h1, h2, p {
color: #333;
font-size: 80%;
margin-bottom: .8em;
line-height: 1.2em;
}
#window{
width:75%;
background: #F1F1F1;
}
.nav{
width:100%;
background: #F1F1F1 url(http://www.macintoshclub.com/newSite/window/centerTop.gif) repeat-x top left;
overflow: auto;
}
.nav ul {
width:100%;
list-style: none;
background: transparent url(http://www.macintoshclub.com/newSite/window/rightTopCorner.gif) no-repeat top right;
overflow: auto;
}
.nav li {
float: left;
}
.nav li a {
float: left;
height:20px;
width: 20px;
text-indent: -9999px;
background: #F1F1F1 url(http://www.macintoshclub.com/newSite/window/leftTopCorner.gif) 0 0;
}
.nav li.min a {
background-position: -20px 0
}
.nav li.max a {
background-position: -40px 0;
width: 15px;
}
#content {
border: 1px solid #AAA;
border-top: 1px solid #CCC;
height:200px;
padding: 10px 30px 10px 10px;
background: #FFF;
overflow: auto;
position: relative; /* Fixes IE dissapearing text bug */
}
</style>
<script type="text/javascript" language="javascript">
<!--
function maximiseWindow() {
var macwindow = document.getElementById('window');
var maccontent = document.getElementById('content');
macwindow.style.width = "100%";
maccontent.style.overflow = "visible";
maccontent.style.height = "auto";
maccontent.style.minHeight = "300px";
}
function minimiseWindow() {
var macwindow = document.getElementById('window');
var maccontent = document.getElementById('content');
macwindow.style.width = "70%";
maccontent.style.overflow = "auto";
maccontent.style.height = "200px";
maccontent.style.minHeight = "";
}
function closeWindow() {
if (confirm("Are you sure you want to close the window?")) {
document.getElementById('window').style.display = "none";
}
}
//-->
</script>
</head>
<body>
<div id="window">
<div class="nav">
<ul>
<li class="close"><a onclick="closeWindow()" title="close" href="#">X</a></li>
<li class="min"><a onclick="minimiseWindow()" title="minimise" href="#">-</a></li>
<li class="max"><a onclick="maximiseWindow()" title="maximise" href="#">+</a></li>
</ul>
</div>
<div id="content">
<h1>Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ac neque. Morbi ac ante ut augue rhoncus facilisis. In rhoncus justo. Donec accumsan. Quisque tempor velit vitae enim. Morbi a odio. Aliquam erat volutpat. Suspendisse potenti. Nunc imperdiet ullamcorper eros. Ut porta arcu id turpis. Donec iaculis. Fusce ac quam. Vivamus fermentum tincidunt lacus. Ut vestibulum velit sit amet justo ultrices congue. Aliquam congue sollicitudin odio. </p>
<p>Donec in risus eu magna scelerisque bibendum. Nam id erat eget eros porttitor tempus. Nam adipiscing lobortis velit. Donec aliquet scelerisque elit. Quisque porttitor bibendum nulla. Proin gravida, felis et tempor mattis, metus mi fermentum odio, a venenatis tortor elit vitae leo. Etiam id libero quis elit volutpat scelerisque. Nunc nonummy. Etiam sed lacus. Cras elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque feugiat orci id nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eros tortor, ullamcorper sed, consequat quis, dapibus quis, neque. </p>
</div>
</div>
</body>
</html>
]). For the top of the window, I have three images: the close buttons, a small cross-section thats repeated, and a right-hand corner.
Bookmarks