Question

I have a web application that has been running just fine in Internet Explorer 9, Firefox, and Chrome, but a couple strange features occur in Internet Explorer 7 and sometimes even 8. I’m not sure if this is just an IE problem, given that their known to have issues from time to time, or if this is a problem with my own code. First, I’m using jQuery UI Tabs, and in all browsers bug IE7, it looks similar to the following:

However, IE7 renders this:

In other words, it includes the entire bar as part of the tab. The code that is supposed to render this is as follows, so if you see any error or explanation, please let me know.

HTML

<div id="mainTabs" class="tabs">
    <ul>
        <li><a href="#viewTab">Time Modification</a></li>
        <li><a href="#projectTab">Project Report</a></li>
        <li><a href="#teamTab">Team Report</a></li>
        <li><a href="#cerfTab">CERF Report</a></li>
        <button id="switchUser">Switch User</button>
        <select id="themeSelect">...</select>
    </ul>
    <div id="viewTab"></div>
    <div id="projectTab"></div>
    <div id="teamTab"></div>
    <div id="cerfTab"></div>

JavaScript/jQuery

$(function() {
    $("mainTabs").tabs();
});

So I think it has something to do with placing the button and the select features within the <ul> tag, but this was the only way I could manage positioning them like I have them (inline with the tabs bar). If this is what’s causing IE7 this issues, is there anyway to get those two features positioned there a different way that it might like?

I’m also making use of the jQuery FullCalendar plugin, allowing the user to open a dialog box when the select on a time interval of a day. The FullCalendar plugin has a select option that asks for a function to perform on this sort of event, and so I then open my jQuery UI Dialog from here. Again, this works in IE9, Firefox, and Chrome, but it will not open the dialog in IE7 or IE8. Is this a browser problem, or my own coding problem?

HTML

<div id="calendar"></div>
<div id="addDialog" style="display:none;">
    <label for="list">Bug: </label>
    <select id="list">...</select>
    <p>
        <label for="start">Start:</label>
        <input id="start" class="dateTimePicker" type="text" value="" />
        <label for="end">End:</label>
        <input id="end" class="dateTimePicker" type="text" value="" />
    </p>
</div>

JavaScript/jQuery

$("#calendar").fullcalendar({
    ...
    select: function(start, end, allDay, jsEvent, view) {
        if(view.name != "month") {
            $("#addDialog").data("start", start);
            $("#addDialog").data("end", end);
            $("#addDialog").dialog("open");
        }
    }
    ...
});

EDIT: As a note on the second issue, I’ve noticed that the dialog will open when you select a time range. Though clicking in a time slot of the schedule view of the calendar technically still selects a time range, a single click does not open the dialog. Given this information, I think it might have something to do with the Fullcalendar plugin, but again… not positive.

Answer 1

Placing the select and button elements inside the ul is not valid HTML and is certainly causing the issue. The only allowed direct child content for a ul element are zero or more li elements.

You could place them in a div that is floated right or such.