I am having trouble getting MSIE to display my Joomla menu properly (i.e., the
way it looks in FireFox). MSIE is adding extra space
above the separators.
Below is the relevant snippet of menu HTML, followed by the related CSS. The
actual site is at www.AdamsStreet.info . Can anybody
help me understand why this is happening? Thanks.
=============================================================
HERE IS THE MENU HTML:
<div id="menu-panel" >
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td>
<a href="." class="mainlevel" id="active_menu">Home</a>
</td></tr>
<tr align="left"><td>
<a href="." class="mainlevel" >Members Login</a>
</td></tr>
<tr align="left"><td>
<img src="HR-110x02.png" border="0" alt=""/>
<span class="mainlevel" ></span>
</td></tr>
<tr align="left"><td>
<a href="." class="mainlevel" >Hot News!</a>
</td></tr>
<tr align="left"><td>
<a href=" CurrentCalendar.php" target="_blank" class="mainlevel">
Calendar</a>
</td></tr>
<tr align="left"><td>
<img src="HR-110x02.png" border="0" alt=""/>
<span class="mainlevel" ></span>
</td></tr>
<!--The above pattern repeats many times:
two rows of menu items,
followed by one row with an image of a horizontal rule -->
</table>
</td></tr>
</table>
</div>
===============================================================
HERE IS THE CSS:
/* MAP OF TEMPLATE LAYOUT */
#menu-panel {
float:left;
width:120px; overflow:hidden; z-index:2;
background-color: #309; layer-background-color: #309;
}
/* JOOMLA-PRODUCED SELECTORS */
/*
* MODULETABLES:
*
* JOOMLA packages each module's output in a moduletable class,
* and puts the module's Title in the table's TH row
*/
table.moduletable {
padding : 0;
margin : 0;
border : 0;
width : 100%;
}
table.moduletable td {
padding : 1px 0 0 0;
margin : 0;
border : 0;
color : #000;
}
/*
* Overrides for modules assigned to blue left-hand menu-panel:
*/
#menu-panel table.moduletable {
/* margin : 0; don't change this.
For browser compatibility, use padding
on the menu-panel DIV */
border-top : 10px solid #fff; /* was 0 */
border-bottom : 3px solid #309; /* was 0 */
}
#menu-panel table.moduletable td {
padding : 1px 0 0 5px; /* was 1px 0 0 0 */
color : #ffe; /* was 000 */
}
/* JOOMLA CSS
* MAIN MENU: MAIN LEVEL */
A.mainlevel {
width : auto;
display : block;
margin : 2px 0 2px 0; /* added line to space the menu items */
}
/* MY FRUITLESS ATTEMPTS TO SOLVE THIS PROBLEM */
#menu-panel table.moduletable /* table */ td IMG {
padding : 0; /* to avoid MSIE adding space above
separators, but doesn't work */
margin : 0;
}
#menu-panel table.moduletable /* table td */ SPAN.mailevel {
padding : 0; /* to avoid MSIE adding space above
separators, but doesn't work */
margin : 0;
visibility : hidden;
}
#menu-panel TD SPAN.mainlevel {
padding : 0;
margin : 0px 0 0px 0; } /* used in separators of some
menu-producing modules */
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
