I’m having a problem getting my lists to resize correctly in Firefox. Which obviously means I’m not doing something right if it works in IE and not Firefox.
When resizing the text, when my text wraps to the next line, the block height doesn’t seem to adjust in Firefox and the text overlaps itself. I’d like for this page to be viewed in a reasonable amount of text sizes.
Any help is greatly appreciated.
[CODE]
#module {
width: auto;
margin-bottom: 10px;
padding: 2px;
background-color: #FFF;
border: 1px solid #65655f;
}
.moduleTitle {
font-weight: bold;
font-size: 1em;
width: auto;
height: 1.4em;
padding: 5px 0 0px 5px;
background-image: url(‘images/moduleHeader_background.jpg’);
background-repeat: repeat-x;
background-position: bottom left;
}
#module ul#moduleList {
margin: 0;
padding: 0;
list-style: none;
}
#module ul#moduleList a {
display: block;
height: 1.4em;
}
#module ul#moduleList a:link,
#module ul#moduleList a:visited {
background-color: #FFF;
color: #000;
}
#module ul#moduleList a:hover {
background-color: #00aeef;
color: #FFF;
text-decoration: none;
}
[code=html]
<div id=”module”>
<div class=”moduleTitle”>Admin Tools</div>
<div class=”moduleContent”>
<ul id=”moduleList”>
<li><a href=”#”>Manage User Group Profile</a></li>
<li><a href=”#”>Activate Users</a></li>
<li><a href=”#”>Manage User Accounts</a></li>
<li><a href=”#”>Manage Audiences</a></li>
<li><a href=”#”>Update Profile</a></li>
<li><a href=”#”>Change Password</a></li>
<li><a href=”#”>Manage Assignments</a></li>
<li><a href=”#”>Manage Change List</a></li>
</ul>
</div>
</div>