Problem with IE

[Amy P]

Is there a reason that storefront is not fully compatible with Internet Explorer?

I know we have had problems with the admin panel not working properly and are fine working in that in Firefox however alot of our customers use Internet Explorer and the front end of our website displays differently in IE than it does in Firefox.

You would think storefront would be compatible with the number one used web browser.

The biggest problem we are experiencing right now is how the top of our webpage is displayed. We are trying to add text for a coupon code and in IE it displays above our top red menu bar and in Firefox it display on top of the top red menu bar which is what we want. Please see attachements for pics.

Does anyone know how to fix this so it looks the same on both?

[jerm324]

I get the problem in Firefox and Chrome.

The div your banner is contained in should be nested in the header div. From there you should be able to adjust the css to get it to align correctly underneath the Contact/account/cart/wishlist links

[webopius]

I don't think this issue is anything to do with ASPDotNetStorefront. It's your HTML and CSS that needs fixing.

You have three blocks:

- The header (with the logo)
- The coupon offer
- The red menu bar

Each of these is a div and you've floated the coupon offer to the right to try and get it to appear over the menu bar (which it does in some browsers).

The problem is that you've set the width of the red menu bar (div id horizNav) to 905px and given it a full width background. Because of this, there's no space left in some browsers into which to place the coupon offer so quite correctly, the browser does the next best thing and places the menu bar below the coupon offer so that it can fill the 905px width.

What I'd do is put the coupon offer within the horizNav div. I'd make the horizNav div position relative, then add the following css to the coupon div:

positive: absolute;
right: 0px;
top: 0px;
z-index: 100;

...and remove the float.

[ChrisAtAbilityBusiness]

I don't think this issue is anything to do with ASPDotNetStorefront. It's your HTML and CSS that needs fixing.

Agreed.

Cross-browser testing and development can be a tricky and difficult thing to pull off at the best of times, darn near impossible at others. But the minute you add HTML/CSS and it doesn't look the way you intend, you cannot really blame the platform.

[btappan2]

I need help with something similar, I'd like to put a full width header image as the background for the header and have the minicart and account links float in front of it. I'd also like to put a little text below those links. When I put a full width image in now as the logo.gif, it pushes those links below it, similar to the post above. How do I modify the code below to use the logo as a background?

        <!-- <div id="login">
            <span id="userName">
                <asp:Literal ID="ltrUserName" runat="server" Text='<%$ Tokens:UserName %>' /></span><span
                    id="loginText"><a href='<asp:Literal ID="Literal1" runat="server" Text="<%$ Tokens:SignInOut_Link %>" />'><asp:Literal
                        ID="ltrSignInOutText" runat="server" Text='<%$ Tokens:SignInOut_Text %>' /></a></span>
        </div> -->
        <div id="header">
            <div style="float: left">
                <a runat="server" id="logo" class="topLogo" href="~/default.aspx" title="RNTsupply.com" />
            </div>
            <div style="float: right">
                <a runat="server" class="account" href="~/account.aspx">Your Account</a></div>
            <!-- <div style="float: right">
                <a runat="server" class="contact" href='<%$ Tokens:TopicLink, Contact %>'>Contact Us</a></div> -->
            <%  if (ShowMiniCart == false)
                { %>
            <%-- If minicart is not enabled, use the default link --%>
            <div style="float: right">
                <asp:Panel ID="pnlShoppingCart" runat="server">
                    <a runat="server" class="cart" href="~/shoppingcart.aspx">Shopping Cart (<aspdnsf:Token ID="tknNumCartItems" runat="server" Type="NUM_CART_ITEMS" />)</a></asp:Panel>                    
            </div>
            <% } %>
        </div>