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?

Code:

<!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...

Code:


<!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/tutor...ent-56345.html
without of the use of flash.
But kudos for this tip:

Code:

#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.

Thread: wrong scrolling with inline scrollbar

Thread Tools

Search Thread

wrong scrolling with inline scrollbar

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions