I have a weird issue. I have some icons that are being built based off some includes in a JSP, without getting to in-depth on that I have three Icons, and two line up perfectly after each other. The one at the bottom is the problem. Can you see based off the source code what is causing this?
This is what it looks like
The icon below the 2 is the <ul id="hp-dd-menu"
RENDERED HTML:
<div id="iconDiv">
<a id="scroll" href="show.hotpartslist?scroll=true&topcursortorder=DESC&topcursortprop=auditable.createdDate">
<img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/>
</a>
<a href='show.hotpartslist?excel=true'>
<img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/>
</a>
<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">→ ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC"> MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS"> SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC"> MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER"> OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT"> IMPACT</a></li></ul></li></ul>
<script type="text/javascript">
$(function()
{
try
{
DynarchMenu.setup('hp-dd-menu', { });
}
catch(exception)
{
alert("Failed to render other menu: " + exception.description);
}
});
CSS:
* Used to add non-standard icons to the top right icon list. */
#iconDiv
{
float: right;
width:120px;
}
If I was to move the two <a tags out of the div then I can get them on the same line, but there is a gap in between them:
rendered HTML:
<a id="scroll" href="show.hotpartslist?scroll=true&topcursortorder=DESC&topcursortprop=auditable.createdDate">
<img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/>
</a>
<a href='show.hotpartslist?excel=true'>
<img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/>
</a>
<div id="iconDiv">
<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">→ ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC"> MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS"> SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC"> MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER"> OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT"> IMPACT</a></li></ul></li></ul>
<script type="text/javascript">
$(function()
{
try
{
DynarchMenu.setup('hp-dd-menu', { });
}
catch(exception)
{
alert("Failed to render other menu: " + exception.description);
}
});
</script>
Im just trying to get all three on the same row next to each other.
EDIT:
<div style="float:right">
<a id="scroll" href="show.hotpartslist?scroll=true&topcursortorder=DESC&topcursortprop=auditable.createdDate">
<img class="icon" alt="Enable Scrolling" src="../images/scroll_enable.gif"/>
</a>
</div>
<a href='show.hotpartslist?excel=true'>
<img class="icon" alt="Download to Microsoft Excel" src="../images/excel.gif"/>
</a>
<div style="float:right">
<ul id="hp-dd-menu" style="display:none;"><li><img alt="Pick Date to Display" class="icon" src="../images/calendar/calendar.gif" /><ul><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=auditable.createdDate&topsortprop=auditable.createdDate&dateToDisplay=ADDED">→ ADDED</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMCRemarkDate&topsortprop=lastMCRemarkDate&dateToDisplay=MC"> MC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastSOSRemarkDate&topsortprop=lastSOSRemarkDate&dateToDisplay=SOS"> SOS</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastMDRemarkDate&topsortprop=lastMDRemarkDate&dateToDisplay=MMC"> MMC</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=lastOtherRemarkDate&topsortprop=lastOtherRemarkDate&dateToDisplay=OTHER"> OTHER</a></li><li><a href="show.hotpartslist?sorttype=top&topcursortorder=ASC&defaultSort=true&defaultOrder=ASC&topcursortprop=impactDate&topsortprop=impactDate&dateToDisplay=IMPACT"> IMPACT</a></li></ul></li></ul>
<!-- close the icon div since we specified 'other' -->
</div>
</div>
I’ve tried downloading the ‘DynarchMenu’ js file that you’re using, with no luck. Without said file, I can’t really be certain, but I believe your issue is that the DynarchMenu is building the menu from your ul and li tags. When it does that, it’s presumably placing them into divs with set css rules which is causing your problem. (divs automatically bump to a new line)
You’re welcome to link me to the js file, and I can give you a better answer than this if you’d like.
One thing that may work, then again I can’t really test it, would be to place div’s around each of your links with the ‘float:right’ attribute:
Hope this helps.
Cheers.