How can I set the text of an item to be middle aligned vertically? I am guessing that I can do this with the customrules property on the style, but it doesn't appear to work. Here is my HTML for your review, and I am using 8.1.20081.1000.
<ignav:UltraWebMenu ID="webMenu" BackColor="#000066" runat="server" BorderStyle="None" Cursor="Hand" ImageDirectory="img/" > <HoverItemStyle BorderStyle="None" ForeColor="Red" BackColor="#6699CC" CssClass="tophover"></HoverItemStyle> <SeparatorStyle Height="1px" BorderStyle="None" BackgroundImage="ig_tab_defrr1.gif" BackColor="#6699CC" CssClass="SeparatorClass" CustomRules="background-repeat:repeat-x; "></SeparatorStyle> <ExpandEffects ShadowColor="102, 153, 204" Type="Slide"></ExpandEffects> <TopSelectedStyle BorderStyle="None" CssClass="TopHover"></TopSelectedStyle> <IslandStyle BackColor="#000066" ></IslandStyle> <DisabledStyle CssClass="DisabledClass"></DisabledStyle> <TopLevelHoverItemStyle CssClass="TopHover"></TopLevelHoverItemStyle> <Styles> <ignav:Style Cursor="Hand" BorderStyle="None" ForeColor="White" BackColor="#000066" CssClass="TopClass" Font-Bold="true" CustomRules="vertical-align:middle;"></ignav:Style> <ignav:Style Cursor="Hand" BorderStyle="None" ForeColor="Black" BackColor="#6699CC" CssClass="TopHover" Font-Bold="true" CustomRules="vertical-align:middle;"></ignav:Style> </Styles> <Levels> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="0"></ignav:Level> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="1"></ignav:Level> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="2"></ignav:Level> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="3"></ignav:Level> </Levels> <ItemStyle CssClass="topclass" Width="100%"> <Padding Left="10px" /> </ItemStyle> <Images> <ScrollTopImage Url="ig_menu_scrollupwhite.gif"></ScrollTopImage> <ScrollTopDisabledImage Url="ig_menu_scrollup_disabled.gif"></ScrollTopDisabledImage> <ScrollBottomDisabledImage Url="ig_menu_scrolldown_disabled.gif"></ScrollBottomDisabledImage> <ScrollBottomImage Url="ig_menu_scrolldownwhite.gif"></ScrollBottomImage> <SubMenuImage Url="./img/arrow.gif"></SubMenuImage> </Images> <HeaderStyle ForeColor="White" /> <MenuClientSideEvents InitializeMenu="" ItemChecked="" ItemClick="" ItemHover="" SubMenuDisplay="" /> </ignav:UltraWebMenu>
Thanks,
Rob
Hi Rob,You are right you could achieve that by applying custom CSS classes. Unfortunatelly the provided HTML is not enough, because we can't see the CSS declarations (for example the TopClass), nor we have the images stated in the definitions. One thing that I see is that you are once referencing TopClass (in levels declaration), and once you are referencing topclass (in ItemStyle declaration). Although CSS is supposed to be case-insensitive, we suggest that you keep consistance between class definitions within a stylesheet and class names used in markup.
Having in mind that provided markup does not have any items defined, I tried adding some and I see that text is centered vertically. But I also added a Height definition to the ItemStyle.
Hope this helps!
Unfortunately, I am still having this issue. Here is everything as it stands now.
HTML for menu:
<ignav:UltraWebMenu ID="webMenu" BackColor="#000066" runat="server" BorderStyle="None" Cursor="Hand" ImageDirectory="img/" > <HoverItemStyle BorderStyle="None" ForeColor="Red" BackColor="#6699CC" CssClass="TopHover"></HoverItemStyle> <SeparatorStyle Height="1px" BorderStyle="None" BackgroundImage="ig_tab_defrr1.gif" BackColor="#6699CC" CssClass="SeparatorClass" CustomRules="background-repeat:repeat-x; "></SeparatorStyle> <ExpandEffects ShadowColor="102, 153, 204" Type="Slide"></ExpandEffects> <TopSelectedStyle BorderStyle="None" CssClass="TopHover"></TopSelectedStyle> <IslandStyle BackColor="#000066" ></IslandStyle> <DisabledStyle CssClass="DisabledClass"></DisabledStyle> <TopLevelHoverItemStyle CssClass="TopHover"></TopLevelHoverItemStyle> <Styles> <ignav:Style Cursor="Hand" BorderStyle="None" ForeColor="White" BackColor="#000066" CssClass="TopClass" Font-Bold="true" CustomRules="vertical-align:middle;"></ignav:Style> <ignav:Style Cursor="Hand" BorderStyle="None" ForeColor="Black" BackColor="#6699CC" CssClass="TopHover" Font-Bold="true" CustomRules="vertical-align:middle;"></ignav:Style> </Styles> <Levels> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="0"></ignav:Level> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="1"></ignav:Level> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="2"></ignav:Level> <ignav:Level LevelHoverClass="TopHover" LevelClass="TopClass" Index="3"></ignav:Level> </Levels> <ItemStyle CssClass="TopClass" Width="100%" CustomRules="vertical-align:middle;"> <Padding Left="10px" /> </ItemStyle> <Images> <ScrollTopImage Url="ig_menu_scrollupwhite.gif"></ScrollTopImage> <ScrollTopDisabledImage Url="ig_menu_scrollup_disabled.gif"></ScrollTopDisabledImage> <ScrollBottomDisabledImage Url="ig_menu_scrolldown_disabled.gif"></ScrollBottomDisabledImage> <ScrollBottomImage Url="ig_menu_scrolldownwhite.gif"></ScrollBottomImage> <SubMenuImage Url="./img/arrow.gif"></SubMenuImage> </Images> <HeaderStyle ForeColor="White" /> <MenuClientSideEvents InitializeMenu="" ItemChecked="" ItemClick="" ItemHover="" SubMenuDisplay="" /> </ignav:UltraWebMenu>
Entry in my styles.css
.TopClass{ background-color:red !important ; /*for debugging*/ vertical-align: middle !important; }
Code that creates a simple item
Dim parent As Item = Me.webMenu.Items.Add("Home") If Not m_HideIcons Then parent.ImageUrl = "./img/home.gif" If Not m_HideIcons Then parent.HoverImageUrl = "./img/home_hover.gif" parent.Tag = "home"
The images are simle 32x32 gifs.
Finally, here is the actual HTML sent to the browser
<TABLE class="ig_e9f5782d_r1" id="MyControl1webMenu_MainM" style="BACKGROUND: #000066; CURSOR: hand; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" cellSpacing="1" cellPadding="2" border="0" igLevel="0" submenu="1" _old> <TBODY> <TR> <TD igitem="1"> <TABLE class=" ig_e9f5782d_r2 TopClass" id="MyControl1webMenu_1" hideFocus cellSpacing="0" cellPadding="2" width="100%" igTop="1" igHov="TopHover ig_e9f5782d_r9 TopHover" ighovimage="./img/home_hover.gif" igTag="home" _old igClass=" ig_e9f5782d_r2 TopClass" igoldhovimage="http://localhost/pricebookconverted/img/home.gif"> <TBODY> <TR> <TD width="1"><IMG src="http://localhost/pricebookconverted/img/home.gif" /></TD> <TD align="left"><NOBR>Home</NOBR></TD> </TR> </TBODY> </TABLE> </TD> </TR> <TR style="DISPLAY: none; VISIBILITY: hidden"> <TD> <SPAN id="MyControl1_webMenu" style="DISPLAY: none" name="MyControl1_webMenu"></SPAN> <INPUT id="MyControl1:webMenu" type="hidden" name="MyControl1:webMenu" value="" /> </TD> </TR> </TBODY></TABLE>
I was working under the impression that the ignav:Style tags in the definition were the actual styles, and the entry in my CSS file was unncessary.
If you look at the HTML that is actually sent to the browser, it applies the classname to the table that actually holds the items. Does the webmenustyle make any difference?