Button image works in FF and not in IE

[szlamany]

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

[danasegarane]

Not able to see the images. Attach a bigger image

[Justa Lol]

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?

[szlamany]

This code puts a WORKING button in the ACCORDION

$('#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...

            <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...

$("#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...

[SambaNeko]

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?

[szlamany]

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...

[tr333]

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".