button out of place in FF

Posted on 2009-02-11
Last Modified: 2013-12-07
I'm having some serious issues with a single button on my form. I'm not new to CSS but am to The button sits too high in firefox and slightly too low in IE. (See images below. The button in question is the "Add Data" button.)

I've tried everything I can think of in css: padding, margin, divs, tables, floats, line-height, etc. and nothing will work. When I use padding on just the button, it moves the button and the textbox and label that are on the same line. To add to this problem if I get it close to right in FF, it's way too low in IE. I must be doing something wrong...

Any and all suggestions will be appreciated! Thanks in advance.

The section of code in my is as follows:
<%--Start Core Zone Section--%>

        <div class="DFCSectionHeader" style="height: 33px;">

            <div style="float: left;">

                <img src="Images/DFCSectionHeaderLeft.jpg" /></div>

            <div class="DFCSectionHeaderTitle">

                <div class="helpSymbol">

                    <img src="Images/DFCHelpSymbol.jpg" /></div>

                Core Zone Stand Table


            <div style="float: left;">

                <img src="Images/DFCSectionHeaderRight.jpg" /></div>


        <%--Start Core Zone Fields--%>

        <div id="coreZoneDiv" runat="server" class="form" style="clear: both;">

            <div style="float: left; width: 549px; height: 270px;">

                    <asp:Label ID="coreStandAgeLabel" runat="server" CssClass="formLabel" Font-Bold="True"

                         Text="Stand Age" Width="110px"></asp:Label>

                    <asp:TextBox ID="coreStandAgeTextBox" runat="server" BorderColor="Gray" BorderStyle="Solid"

                        BorderWidth="1px" CssClass="formField"  Width="75px"></asp:TextBox><asp:RequiredFieldValidator

                            ID="RequiredFieldValidator5" runat="server" ErrorMessage="*" ControlToValidate="coreStandAgeTextBox"></asp:RequiredFieldValidator>

                    <br />

                    <asp:Label ID="coreDbhClassesTotalLabel" runat="server" CssClass="formLabel" Font-Bold="True"

                         Text="DBH Classes Total" Width="110px"></asp:Label>

                    <asp:TextBox ID="coreDbhClassesTotalTextBox" runat="server" BorderColor="Gray" BorderStyle="Solid"

                        BorderWidth="1px" CssClass="formField"  Width="75px"></asp:TextBox>

                    <asp:ImageButton ID="CoreAddDataButton" runat="server" ImageUrl="~/Images/DFCAddDataButton1.jpg" Width="84" Height="29" Text="Add My Data" CausesValidation="false"

                        OnClick="coreAddDataButton_Click" /> 



                <%--Core Zone Result Fields--%>

                <div style="width: 415px; margin-top: 8px; position: relative; left: -6px;">

                    <div style="margin: 0px; padding: 0px; height: 12px">

                        <img src="Images/DFCResultsLongTop.jpg" />


                    <div style="height: 95px; margin: 0px; padding: 0px 7px; background-image: url(Images/DFCResultsLongFill.jpg);

                        background-repeat: repeat-y;">

                        <asp:Label ID="resultsInfo" runat="server" ForeColor="#929083" 

                            Text="Enter your data in the grid and proceed to the Inner Zone Stand Table."></asp:Label>

                        <br />

                        <asp:Label ID="coreZoneAcresLabel" runat="server" CssClass="formLabel" Font-Bold="True"

                             Text="Core Zone Acres" Width="110px"></asp:Label>

                        <asp:TextBox ID="coreZoneAcresTextbox" Enabled="false"  runat="server" BorderColor="Gray" BorderStyle="Solid"

                            BorderWidth="1px" CssClass="formField"  Width="75px"></asp:TextBox>

                        <asp:Label ID="basalAreaLabel" runat="server" CssClass="formLabel" Font-Bold="True"

                             Text="Basal Area / Acre" Width="110px"></asp:Label>

                        <asp:TextBox ID="coreBasalAreaTextBox" Enabled="false"  runat="server" BorderColor="Gray" BorderStyle="Solid"

                            BorderWidth="1px" CssClass="formField"  Width="75px"></asp:TextBox>

                        <asp:Label ID="treesPerAcreLabel" runat="server" CssClass="formLabel" Font-Bold="True"

                             Text="Trees / Acre" Width="110px"></asp:Label>

                        <asp:TextBox ID="coreTreesPerAcreTextBox" Enabled="false"  runat="server" BorderColor="Gray" BorderStyle="Solid"

                            BorderWidth="1px" CssClass="formField"  Width="75px"></asp:TextBox>

                        <asp:Label ID="percentConiferLabel" runat="server" CssClass="formLabel" Font-Bold="True"

                             Text="Percent Conifer" Width="110px"></asp:Label>

                        <asp:TextBox ID="corePercentConiferTextBox" Enabled="false"  runat="server" BorderColor="Gray" BorderStyle="Solid"

                            BorderWidth="1px" CssClass="formField"  Width="75px"></asp:TextBox>



                        <img src="Images/DFCResultsLongBottom.jpg" />




            <%--End Core Zone Fields--%>

            <%--Start Core Zone Data Grid--%>

            <div style="float: left; margin-left: 40px; width: 257px; height: 200px; position: relative;

                top: -36px">

                <div class="dbhDataGridHeader">

                    <span style="margin-right: 32px">DBH Class</span> <span style="margin-right: 30px">



                <asp:Panel ID="coreZoneDbhPanel" runat="server" CssClass="dbhDataGridPanel">

                    <img id="coreDimmedDataImg" src="Images/DFCDimmedDataGrid.jpg" runat="server" style="position:relative;left:-11px;" /></asp:Panel>


                    <div style="margin-left:9px;">

                    <asp:ImageButton ID="CalculateButton" runat="server" Text="Calculate" 

                        onclick="CalculateCZ_Click" CssClass="dbhCalculateButton" ImageUrl="~/Images/DFCCalculateButton.jpg" Visible="false"/>

                    <asp:Button ID="dbhDataGridToggleButton" runat="server" Text="- Minimize Grid"


                            CssClass="dbhDataGridToggleButton" Visible="false" 





            <%--End Core Zone Data Grid--%>


Open in new window

Question by:alistar
    LVL 14

    Accepted Solution

    try setting the ImageAlign property:
    <asp:ImageButton ImageAlign="Middle"

    Author Comment

    hmmm, well, it's got both buttons doing the same thing now. I should be able to use css positioning to get it where I want it.

    I do wish I new the attributes in better

    Thanks for your help!
    LVL 14

    Expert Comment

    You can add some padding to the top and bottom of the div to get it in the middle.

    Sometimes it's just better to do it all in CSS instead of using the attributes.

    Create a CSS class:
        vertical-align: middle;
        padding: 10px;

     and then assign it like this:
    <asp:ImageButton CSSClass="imgButton"
    LVL 14

    Expert Comment

    Make sure you learn about themes and skins in, because you can setup default styles for your controls using a skin file.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Several part series to implement Internet Explorer 11 Enterprise Mode
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now