相同的JSF + CSS导致不同的结果

时间：2012-04-01 15:44:56

标签： css jsf xhtml primefaces

我有两个项目，一个是另一个项目的副本（除了一些bean的变化）。

以下是我得到的截图：

OLD PROJECT

NEW PROJECT

正如你所看到的，在新项目中我有这个丑陋的边框，没有办法改变它！ 使用NetBeans的文件差异工具显示他们的CSS之间没有区别，即使HTML也完全相同（我已经尝试过使用Firefox的检查员）。

它出了什么问题？

这是他们的css + jsf代码：

OLD PAGE：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:body>

    <!-- Script di callback per gestire situazioni in cui il form di login non è stato completato correttamente -->
    <script type="text/javascript">  
        function animateNewPost(id) { 
            if(id != null)
                jQuery('#post_' +id).effect("slide", {}, 500);
        }  
        function animateDeletedPost(id) {                
            if(id != null)
                jQuery('#post_' +id).effect("slide", {mode:"hide"}, 500);
        }
    </script> 

    <p:growl id="postMessage" autoUpdate="true" showDetail="true"/>
    <p:outputPanel id="postPanel">
        <!-- Pannello per l'inserimento del post -->
        <div id="postBox">
            <p:panel id="postForm" rendered="#{loginBean.loggedIn}">
                <h:form>
                    <h:inputText value="#{postBean.postText}" size="95"/>                         
                    <p:commandButton icon="ui-icon-search" rendered="false"/><br/>
                    <p:commandLink ajax="true" action="#{postBean.insertPost}" value="Inserisci Post" update=":postMessage, :postList, :postForm" oncomplete="animateNewPost(#{lazyPostBean.latestId})"/>
                </h:form>
            </p:panel>      
            <p:panel id="postList">                   
                <p:dataTable id="postTable" var="post" value="#{lazyPostBean.posts}" emptyMessage="Non ci sono posts.">
                    <p:column style="border: 0px; background: rgba(0,0,0,0);">                            
                        <div class="feature">                                
                            <div class="post" id="post_#{post.idPost}">                                
                                <h:outputLink id="link" value="#">#{post.autore.username}</h:outputLink> scrive :
                                <br/>
                                <hr/>
                                <div class="blockquote">
                                    <div class="quotopen"></div>
                                    <div class="quotcont">
                                        <p><h:outputText value="#{post.testo}"/></p>
                                    </div>
                                </div>
                                <hr />      
                                <p:outputPanel style="float: left;" rendered="#{post.autore.equals(loginBean.utente)}">                                        
                                    <h:form>
                                        <p:commandLink style="font-size: 12; color: white;" value="Rimuovi Post" action="#{postBean.removePost(post)}" onclick="animateDeletedPost(#{post.idPost})" update=":postList"/>
                                    </h:form>
                                </p:outputPanel>
                                <p class="date">#{post.formatDate()} | #{post.formatTime()}</p>                               
                            </div>
                        </div>
                    </p:column>                                              
                </p:dataTable>
            </p:panel>
        </div>    
    </p:outputPanel>       
</h:body>

新页面：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:pou="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <!-- Script di callback per gestire situazioni in cui il form di login non è stato completato correttamente -->
    <script type="text/javascript">  
        function animateNewPost(id) { 
            if(id != null)
                jQuery('#post_' +id).effect("slide", {}, 500);
        }  
        function animateDeletedPost(id) {                
            if(id != null)
                jQuery('#post_' +id).effect("slide", {mode:"hide"}, 500);
        }
    </script>  
</h:head>
<h:body>

    <pou:effect for="postPanel" event="load" type="bounce">
        <f:param name="mode" value="'show'" />           
        <f:param name="direction" value="'up'" />        
    </pou:effect>

    <pou:outputPanel id="postPanel">
        <div id="postBox">
            <pou:panel id="postForm" rendered="#{loginBean.logged}">
                <h:form>
                    <h:inputText value="#{postBean.postText}" size="95"/><br/>
                    <pou:commandLink ajax="true" action="#{postBean.insertPost}" value="Inserisci Post" update=":postPanel" oncomplete="animateNewPost(#{postListBean.latestId})"/>
                </h:form>
            </pou:panel>             
            <pou:panel id="postList" style="border: 0px;">
                <pou:dataTable emptyMessage="Non ci sono post." id="postTable" value="#{postListBean.posts}" var="post">
                    <pou:column style="border: 0px; background: rgba(0,0,0,0);">                            
                        <div class="feature">                                
                            <div class="post" id="post_#{post.idPost}">                                
                                <h:outputLink id="link" value="#">#{post.autore.username}</h:outputLink> scrive :
                                <br/>
                                <hr/>
                                <div class="blockquote">
                                    <div class="quotopen"></div>
                                    <div class="quotcont">
                                        <p><h:outputText value="#{post.testo}"/></p>
                                    </div>
                                </div>
                                <hr />      
                                <pou:outputPanel style="float: left;" rendered="#{post.autore.equals(loginBean.utente)}">                                        
                                    <h:form>
                                        <pou:commandLink style="font-size: 12; color: white;" value="Rimuovi Post" action="#{postBean.removePost(post)}" onclick="animateDeletedPost(#{post.idPost})" update=":postList"/>
                                    </h:form>
                                </pou:outputPanel>
                                <p class="date">#{post.formatDate()} | #{post.formatTime()}</p>                               
                            </div>
                        </div>
                    </pou:column> 
                </pou:dataTable>
            </pou:panel>
        </div>
    </pou:outputPanel>
</h:body>
</html>

OLD CSS（prime.css）

 /* 
    Document   : prime
    Created on : 25-mar-2012, 18.25.48
    Author     : stefano
    Description:
        Purpose of the stylesheet follows.
*/

    root { 
        display: block;
    }

    .ui-notificationbar{
        width: 68.9%;
        height: 8%;
        filter:alpha(opacity=80);  /* works in IE 7 */
        opacity: 0.8;  /* works in Firefox */
}

.searchIcon{
    background-image: url(../images/search.png);
}

.ui-widget-overlay {
    filter:alpha(opacity=80);  /* works in IE 7 */
    opacity: 0.8;  /* works in Firefox */
}

.ui-dialog-reg {
    min-width: 1000px;
    min-height: 500px;
    width: auto !important;
    height: auto !important;
}

.ui-dialog-log {
    background: rgba(0,0,0,0); 
    position: fixed;
    width: auto !important;
    height: auto !important;    
}

.ui-datatable {
    background: rgba(0,0,0,0); 
    border: 0px;
}

.ui-datatable-header {
    border: 0px;
    background: rgba(0,0,0,0);
}

.ui-datatable-even{
    background: rgba(0,0,0,0); 
    border: 0px;    
}

.ui-datatable-odd{
    background: rgba(0,0,0,0); 
    border: 0px;    
}

.ui-datatable-data{
    background: rgba(0,0,0,0); 
    border: 0px;    
}

新CSS（prime.css）

/* 
    Document   : prime
    Created on : 25-mar-2012, 18.25.48
    Author     : stefano
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

.ui-notificationbar{
    width: 68.9%;
    height: 8%;
    filter:alpha(opacity=80);  /* works in IE 7 */
    opacity: 0.8;  /* works in Firefox */
}

.searchIcon{
    background-image: url(../images/search.png);
}

.ui-widget-overlay {
    filter:alpha(opacity=80);  /* works in IE 7 */
    opacity: 0.8;  /* works in Firefox */
}

.ui-dialog-reg {
    min-width: 1000px;
    min-height: 500px;
    width: auto !important;
    height: auto !important;
}

.ui-dialog-log {
    background: rgba(0,0,0,0); 
    position: fixed;
    width: auto !important;
    height: auto !important;    
}

.ui-datatable {
    background: rgba(0,0,0,0); 
    border: 0px;
}

.ui-datatable-header {
    border: 0px;
    background: rgba(0,0,0,0);
}

.ui-datatable-even{
    background: rgba(0,0,0,0); 
    border: 0px;    
}

.ui-datatable-odd{
    background: rgba(0,0,0,0); 
    border: 0px;    
}

.ui-datatable-data{
    background: rgba(0,0,0,0); 
    border: 0px;    
}

OLD CSS（screen.css）

body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:70%;
    margin:0 auto;
    background:#fff;
    /*    min-width:600px;       Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
img {
    margin:10px 0 5px;
}
#ads img {
    display:block;
    padding-top:10px;
}

/* Header styles */
#header {    
    background-image: url(../images/logo.png);
    background-repeat:no-repeat;
    background-position: 0 20;
    clear:both;
    float:left;
    width:100%;
}
#header {
    border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
    padding-left: 30%;
    margin:0;
}
#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#000;
    text-decoration:none;
    position:relative;
    left:15px;
    line-height:1.3em;
}
#header ul li a:hover {
    background:#369;
    color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}

#searchBox{
    padding-left: 25%;
    padding-top: 1%;
    padding-bottom: 1%;
    width: 75%;
}

#searchBox input[type="text"]{
    border: 0px;
    padding-right: 0.6%;
}

/* 'widths' sub menu */
#submenu {
    clear:both;
    background:#eee;
    border-top:4px solid #000;
    margin:0;
    padding:6px 15px !important;    
    text-align:right;
}
/* column container */
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */    
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */

}
/* common column settings */
.colright,
.colmid,
.colleft {
    padding-top: 1%;
    padding-bottom: 2%;
    float:left;
    width:100%;
    position:relative;    
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}

#postBox{
    text-align: center;
}

#postBox input[type="text"]{
    border: 0px;  
    text-align: center;
}

#postList{
    margin-top: 0.5%;    
    height: 36.2em;
    overflow: auto;
    border: 0px;
}

/* Sezione POST */
.post
{
    text-align: left;
    background:rgba(0,84,68,0.3);   
    padding-left: 2%;
    padding-bottom: 4%;
    padding-top: 1%;
    padding-right: 2%;
    -webkit-border-radius: /*    padding:2% 2% 2% 2%;*/20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.post img
{
    background-color:#008080;
    padding:3px;
    border:1px solid;
    border-color:#004040;
    margin:3px;
}
.date
{
    float:right;
}

.post h2
{
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:normal;
}

.post hr
{
    margin:2px 0 5px 0;
    border-color:#004040;
    border-style:none none dotted;
}

.post img
{
    margin:5px;
}

.post p
{
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
    line-height:20px;
}

.post ul
{
    list-style-type:none;
    list-style-position:inside;
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12pt;
    font-weight:bold;
    margin:0 0 5px 30px;
}

.post ol
{
    list-style-position:inside;
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12pt;
    font-weight:bold;
    margin:0 0 5px 30px;
}

.topspacer
{
    /*  height:15px;*/
    background-image:url(../images/top.png);
}

.date
{
    float:right;
}

.blockquote
{
    margin:10px 60px 10px 60px;
    font-style:italic;    
}

.quotopen
{
    float:left;
    width:40px;
    height:27px;
    background-image:url(../images/quotopen.png);
    background-position:top left;
    background-repeat:no-repeat;
}

.quotcont
{    
    margin:0 0 0 40px;
}

.feature
{
    margin:5px 5px 10px 10px;
    /*  width:549px;*/
}

/*FINE SEZIONE POST*/

/* 2 Column (left menu) settings */
.leftmenu {
    background:#fff;        /* right column background colour */
}
.leftmenu .colleft {
    right:75%;          /* right column width */
    background:#f4f4f4; /* left column background colour */
}
.leftmenu .col1 {
    width:71%;          /* right column content width */
    left:102%;          /* 100% plus left column left padding */
    height: 45em;
    overflow: auto;
}
.leftmenu .col2 {
    width:21%;          /* left column content width (column width minus left and right padding) */
    left:6%;            /* (right column left and right padding) plus (left column left padding) */
    height: 45em;
    overflow: auto;
}
/* Footer styles */
#footer {
    clear:both;
    float:left;
    width:100%;
    border-top:1px solid #000;
}
#footer p {
    padding:10px;
    margin:0;
}

hr {
    border: 0;
    height: 2px;
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:         linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
}

新CSS（Screen.css）

body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:70%;
    margin:0 auto;
    background:#fff;
    /*    min-width:600px;       Minimum width of layout - remove line if not required */
    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
img {
    margin:10px 0 5px;
}
#ads img {
    display:block;
    padding-top:10px;
}

/* Header styles */
#header {    
    background-image: url(../images/logo.png);
    background-repeat:no-repeat;
    background-position: 0 20;
    clear:both;
    float:left;
    width:100%;
}
#header {
    border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
    padding:.4em 15px 0 15px;
    padding-left: 30%;
    margin:0;
}
#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#000;
    text-decoration:none;
    position:relative;
    left:15px;
    line-height:1.3em;
}
#header ul li a:hover {
    background:#369;
    color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}

#searchBox{
    padding-left: 25%;
    padding-top: 1%;
    padding-bottom: 1%;
    width: 75%;
}

#searchBox input[type="text"]{
    border: 0px;
    padding-right: 0.6%;
}

/* 'widths' sub menu */
#submenu {
    clear:both;
    background:#eee;
    border-top:4px solid #000;
    margin:0;
    padding:6px 15px !important;    
    text-align:right;
}
/* column container */
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */    
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */

}
/* common column settings */
.colright,
.colmid,
.colleft {
    padding-top: 1%;
    padding-bottom: 2%;
    float:left;
    width:100%;
    position:relative;    
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}

#postBox{
    text-align: center;
}

#postBox input[type="text"]{
    border: 0px;  
    text-align: center;
}

#postList{
    margin-top: 0.5%;    
    height: 36.2em;
    overflow: auto;
    border: 0px;
}

/* Sezione POST */
.post
{
    text-align: left;
    background:rgba(0,84,68,0.3);   
    padding-left: 2%;
    padding-bottom: 4%;
    padding-top: 1%;
    padding-right: 2%;
    -webkit-border-radius: /*    padding:2% 2% 2% 2%;*/20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.post img
{
    background-color:#008080;
    padding:3px;
    border:1px solid;
    border-color:#004040;
    margin:3px;
}
.date
{
    float:right;
}

.post h2
{
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:normal;
}

.post hr
{
    margin:2px 0 5px 0;
    border-color:#004040;
    border-style:none none dotted;
}

.post img
{
    margin:5px;
}

.post p
{
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:16px;
    line-height:20px;
}

.post ul
{
    list-style-type:none;
    list-style-position:inside;
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12pt;
    font-weight:bold;
    margin:0 0 5px 30px;
}

.post ol
{
    list-style-position:inside;
    color:#FFFFFF;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12pt;
    font-weight:bold;
    margin:0 0 5px 30px;
}

.topspacer
{
    /*  height:15px;*/
    background-image:url(../images/top.png);
}

.date
{
    float:right;
}

.blockquote
{
    margin:10px 60px 10px 60px;
    font-style:italic;    
}

.quotopen
{
    float:left;
    width:40px;
    height:27px;
    background-image:url(../images/quotopen.png);
    background-position:top left;
    background-repeat:no-repeat;
}

.quotcont
{    
    margin:0 0 0 40px;
}

.feature
{
    margin:5px 5px 10px 10px;
    /*  width:549px;*/
}

/*FINE SEZIONE POST*/

/* 2 Column (left menu) settings */
.leftmenu {
    background:#fff;        /* right column background colour */
}
.leftmenu .colleft {
    right:75%;          /* right column width */
    background:#f4f4f4; /* left column background colour */
}
.leftmenu .col1 {
    width:71%;          /* right column content width */
    left:102%;          /* 100% plus left column left padding */
    height: 45em;
    overflow: auto;
}
.leftmenu .col2 {
    width:21%;          /* left column content width (column width minus left and right padding) */
    left:6%;            /* (right column left and right padding) plus (left column left padding) */
    height: 45em;
    overflow: auto;
}
/* Footer styles */
#footer {
    clear:both;
    float:left;
    width:100%;
    border-top:1px solid #000;
}
#footer p {
    padding:10px;
    margin:0;
}

hr {
    border: 0;
    height: 2px;
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:         linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
}

现在，假设我完全不熟悉CSS并且我的代码是来自各种来源的“复制和粘贴”（即使我的项目的重点是学习Java EE而不是CSS），你如何解释新页面上这个可怕的边界？

谢谢！

编辑：

似乎是这样，在新项目中，我的CSS不会覆盖primefaces的原始版本！

有什么建议吗？

0 个答案:

没有答案
相关问题
最新问题