javascript - CSS conflict Liferay -

i have css conflict when load 2 portlets in same liferay page. conflict appears when 2 portlets cointain same namespace in css files.

for example if:

mycss.css of portlet is:

#legend {      width: 150px;     height: 150px;     bottom: 160px;      position: relative;  } 

and mycss.css of portlet b is:

#legend {      width: 150px;     height: 150px;     bottom: 30px     right: 5px;      position: absolute; }  

if portlet alone in page loads mycss.css instead if there portlet b reads css of second portlet. happenes portlet has element without css , portlet b have element same namespace of portlet css. in case portlet read css file of portlet b.

i load css in view.jsp of 2 portlets with:

<script src="<%=request.getcontextpath()%>/css/mycss.css"></script> 

or in 2 different liferay-portlet.xml:

<header-portlet-css>/css/mycss.css</header-portlet-css> 

i have same problem js file.

p.s. 2 portlets imported netbeans

thank you

css files global plateform. there no scope file. if want apply css portlet have prefix selector id of portlet (or css class wrapper can add in liferay-portlet.xml file).

in portleta project add in liferay-portlet.xml line:

<css-class-wrapper>portleta</css-class-wrapper> 

and modify yout css this:

.portleta #legend {     width: 150px;    height: 150px;    bottom: 160px;     position: relative;  } 

in portletb project add in liferay-portlet.xml line:

<css-class-wrapper>portletb</css-class-wrapper> 

and modify yout css this:

.portletb #legend {     width: 150px;    height: 150px;    bottom: 160px;     position: relative;  }