Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
445
layout moved in IE8 compared to IE7
posted

Hello,

I am using an ultra web toolbar and with IE7, the layout was correct, i.e buttons was left aligned. Now, using IE8, the buttons was not aligned any more: in the picture below, you could see the layout I have with IE8 from the first toolbar, and the second toolbar is the layout I would like to have; and I was with IE7.

Here is the code I used for the toolbar:

 <igtbar:UltraWebToolbar ID="ToolBarModule" runat="server" BackColor="White" BackgroundImage="../Images/gif/blueexplorer.gif"
    BorderStyle="None" Font-Names="Arial" Font-Size="8pt" ForeColor="Black" Height="16px"
    ImageDirectory="/ig_common/images/" ItemSpacing="0" ItemWidthDefault="20px" MovableImage="ig_tb_move03.gif"
    Width="800px" OnButtonClicked="ToolBarModule_ButtonClicked">
    <HoverStyle BackColor="Bisque" BackgroundImage="None" BorderColor="Navy" BorderStyle="Solid"
        BorderWidth="1px" Cursor="Default" Font-Names="Arial" Font-Size="8pt" ForeColor="Black">
    </HoverStyle>
    <SelectedStyle BackColor="Orange" BackgroundImage="OrangeExplorer.gif" BorderColor="Navy"
        BorderStyle="Solid" BorderWidth="1px" Cursor="Default" Font-Names="Arial" Font-Size="8pt"
        ForeColor="Black">
    </SelectedStyle>
    <DefaultStyle BackgroundImage="blueexplorer.gif" BorderColor="Menu" BorderStyle="Solid"
        BorderWidth="0px" Font-Names="Arial" Font-Size="8pt" ForeColor="Black">
    </DefaultStyle>
    <Items>
        <igtbar:TBarButton Key="Go2First" DisabledImage="../Images/png/dis_navigate_left2.png"
            HoverImage="" Image="../Images/png/navigate_left2.png" SelectedImage="" TargetUrlTriggerMode="OnToggleSelectOn">
            <Images>
                <DisabledImage Url="../Images/png/dis_navigate_left2.png" />
                <DefaultImage Url="../Images/png/navigate_left2.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBarButton Key="Go2Prev" DisabledImage="../Images/png/dis_navigate_left.png"
            HoverImage="" Image="../Images/png/navigate_left.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../Images/png/dis_navigate_left.png" />
                <DefaultImage Url="../Images/png/navigate_left.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBarButton Key="Go2Next" DisabledImage="../Images/png/dis_navigate_right.png"
            HoverImage="" Image="../Images/png/navigate_right.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../Images/png/dis_navigate_right.png" />
                <DefaultImage Url="../Images/png/navigate_right.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBarButton Key="Go2Last" DisabledImage="../Images/png/dis_navigate_right2.png"
            HoverImage="" Image="../Images/png/navigate_right2.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../Images/png/dis_navigate_right2.png" />
                <DefaultImage Url="../Images/png/navigate_right2.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBSeparator />
        <igtbar:TBarButton Key="new" DisabledImage="../Images/png/dis_notebook_add.png" HoverImage=""
            Image="../Images/png/notebook_add.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../Images/png/dis_notebook_add.png" />
                <DefaultImage Url="../Images/png/notebook_add.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBarButton Key="edit" DisabledImage="../Images/png/dis_edit.png" HoverImage=""
            Image="../Images/png/edit.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../Images/png/dis_edit.png" />
                <DefaultImage Url="../Images/png/edit.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBarButton Key="save" DisabledImage="../Images/bmp/dis_disk_blue_ok.bmp"
            HoverImage="" Image="../Images/png/disk_blue_ok.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../Images/png/dis_disk_blue_ok.png" />
                <DefaultImage Url="../Images/png/disk_blue_ok.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBarButton Key="cancel" DisabledImage="../Images/png/dis_disk_blue_error.png"
            HoverImage="" Image="../Images/png/disk_blue_error.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../Images/png/dis_disk_blue_error.png" />
                <DefaultImage Url="../Images/png/disk_blue_error.png" />
            </Images>
        </igtbar:TBarButton>
        <igtbar:TBarButton Key="delete" DisabledImage="../images/png/dis_garbage_ok.png"
            HoverImage="" Image="../images/png/garbage_ok.png" SelectedImage="">
            <Images>
                <DisabledImage Url="../images/png/dis_garbage_ok.png" />
                <DefaultImage Url="../images/png/garbage_ok.png" />
            </Images>
        </igtbar:TBarButton>
    </Items>
</igtbar:UltraWebToolbar>

 How could I all buttons left aligned in IE8?

Thanks for your help.

Damien

Parents
  • 12004
    posted

    Hello,

    I have sent this to development for a review. This may actually be a result of differences in how the browsers render the same html markup.

    You may be able to resolve this issue by removing the Width property from the markup of the UltraWebToolbar.

    Please let me know if that solution works for you.

    Sincerely,
    Duane

Reply Children