Log in

View Full Version : wrong scrolling with inline scrollbar


tfit
03-17-2008, 08:47 AM
I'm trying to get my scrollbar working. In IE it just chops off and won't scroll in FF it scrolls the Y-axis instead of X-axis. Any fix for that?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>futureistoday inline scrollbar problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
<!--
/* remove those scrollbars */
body {overflow: hidden; }

#window {
overflow-x: hidden; background-color: #F5F5F5; width: 80%; height: 160px; border: double;
border-color: #CCCCCC; left: 100px; position: absolute;
}

#window2 {
position: relative; overflow-x: scroll; background-color: #AAA; width: 200%;
height: 100%; border-color: #CCCCCC;
}

.urls {
list-style: none;
}
.urls li {
display:inline; height:95px; width:95px; margin:3px; padding-top: 10px; left: -35px;
position: relative;
}
.urls a {
display:block; width:100px; height:100px; border:1px solid #000; text-decoration:none; background:#697210;
}
.urls a:hover {
background:#000;
}

-->
</style>
</head>

<body>

<div id="window">
<span id="window2">
<ul class="urls">
<li><a href="http://www.google.com/"></a></li>
<li><a href="http://www.bbc.co.uk/"></a></li>
<li><a href="http://www.nba.com/"></a></li>
<li><a href="http://www.w3.org/"></a></li>
<li><a href="http://reference.sitepoint.com/"></a></li>
<li><a href="http://www.codehelp.co.uk/"></a></li>
<li><a href="http://www.javathinking.com/"></a></li>
<li><a href="http://www.novell.com/"></a></li>
</ul>
</span>
</div>

</body>
</html>
coothead
03-18-2008, 07:06 PM
Hi there tfit,

you do not need absolute positioning for this project.

Try it like this...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>futureistoday inline scrollbar problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
margin:0;
padding:0;
overflow:auto;
}
#window {
width:80%;
height:160px;
border:3px double #ccc;
margin-top:10px;
margin-left:10%;
overflow:auto;
background-color:#f5f5f5;
}
#window2 {
width:1005px; /* this value is (8x102 - the 'a' width plus border) + (8x21 - the 'li' margin-left plus 21 for the right) */
}
#urls {
margin:0;
padding:0;
list-style: none;
}
#urls li {
margin-left:21px;
padding: 21px 0px;
float:left;
display:inline;
}
#urls a {
width:100px;
line-height:100px;
border:1px solid #000;
display:block;
font-family:sans-serif;
font-size:14px;
color:#fff;
text-decoration:none;
text-align:center;
background:#697210;
}
#urls a:hover {
background:#000;
color:#fff;
}
</style>

</head>
<body>

<div id="window">

<div id="window2">
<ul id="urls">
<li><a href="http://www.google.com/">google</a></li>
<li><a href="http://www.bbc.co.uk/">bbc</a></li>
<li><a href="http://www.nba.com/">nba</a></li>
<li><a href="http://www.w3c.org/">w3c</a></li>
<li><a href="http://reference.sitepoint.com/">sitepoint</a></li>
<li><a href="http://www.codehelp.co.uk/">codehelp</a></li>
<li><a href="http://www.javathinking.com/">javathinking</a></li>
<li><a href="http://www.novell.com/">novell</a></li>
</ul>
</div>

</div>

</body>
</html>

coothead
tfit
03-19-2008, 07:43 PM
Coothead,

Thanks. Unfortunately it doesn't sort of resolve the thing I actually want. I already saw one possibility here http://www.vishwebdesign.com/xhtml-css-tutorials/. The reason it doesn't help is that I want to hide the scrollbar completely. So the inner scrollbar would be positioned down a little so it wouldn't be visible. Ultimately I want it to look like this http://www.flashperfection.com/tutorials/Flash-MX-Using-the-ScrollPane-Component-56345.html
without of the use of flash.
But kudos for this tip:


#window2 {
width:1005px; /* this value is (8x102 - the 'a' width plus border) + (8x21 - the 'li' margin-left plus 21 for the right) */
}


Well if it isn't possible I'll work with this because I took already much of my time.