掲示板

CSS difference in IE and Chrome

6年前 に Shireesha Veerapaneni によって更新されました。

CSS difference in IE and Chrome

New Member 投稿: 12 参加年月日: 17/07/05 最新の投稿
Hi ,

I see font different in IE and Chrome for the deployed portlets. Can some one please suggest the solution if you are familiar with.
thumbnail
6年前 に Olaf Kock によって更新されました。

RE: CSS difference in IE and Chrome

Liferay Legend 投稿: 6403 参加年月日: 08/09/23 最新の投稿
Shireesha Veerapaneni:
I see font different in IE and Chrome for the deployed portlets. Can some one please suggest the solution if you are familiar with.

Where do you see this? Classic Theme? Your own custom theme?

It might be as simple as the theme just specifying a font family instead of a concrete font (or a concrete font that's not available to the browser). Subsequently the browser will be free to choose any concrete font for the given font family that it thinks matches best. I can easily imagine, Chrome and IE using different algorithms for this task
6年前 に Shireesha Veerapaneni によって更新されました。

RE: CSS difference in IE and Chrome

New Member 投稿: 12 参加年月日: 17/07/05 最新の投稿
Its own custom theme. First time when I login the portlet looks with out css and when I refresh the screen , I can see all good.
We have our own css.

/*!
developed by Ravindra Meka
*/

body {
font-family: sans-serif;
line-height: 20px;
color: #333;
background: #888;
margin: 0px;
padding: 0px;
padding-left: 20px;
min-height:600px;
/*overflow:hidden;*/
}
.error {
color: red; font-weight: bold;
}
.errorblock {
color: #000;
background-color: #ffEEEE;
border: 3px solid #ff0000;
padding: 8px;
margin: 16px;
}
.successblock {
color: #000;
background-color: #b6fcd5;
border: 3px solid #008000;
padding: 8px;
margin: 16px;
}

.PageHeading{
coloremoticon5B1010;
font-size:18px;
display:inline;
font-weight:bold;
}
.row {
margin-right: 0px !important;
margin-left: 0px !important;
}

.main {
width: 1130px;
height: auto;
overflow: hidden;
background: #fff;
box-shadow: 10px 10px 10px #777;
margin: 0px auto;
}

.main-page{
min-height:600px;

}

.logo-wrap {
width: 1130px;
height: auto;
overflow: hidden;
padding: 0px 10px;
}

.logo {
margin: 10px 0px;
}

.logo h1 {
font-family: Impact;
font-size: 70px;
text-align: center;
color: #383838;
}

.menu-wrap {
width: 1130px;
height: auto;
}

.home {
width: 1130px;
height: 55px;
background: #4f81bd;
overflow: hidden;
padding: 0px;
float: left;
color: #fff;
}

.home-bord {
margin: 16px 30px 4px 30px;
overflow: hidden;
}

.home-bord a {
font-size: 20px;
font-family:'Times New Roman' !important;
color: #fff !important;
padding: 0px 10px !important;
overflow: hidden;
text-decoration:none;
font-weight:bold;
}

/*.portal a:link {coloremoticonfff !important;text-decoration:none !important;}
.portal a:visited {coloremoticonfff !important;text-decoration:none !important;}
.portal a:hover {coloremoticonfff !important;text-decoration:none !important;}*/

.anchortag {
color:white !important;text-decoration:none !important;
}

.anchortagdefaultbutton{
color:black !important;text-decoration:none !important;
}

h3 {
color:Black !important;

}
.home-nav {
margin: 10px 20px;
}

.home-nav a .fa {
font-size: 30px;
color: #383838;
}

.home-nav .fa:hover {
opacity: .5;
}

.right-nav {
width: 100px;
height: 48px;
float: left;
font-size:large;
background:White ;
}

.main-body {
width: 1110px;
height: auto;
overflow: hidden;
margin: 10px 10px;
background: #bfddec;
}

.PageHeading{
coloremoticon5B1010;
font-size:18px;
display:inline;
font-weight:bold;
}
.bottom-text {
overflow: hidden;
background: url(../images/bottom-bg.png) no-repeat;
height: 124px;
}

.bottom-text-border {
margin: 55px 0px 0px 138px;
}

.bottom-text-cont {
float: left;
width: 650px;
height: auto;
}

.bottom-text-cont p {
text-align: center;
color: #fff;
font-size: 15px
}

.more-cont {
width: 156px;
height: 50px;
float: left;
overflow: hidden;
}

.read-more {
overflow: hidden;
width: 156px;
background: url(../images/quote-icon.png)top left 0px no-repeat;
height: 50px;
float: left;
}

.read-more a {
overflow: hidden;
}

.footer-bottom {
overflow: hidden;
background: #fff;
--background: url(../images/footer-bg.png) repeat;
min-height: 100px;
width: 1130px;
height: auto;
border-top: 8px solid #2c2c2c;
}

.footer-bord {
overflow: hidden;
width: 1130px;
height: auto;
margin: 10px 0px 10px 0px;
}

.footer-cont1 {
overflow: hidden;
width: 600px;
height: auto;
margin: 0px auto;
}

.footer-cont1 p {
overflow: hidden;
text-align: center;
}

.footer-cont2 {
overflow: hidden;
width: 1022px;
height: auto;
margin: 0px 0px 0px 0px;
border-top: 1px solid #5f5d5d;
}

.footer-cont2 p {
overflow: hidden;
text-align: center;
width: 600px;
margin: 0px auto;
}

.body-header {
overflow: hidden;
margin: 20px 0px;
}


.header-img {
width: 50px;
height: auto;
float: left;
overflow: hidden;
}

.header-img img {
margin: 0px 10px;
}

/*.DemoBS2 {
margin: 20px;
}*/

.adv-search {
border: none;
box-shadow: 0px 0px 10px #777;
}

.adv-search-body {
width: 800px;
height: auto;
overflow: hidden;
background: #eee;
box-shadow: 0px 0px 10px #777;
padding: 10px 20px;
}

.form-group {
margin-bottom: 15px;
}

.form-control {
display: flex !important;
width: 93% !important;
height: 34px !important;
float: left !important;
margin: 7px 0px !important;
padding: 0px 12px !important;
font-size: 14px !important;
line-height: 1.42857143 !important;
color: #555 !important;
background-color: #fff !important;
background-image: none !important;
/*border: 1px solid #ccc;*/
border-radius: 6px !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.button-img {
width: 50px;
height: auto;
overflow: hidden;
float: left;
}

.form-hold {
width: 440px;
height: auto;
overflow: hidden;
margin: 0px auto;
text-align: center;
}

.form-hold img {
text-align: center;
}

.save-block {
width: 440px;
height: auto;
overflow: hidden;
float: left;
}

.save {
overflow: hidden;
margin: 10px 10px;
}

.save-img {
border: 1px solid #929292;
background: #bebebe;
color: #3c3c3c;
width: 100px;
box-shadow: 0px 0px 4px #777;
margin: 0px 10px 0px 10px;
}

.cancel-img {
border: 1px solid #929292;
background: #bebebe;
color: #3c3c3c;
width: 100px;
box-shadow: 0px 0px 7px #777;
margin: 0px 0px;
}

.cancel {
overflow: hidden;
text-align: center;
}

.cancel a {
overflow: hidden;
}

.back-img {
text-align: center;
}

.back-marg {
margin: 5px 0px;
}

.bread-crum {
width: 1002px;
height: auto;
overflow: hidden;
color: #2d5f8e;
}

.bread-crum-left {
width: 759px;
height: auto;
overflow: hidden;
float: left;
}

.bread-crum-left p {
background: url(../images/header-arrow.png) top left 10px no-repeat;
padding: 5px 0px;
font-size: 16px;
}

.bread-crum-left p a {
color: #2d5f8e;
padding: 0px 0px 0px 45px;
text-transform: uppercase;
}

.bread-crum-left p a:hover {
color: #333;
text-decoration: none;
}

.bread-crum-right {
width: 243px;
height: auto;
overflow: hidden;
float: left;
}

.bread-crum-right p a {
color: #2d5f8e;
}

.bread-crum-right p a:hover {
color: #333;
text-decoration: none;
}

ul.lists {
margin: 0px;
padding: 0px;
}

.lists li {
list-style: none;
float: left;
padding: 0px 10px;
}

.lists li p {
text-decoration: none;
text-transform: uppercase;
background: url(../images/header-arrow.png) top left 10px no-repeat;
}

.lists li p a {
text-decoration: none;
text-transform: uppercase;
padding: 5px 0px 5px 42px;
font-size: 16px;
}

.search-block {
overflow: hidden;
width: 1002px;
height: auto;
}

.search-block-wrap {
overflow: hidden;
margin: 10px 10px;
}

.search-block-1 {
overflow: hidden;
margin: 0px 10px;
padding: 10px 0px;
border-bottom: 1px dotted #ccc;
}

.search-image {
overflow: hidden;
width: 165px;
height: auto;
float: left;
}

.search-content {
overflow: hidden;
width: 757px;
height: auto;
float: left;
margin: 0px 20px;
}

.search-content h3 {
overflow: hidden;
color: #333;
margin: 10px 0px;
}

.search-content p {
overflow: hidden;
color: #2d5f8e;
}

.pagination {
overflow: hidden;
}

.pagination li a,
.pagination li.first a {
background: #555;
color: #fff;
margin: 0px 0px 0px .5px;
}

.adv-main-body {
overflow:hidden;
width: 1110px;
min-height:600px;
}

.adv-body-left {
overflow: hidden;
width: 195px;
height: auto;
float: left;
margin-right: 10px;
background:White ;
/*border-right:solid 1px Black;*/
}

.adv-left-bord {
padding: 10px;
color:Black;
}

.adv-left-bord .list {
overflow: hidden;
}

.adv-left-bord .list ul {
margin: 0px;
padding-top:10px;
}

.adv-left-bord .list ul li {
list-style: none;
margin: 2px 0px;
font-weight:bold;
font-size:14px;
}

.adv-left-bord .list ul li a {
padding: 5px 20px;
color: #999;
color:Black !important;
}
/*.adv-left-bord .list ul li.active {
background-color:rgb(0,120,179);
}*/
.adv-left-bord .list ul li.active a {
color: white !important;
text-decoration:none;
}

.adv-left-bord .list ul li a:hover {
padding: 5px 20px;
text-decoration: none;
}

.left-menu-img{
border:medium 1px Black ;
}

.adv-body-right {
width: 900px;
height: auto;
min-height:600px;
float: left;
border-left:solid 1px Black;
top:0px;
padding-left:5px;
padding-right:5px;
}

.adv-body-right-bord {
overflow: hidden;
}

.adv-img {
overflow: hidden;
}

.adv-img-cont {
overflow: hidden;
float: right;
background: #b8e3ff;
}

.adv-img-cont h3 {
overflow: hidden;
color: #83bcde;
font-size: 40px;
font-family: Impact;
}

.block-r-4 {
overflow: hidden;
width: 560px;
height: 178px;
background: #329ae1;
}

.block-4-1 {
overflow: hidden;
width: 275px;
float: left;
height: auto;
background: #329ae1;
}

.block-4-1-bord {
overflow: hidden;
}

.block-4-border {
overflow: hidden;
}

.block-4-marg {
overflow: hidden;
margin: 95px 10px 0px 10px;
}

.block-4-marg a {
overflow: hidden;
text-decoration: none;
}

.block-4-marg a h3 {
overflow: hidden;
text-decoration: none;
color: #51b1f2;
font-family: Impact;
font-size: 50px;
text-align: right;
margin: 30px 0px 0px 0px;
opacity: .5;
}

.block-4-marg a h3:hover {
overflow: hidden;
text-decoration: none;
color: #fff;
opacity: 1;
}

.block-4-2 {
overflow: hidden;
width: 275px;
float: left;
height: auto;
}

.block-4-2-bord {
overflow: hidden;
}


/*Search Page
*/

.BITScontainer{
width:1000px;
min-height:600px;
padding-left:100px;
}

#custom-search-input {
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 8px;
background-color: #fff;
}

#custom-search-input input {
border: 0;
box-shadow:none;
}

#custom-search-input button {
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #666666;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}

#custom-search-input button:hover {
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}

#custom-search-input .glyphicon-search {
font-size: 23px;
}



/*Pages CSS*/

.container2 {
/*border: 1px solid;*/
padding: 10px;
background-color: white;
max-width: 100%;
font-weight:normal;
}

.header {
padding: 10px;
background-color:white;
/*border: 1px solid;*/
max-width:100%;
}

.top {
display: inline;
width: 500px;
text-align: left;
padding-left: 10px;
font-weight:bold;
font-size:medium;
coloremoticon333333 !important;
}

.span1 {
display: inline;
position: relative;
top: -20px;
background-color:inherit;
font-weight:bold;
font-size:14px;
coloremoticon721515;
}

.labels {
display: inline-block;
width: 180px;
text-align: right;
font-size:14px;
font-weight:normal;
color:black;
}

.labels1 {
display: inline-block;
width: 180px;
text-align: right;
font-size:14px;
font-weight:600;
}
.outputText{
display:inline;
font-size:14px;
}

.main-body-pages {
width: 1110px;
height: auto;
overflow: hidden;
margin: 10px 10px;
background:White;
}

input[type="text"] {
border-radius: 6px;
}

.selected-tab {
padding: 5px 20px;
text-decoration: none;
background-color: #337ab7 !important;
color: white !important;
}

.table-striped>tbody>tr:nth-child(odd)>td{
background-color: #E6F2FF;
}

.table-striped>thead>th {
background-color: #99CCFF;
}



.fileInput {
cursor: pointer;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/

font-size: 50px;
/*Opacity settings for all browsers*/
border-radius: 5px;
opacity: 0;
-moz-opacity: 0;
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0)
}


.form-dropdwns {
display: flex;
float: left;
font-size: 12px;
/*margin: 7px 0px;*/
/*padding: 0px 12px;*/
/*line-height: 1.42857143;*/
color: #555;
background-image: none;
background-color: #fff;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: grey !important;
}
::-moz-placeholder { /* Firefox 19+ */
color: grey !important;
}
:-ms-input-placeholder { /* IE 10+ */
color: grey !important;
}
:-moz-placeholder { /* Firefox 18- */
color: grey !important;
}
input[type="text"]{
color:black !important;
}
textarea{
color:black !important;
}
select{
color:black !important;
}
6年前 に Shireesha Veerapaneni によって更新されました。

RE: CSS difference in IE and Chrome

New Member 投稿: 12 参加年月日: 17/07/05 最新の投稿
Its own custom theme. First time when I login the portlet looks with out css and when I refresh the screen , I can see all good.
We have our own css.

Attached Css file.

添付ファイル: