Results 1 to 7 of 7

Thread: Button image works in FF and not in IE

  1. #1

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Button image works in FF and not in IE

    I've got two buttons that I style with jQuery css styling - I don't actually make these into jQuery buttons with the .BUTTON() method but I've got the CSS hardwired in the page html (I'm cloning these buttons all over the place)...

    But at any rate - these buttons look good in FF on my machine and look good in IE on my development machine.

    In production at the client site some work in IE and some don't.

    I'm attaching images of both a working and non-working button with the COMPUTED STYLE from DebugBar
    Attached Images Attached Images  

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  2. #2
    Learning .Net danasegarane's Avatar
    Join Date
    Aug 2004
    Location
    VBForums
    Posts
    5,853

    Re: Button image works in FF and not in IE

    Not able to see the images. Attach a bigger image
    Please mark you thread resolved using the Thread Tools as shown

  3. #3
    Fanatic Member
    Join Date
    Jun 2008
    Posts
    1,023

    Re: Button image works in FF and not in IE

    Quote Originally Posted by danasegarane View Post
    Not able to see the images. Attach a bigger image
    the image is 1504x812 pixels, that's big enough, if you open it in a new tab and zoom in.

    either way, I don't use IE or FireFox for anything except viewing my designs, just to check if they show properly. could you post some source code?
    Last edited by Justa Lol; Oct 30th, 2011 at 05:23 PM.

  4. #4

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Button image works in FF and not in IE

    This code puts a WORKING button in the ACCORDION

    Code:
    $('#acs-button-list .acs-panel-btn-clear').clone().appendTo("#" + strNewAccordionDiv).removeAttr("id")
                                                            .addClass("acs-tracker-buttons")
                                                            .addClass("ui-state-highlight");
    getting the button from this pool of hidden elements I have on the page...

    Code:
                <div id="acs-button-list">
                    <button type="button" title="Add to Folder" class="acs-panel-btn-add ui-button ui-widget ui-state-highlight ui-corner-all ui-button-icon-primary" role="button" aria-disabled="false" id="acs-button-list-add"><span class="ui-button-icon-primary ui-icon ui-icon-plus"></span></button>
                    <button type="button" title="Open Folder Detail Panel" class="acs-panel-btn-edit ui-button ui-widget ui-state-highlight ui-corner-all ui-button-icon-primary" role="button" aria-disabled="false" id="acs-button-list-edit"><span class="ui-button-icon-primary ui-icon ui-icon-folder-open"></span></button>
                    <button type="button" title="Edit the Folder Summary Grid" class="acs-panel-btn-open ui-button ui-widget ui-state-highlight ui-corner-all ui-button-icon-primary" role="button" aria-disabled="false" id="acs-button-list-open"><span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span></button>
                    <button type="button" title="Clear Lookup Text" class="acs-panel-btn-clear ui-button ui-widget ui-state-highlight ui-corner-all ui-button-icon-primary" role="button" aria-disabled="false" id="acs-button-list-clear"><span class="ui-button-icon-primary ui-icon ui-icon-cancel"></span></button>
                    <button type="button" title="Open Reader Panel" class="acs-panel-btn-reader ui-button ui-widget ui-state-highlight ui-corner-all ui-button-icon-primary" role="button" aria-disabled="false" id="acs-button-list-reader"><span class="ui-button-icon-primary ui-icon ui-icon-script"></span></button>
    This code creates the NON WORKING buttons that don't work in IE in production - but do WORK in IE on my development machine...

    Code:
    $("#acs-button-list-clear").clone().prependTo("#" + strPanelHeading).removeAttr("id").attr("id", strPanelHeading + "clear");
    $("#" + strPanelHeading + "clear").addClass("acs-reader-clear").attr("title", "Clear Reader Selections");
    
    for (var i = objGrid.boottab.length - 1; i >= 0; i--) {
        $("#acs-button-list-" + objGrid.boottab[i]).clone().prependTo("#" + strPanelHeading).removeAttr("id").attr("id", strPanelHeading + objGrid.boottab[i]);
    }
    It took me two hours to even find an IE debugger (DebugBar) - which I had to install on the webserver of my customer to even see the problem - I do all my development in FF and then check if IE looks ok on my laptop - which it does for these buttons...

    So I found DebugBar and the image I posted in the OP (just download it and open it - it should be readable once a local jpg...) are the COMPUTED LAYOUT of the button...

    Does that mean I could create a sample page of just that COMPUTED STYLING and see it both work and NOT work in IE???

    What styling feature would make a button collapse in IE - or am I missing a reference to a CSS style that trumps these ones or gives defaults to this one???

    Is it that the parent objects are different between these two elements???

    I have done a lot of painful INLINE type stuff to make the buttons appear next to each other horizontally in the past...

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Button image works in FF and not in IE

    The easiest way for someone to troubleshoot this for you is if you can provide it either online or as an attachment in the thread. Also, always state what version of IE you're talking about; they all have their unique bug sets.

    Why are you using <span> elements inside of <button> for styling? Can you not omit them and style the <button>s instead?

  6. #6

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Button image works in FF and not in IE

    My laptop and the PRODUCTION server both run IE8 - laptop that WORKS is using 8.0.7601.17514

    Production server that DOES NOT work is using 8.0.6001.18702.

    Since they were both using different rev levels of IE8 I didn't think that could be the culprit - although I'm sure it could!

    The reason I'm using the span is because that is what I found the REAL jQuery .Button widget used - I was hoping if I used the same type of element that the styling would work the same...

    I can't really give you source as the page builds dynamically after PAGE READY using all kinds of jQuery clone methods...

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  7. #7
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Button image works in FF and not in IE

    Quote Originally Posted by szlamany View Post
    I can't really give you source as the page builds dynamically after PAGE READY using all kinds of jQuery clone methods...
    FYI, the Firefox WebDeveloper extension has an option for "View Generated Source" that will give you this. Alternatively you can open firebug at the "HTML" tab, or Chrome Developer Tools, and right-click on the <html> tag and select "Copy HTML".
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width