I am facing an issue with a div that has nested divs and multiple CSS classes applied to it. Oddly, it appears that all the functionality only applies to the text part of my div. If there is no text inside the div, none of the events or CSS styles work.
Any JQuery events and CSS properties seem to only affect the text within the div and not the entire div itself.
Even something as simple as adding cursor: pointer; in the CSS or attaching a click event handler like this:
$("#myDiv").on("click", function (event) {
alert("works");
});
I have tried setting a background-color, using a background-image, trying out both the click event and on event. But nothing seems to be working.
HTML
<div id="content">
<div id="meatBlock" class="blocks">
PORK & BEEF
</div>
<div id="cheeseBlock" class="blocks">
CHEESE & ONIONS
</div>
</div>
CSS
Below is the CSS for one of the internal divs that is causing issues:
.blocks
{
float: left;
width: 310px;
height: 141px;
}
#content
{
max-width: 975px;
min-width: 975px;
margin: 0 auto;
width: 50%;
}
If I remove the float:left property from the CSS, everything works fine. This behavior is puzzling me especially since I cannot replicate it on jsfiddle.
Does anyone have any suggestions or insights into what might be happening here? I specifically need the solution to work on IE8+ only, so compatibility with Chrome or Firefox is not a concern.