PDA

View Full Version : CSS button background styling not showing in IE8. Fine in FF and Chrome



JackJohnsonX
13 Nov 2014, 6:34 AM
I added some minor CSS styling to my button and its not working in IE8(or 7)

CSS



.search-button {
background:#00A300 !important;
border-radius:20px !important;
background-image: none !important;
}

.search-button .x-btn-inner {
color: #FFFFFF !important;
font-size: 13px !important;
}

button


xtype: "button",
itemId:"searchBtn",
text: "<b>Search &gt;&gt;</b>",
formBind: true,
cls:"search-button",
baseCls:null


the styling for .x-btn-inner shows. Its the background color thats not showing. Nor does border radius (for rounded corners) but I think rounded corners arent supposed to work In IE so thats no biggie. Just the BG is an issue

When I hover over the button in IE or click it, I see my background color show around the border of the button. BG color then disappears on mouseout or depress of the btn.

slemmon
17 Nov 2014, 2:12 PM
The best way to adjust the theming of components is to follow the steps outlined in the theming guide:
http://docs.sencha.com/extjs/5.0/core_concepts/theming.html

If you choose to style using select rules you'll need to clarify the rules based on what browser you're working with since the markup may be different across browsers depending on the component. You'll need to inspect the DOM to see what you'll be styling against (the internal markup on components can change between framework versions so this route is possible to take, but may require additional maintenance over time as well as a larger initial time investment to try and normalize styling across all target browsers).