button out of place in FF

I'm having some serious issues with a single button on my form. I'm not new to CSS but am to asp.net. 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 asp.net 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

Who is Participating?
CtrlAltDlConnect With a Mentor Commented:
try setting the ImageAlign property:
<asp:ImageButton ImageAlign="Middle"
alistarAuthor Commented:
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 asp.net better

Thanks for your help!
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 asp.net attributes.

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

 and then assign it like this:
<asp:ImageButton CSSClass="imgButton"
Make sure you learn about themes and skins in asp.net, because you can setup default styles for your asp.net controls using a skin file.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.