I've been working hard on a jsf powered project manager and am running into some problems with IE compatability. I got everything aligned and positioned the way (more or less) I wanted it, but when I tested it against IE all hell broke loose (specifically with the dateInput component). I took a few screen shots to explain my problem...
What it looks like in Firefox: http://img6.imagepile.net/img6/91064firefox.png What it looks like in IE: http://img6.imagepile.net/img6/76581ie.png Each div outlined for refrence: http://img6.imagepile.net/img6/77815sh.png (keep in mind the design is still in development) CSS: body { padding: 1em; font-family: georgia, times, "times new roman", serif; color: #000; } img { border:0px; } .container { border: 1px solid #333; overflow: auto; } .banner { background-color: #666; border-bottom: 1px solid #333; } .banner h1 { margin: 0; padding: .5em; } .side { float: right; margin-right: 2em; padding-top: 1em; padding-bottom: 1em; overflow: auto; height: 400px; } .sectionHeader { text-align: center; padding-bottom: 1em; } .side p { margin-top: 0; } .content { float: left; margin-right: 1em; padding-top: 1em; padding-bottom: 1em; margin-left: 2em; overflow: auto; height: 400px; } .content h2 { margin-top: 0; } .footer { clear: both; background-color: #666; text-align: center; } .pageHeader { text-align: center; padding-top: 1em; } JSF Code: <[EMAIL PROTECTED] file="WEB-INF/inc/imports.inc"%> <html> <head> <title>LS Project Manager - Project Creation Wizard</title> <link rel="stylesheet" href="css/master.css" type="text/css" /> <link rel="stylesheet" href="css/tabbedPane.css" type="text/css" /> </head> <body> <f:view> <t:saveState value="#{pcwBacker}"/> <t:div styleClass="container" id="container"> <[EMAIL PROTECTED] file="WEB-INF/inc/navigationbar.inc"%> <t:div styleClass="pageHeader" id="pageHeader"> <t:outputText value="Project Creation Wizard"/> </t:div> <t:div styleClass="content"> <t:panelTabbedPane styleClass="tabbedPane" activeTabStyleClass="activeTab" inactiveTabStyleClass="inactiveTab" disabledTabStyleClass="disabledTab" activeSubStyleClass="activeSub" inactiveSubStyleClass="inactiveSub" tabContentStyleClass="tabContent" serverSideTabSwitch="false" selectedIndex="#{pcwBacker.currentIncompleteStep - 1}"> <h:form></h:form> <!-- Addresses weird bug. Do not remove! --> <t:panelTab label="General Information"> <h:form> <t:panelGrid columns="3"> <h:outputText value="Name: "/> <h:inputText id="name" value="#{pcwBacker.name}" required="true" /> <t:message forceSpan="true" for="name"/> <h:outputText value="Category:"/> <h:selectOneMenu id="category" value="#{pcwBacker.category}" required="true"> <f:selectItems value="#{pcwBacker.categoryItems}"/> </h:selectOneMenu> <t:message forceSpan="true" for="category"/> <h:outputText value="Status:"/> <h:selectOneMenu id="status" value="#{pcwBacker.status}"> <f:selectItems value="#{pcwBacker.statusItems}"/> </h:selectOneMenu> <t:message forceSpan="true" for="status"/> <h:outputText value="Phase: "/> <h:selectOneMenu id="phase" value="#{pcwBacker.phase}"> <f:selectItems value="#{pcwBacker.phaseItems}"/> </h:selectOneMenu> <t:message forceSpan="true" for="phase"/> <h:outputText value="Date Due: "/> <t:inputDate id="date" type="full" value="#{pcwBacker.dueDate}" required="true" popupCalendar="true"/> <t:message forceSpan="true" for="date"/> <t:commandButton action="#{pcwBacker.enableStepTwo}" value="#{pcwBacker.completed ? 'Update' : 'Next Step'}"/> </t:panelGrid> </h:form> </t:panelTab> <t:panelTab rendered="#{pcwBacker.stepTwoEnabled}" label="People Involved"> <h:form> <t:panelGrid columns="3"> <h:outputText value="Leader: "/> <h:selectOneMenu id="leader" value="#{pcwBacker.leaderId}" required="true"> <f:selectItems value="#{pcwBacker.workerItems}"/> </h:selectOneMenu> <t:message for="leader" forceSpan="true"/> <h:outputText value="Assignees: "/> <s:selectManyPicklist id="assignees" value="#{pcwBacker.assignees}" size="5"> <f:selectItems value="#{pcwBacker.workerItems}"/> </s:selectManyPicklist> <t:message for="assignees" forceSpan="true"/> <t:commandButton action="#{pcwBacker.enableStepThree}" value="#{pcwBacker.completed ? 'Update' : 'Next Step'}"/> </t:panelGrid> </h:form> </t:panelTab> <t:panelTab rendered="#{pcwBacker.stepThreeEnabled}" label="Project Description"> <h:form> <t:panelGrid columns="2"> <t:inputText/> <t:commandButton action="#{pcwBacker.enableFinalStep}" value="#{pcwBacker.completed ? 'Update' : 'Next Step'}"/> </t:panelGrid> </h:form> </t:panelTab> <t:panelTab rendered="#{pcwBacker.finalStepEnabled}" label="Final"> <h:form> <t:panelGrid columns="2"> <t:inputText/><t:commandButton/> </t:panelGrid> </h:form> </t:panelTab> </t:panelTabbedPane> </t:div> <t:div styleClass="side"> <t:div styleClass="sectionHeader"> <t:outputText value="Summery"/> </t:div> <t:panelGrid columns="2" cellpadding="10px"> <t:outputText value="Name: #{pcwBacker.name}" rendered="#{pcwBacker.name != null}"/> <t:outputText value="Status: #{pcwBacker.statusDesc}" rendered="#{pcwBacker.status != null}"/> <t:outputText value="Phase: #{pcwBacker.phaseDesc}" rendered="#{pcwBacker.phase != null}"/> <t:outputText value="Category: #{pcwBacker.categoryDesc}" rendered="#{pcwBacker.phase != null}"/> <t:outputText value="Date Due: #{pcwBacker.dueDate}"/> </t:panelGrid> <h:outputText value="Assignees"/> <t:dataList var="assignee" value="#{pcwBacker.assignees}"> <t:htmlTag value="li"> <t:outputText value="#{pcwBacker.names[assignee]}"/> </t:htmlTag> </t:dataList> </t:div> </t:div> </f:view> </body> </html> Atleast I'd like to get the inputDate working, the border around the container stretching, and not have one div fall beneath another or overlap when the window is resized. Thank you! Any help would be endlessly appreciated. Thank you! -- View this message in context: http://www.nabble.com/IExplorer-Troubles...-t1736799.html#a4719520 Sent from the MyFaces - Users forum at Nabble.com.
