Scrollbars in Mozilla and overflow property (Another problem)

A

admin

Administrator
Staff member
Good afternoon!

I'm trying to create a navigation list, but because I want the navigation to have vertical scrollbars when necessary I've put the overflow property to auto.

I add a css rule to the list element (.nav_ul) so it is left aligned inside the div. To do this I change it's padding to 0px.

This works correctly in IE6 but in Mozilla Firefox an extra horizontal scrollbar appears and the list inside the navigation div appears to have more than 100% width.

If I remove the padding rule, the horizontal scrollbar disappears.
Isn't this strange?

Can anyone help me?


Here is the code:



<html>
<head>
<title>Navigation</title>
<style>

html, body {
width: 100%;
height: 98%;
background-color: #ffeecc;
padding: 0px;
margin: 0px;
}
.main {
width: 98%;
height: 98%;
padding: 0px;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 1%;
margin-rigth: 1%;
background-color: #ddbbaa;
}

.nav {
width: 30%;
height: 100%;
float: left;
background-color: #cc99aa;
overflow: auto;
padding: 0px;
margin: 0px;

}

.nav_ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}

</style>
</head>
<body>

<div class="main">

<div class="nav">

<ul class="nav_ul">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 7</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 8</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 9</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 10</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 11</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 12</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 13</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 14</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 15</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 16</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 17</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 18</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 19</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 20</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 21</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 22</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 23</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 24</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 25</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 26</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 27</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 28</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 29</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 30</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 31</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 32</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 33</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 34</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 35</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 36</a></li>

</ul>

</div>

</div>

</body>
</html>The <ul class="nav_ul"> has a default width:100%; set it to less than 100%Fang, thanks again for the quick answer.

But the solution you propose doesn't work for me because I want the list li elements to have borders, and if I change the width to less than 100% the borders don't occupy all available horizontal space.

Here is the code:


<html>
<head>
<title>Navigation</title>
<style>

html, body {
width: 100%;
height: 98%;
background-color: #ffeecc;
padding: 0px;
margin: 0px;
}
.main {
width: 98%;
height: 98%;
padding: 0px;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 1%;
margin-rigth: 1%;
background-color: #ddbbaa;
}

.nav {
width: 30%;
height: 100%;
float: left;
background-color: #cc99aa;
overflow: auto;
padding: 0px;
margin: 0px;

}

.nav_ul {
width: 97%;
padding: 0px;
margin: 0px;
list-style-type: none;
}

.nav_ul li {
padding: 0px;
margin: 0px;
}

.nav_ul a {
padding: 0px;
margin: 0px;
border: 1px solid Black;
display: block;
}

.nav_ul a:hover {
background-color: #ddbbaa;
}

</style>
</head>
<body>

<div class="main">

<div class="nav">

<ul class="nav_ul">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 7</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 8</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 9</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 10</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 11</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 12</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 13</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 14</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 15</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 16</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 17</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 18</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 19</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 20</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 21</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 22</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 23</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 24</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 25</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 26</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 27</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 28</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 29</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 30</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 31</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 32</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 33</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 34</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 35</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 36</a></li>

</ul>

</div>

</div>

</body>
</html>The default is full width, just remove the width completelyHello again!

I didn't understand your previous post.
Can you explain better?

I've removed all width style rules and the horizontal scrollbar still appears in Mozilla Firefox!Only from .nav_ulI've done that and the horizontal scrollbar still appears in Firefox!Add: list-style-position:inside; to .nav_ulFang, thanks again for your help. :)
Bye,
Migrate
 
You must log in or register to reply here.
Back
Top