Scrollbar works in Firefox but doesn't look right. Looks right in IE but doesn't work

Discussion in 'CSS' started by cre8ive, Jan 14, 2008.

0
  1. #1
    I have the following code:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Scrollbar Test</title>
    <meta name="Author" content="">
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0px;
    padding: 0px;
    background: #7E797F;
    position: absolute;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=100);
}

#accordionFrame
{
	background-color: #0D0D0D;
	border: 1px solid #888888;
	position: relative;
	margin-top: 60px;
	margin-top: 60px;
	left: 30%;
	top: 10%;
	height: 75%;
	width: 30%;
	padding: 5px;
}

#accordion
{
	height: 100%;
	width: 100%;

	overflow: auto;
	scrollbar-face-color: #0D0D0D;
	scrollbar-highlight-color: #888888;
	scrollbar-3dlight-color: #0D0D0D;
	scrollbar-darkshadow-color: #0D0D0D;
	scrollbar-shadow-color: #888888;
	scrollbar-arrow-color: #888888;
	scrollbar-track-color: #0D0D0D;
}

.contentRight
{
	position: relative;
	color: #888888;
	text-align: justify;
	font: normal 13px/120% Tahoma, Verdana, Arial;
	padding: 2%;
	width: 90%;
}
    </style>
</head>
<body>
        <div style="position: absolute; height: 100%; width: 100%;">	
		<div id="accordionFrame">
			<div id="accordion">Test
				<div class="contentRight">
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
					<p>Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... Test ... </p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
    Code (markup):
    Basically, I'm trying to create a little bit of space outside of the scrollbar. There are a few problems. First, this doesn't look right in Firefox. How can I fix the look? This also doesn't work in IE at all though the scrollbar itself looks fine. How can I fix this problem?

    The whole point of creating a couple of div is that I want to create a little bit of space outside of the scrollbar. If I can accomplish that creating yet another div, I would like to use that method instead.

    I'd greatly appreciate your help in advance.
     
    cre8ive, Jan 14, 2008 IP