You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by octoberdan <da...@october5th.net> on 2006/06/05 20:09:29 UTC
IExplorer Troubles...
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:
<%@include 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">
<%@include 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.
RE: IExplorer Troubles...
Posted by octoberdan <da...@october5th.net>.
I got everything working with:
body {
padding: 1em;
font-family: georgia, times, "times new roman", serif;
color: #000;
}
img {
border:0px;
}
.container {
width: 1000px;
margin: 0 auto;
border: 1px solid #333;
}
.banner {
border-bottom: 1px solid #333;
}
.banner h1 {
margin: 0;
padding: .5em;
}
.side {
width: 400px;
float: right;
padding: 1em;
overflow: auto;
height: 400px;
}
.sectionHeader {
text-align: center;
padding-bottom: 1em;
}
.side p {
margin-top: 0;
}
.content {
position: absolute;
padding: 1em;
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;
}
but am still having trouble with my calander popup... Any idea?
--
View this message in context: http://www.nabble.com/IExplorer-Troubles...-t1736799.html#a4734535
Sent from the MyFaces - Users forum at Nabble.com.
RE: IExplorer Troubles...
Posted by octoberdan <da...@october5th.net>.
How would I get them to sit inside it? Is there somthing I need to change
about 'container' ? How would adding a second div help? Thank you for your
help so far, I really apreciate it.
--
View this message in context: http://www.nabble.com/IExplorer-Troubles...-t1736799.html#a4720988
Sent from the MyFaces - Users forum at Nabble.com.
RE: IExplorer Troubles...
Posted by octoberdan <da...@october5th.net>.
I will need it to scroll up and down when there's an overflow, just not side
to side. Why is it even doing that if I didn't specify a width constraint?
and do you know why the container's border isn't surounding the other divs
like in firefox? Thanks for the tip...
--
View this message in context: http://www.nabble.com/IExplorer-Troubles...-t1736799.html#a4720711
Sent from the MyFaces - Users forum at Nabble.com.
Re: IExplorer Troubles...
Posted by octoberdan <da...@october5th.net>.
I'm desperate! Please. *gets on hands and knees*
--
View this message in context: http://www.nabble.com/IExplorer-Troubles...-t1736799.html#a4719902
Sent from the MyFaces - Users forum at Nabble.com.