[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 715
  • Last Modified:

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>
            <div style="float: left;">
                <img src="Images/DFCSectionHeaderRight.jpg" /></div>
        </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>
                    <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>
                    </div>
                    <div>
                        <img src="Images/DFCResultsLongBottom.jpg" />
                    </div>
                </div>
            </div>
            <%--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">
                    Conifer</span>
                    Hardwood</div>
                <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>
                    <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"
                            OnClick="dbhDataGridToggleButton_Click" 
                            CssClass="dbhDataGridToggleButton" Visible="false" 
                            CausesValidation="False"/>
                    </div>
                </div>
            </div>
            <%--End Core Zone Data Grid--%>
        </div>

Open in new window

exampleFF.jpg
exampleIE7.jpg
0
alistar
Asked:
alistar
  • 3
1 Solution
 
CtrlAltDlCommented:
try setting the ImageAlign property:
<asp:ImageButton ImageAlign="Middle"
0
 
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!
0
 
CtrlAltDlCommented:
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:
img.imgButton
{
    vertical-align: middle;
    padding: 10px;
}

 and then assign it like this:
<asp:ImageButton CSSClass="imgButton"
0
 
CtrlAltDlCommented:
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.

http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now