트위터롤링스킨 css 문의드립니다. 정보
트위터롤링스킨 css 문의드립니다.본문
이온프리님의 트위터롤링 스킨
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=119117&page=11
을 사용하였는데 적용할 페이지에
<div width="620" style="border:1px solid #555"><iframe id='ix-rolling' src='ix_rolling/' border='0' frameborder='0' framespacing='0' width='620' height='255' marginheight='0' marginwidth='0' scrolling='no' bgcolor='#000000'></iframe></div>
위와 같이 적용하였습니다.
스킨 전체 테두리를 div에 style="border:1px solid #555"로 적용하였는데 그림과 같이 크롬이나 파폭에선 원하는대로 제대로 나오는데 익스에선 twitter와 facebook이 각각 흰색의 굵은 테두리로 나옵니다.
익스에서도 크롬 파폭과 같이 전체 테두리를 "border:1px solid #555" 로 적용할려면 css파일 어느곳을 수정해야 하는지 알려주시면 감사하겠습니다.
ix_rolling.css 파일 내용은
div.ix-rolling {
font: 9pt tahoma;
height: 200px;
overflow: hidden;
border: 0px #555 solid;
width: 100%;
position: relative;
background-color: #000;
color: #999;
background: #000 url("images/loading.gif") center center no-repeat;
text-align:left
}
div.ix-rolling .sync {
position: absolute;
right: 0px;
bottom: 0px;
cursor: pointer;
z-index: 10;
display: block;
width: 100%;
text-align: right;
overflow: visible;
}
div.ix-rolling div.ix-rolling-menu {
position: absolute;
left: 0;
bottom: 4px;
padding: 2px 0px;
border: 0px #000 solid;
background-color: #000;
display: none
}
div.ix-rolling div.ix-header {
display: block;
position: relative;
top: 0px;
left: 0px;
z-index: 1;
background-color: #000;
border-bottom: 0px #ddd solid;
}
div.ix-rolling div.ix-header img.s-profile-img {
margin-right: 0px;
margin-bottom:1px;
}
div.ix-rolling div.ix-header a{color:#000;text-decoration:none;margin-left:4px}
div.ix-rolling ul {
list-style: none;
padding: 0 0px 0 0;
margin: 0;
position: relative;
display: block;
}
div.ix-rolling ul li {
list-style: none;
border-bottom: 0px #efefef solid;
padding: 8px 3px 8px 3px; /* 게시글간 간격 */
line-height: 140%;
padding-right: 5px;
display: block;
}
div.ix-rolling ul li a {
text-decoration: none;
color: #33CBFF;
}
div.ix-rolling.gnu4 ul li a {
color: #333
}
div.ix-rolling ul li p {
margin: 0;
padding: 5;
display: block;
line-height: 1.4em;
text-align: left;
overflow: visible;
}
div.ix-rolling ul li p img.profile-img {
border: 0px #ddd solid;
width: 48px;
height: 48px;
margin: 0px 0px 0 0;
}
div.ix-rolling.no-profile-img ul li p {
margin-left: 0px;
}
div.ix-rolling .clear {
clear: left;
line-height: 1%;
height: 1px;
zoom: 1;
display: inline-block;
}
div.ix-rolling ul li.first {
/*background: url("images/new_bg.gif") right bottom no-repeat;*/
}
div.ix-rolling ul li.first span.timer {
background: url("images/time.gif") left center no-repeat;
}
div.ix-rolling ul li span.timer {
background: url("images/time_gray.gif") left center no-repeat;
text-indent: 16px;
margin-left: 0px;
display: inline-block;
white-space: nowrap;
}
div.ix-rolling li {
background-color: #000 /* 전체 배경색 */
}
div.ix-rolling ul li:hover {
background-color: #000
}
div.ix-rolling-message {
position: absolute;
padding: 4px;
border-bottom: 0px #555 solid;
background-color: #000;
display: block;
width: 100%;
padding: 0px;
z-index: 1
}
div.ix-rolling ul li img.absmiddle {
vertical-align: middle;
margin-bottom: .25em;
margin-right: 0px
}
div.ix-rolling ul li p .sns-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-bottom: .25em;
margin-right: 4px
}
div.ix-rolling.facebook ul li p .sns-icon,div.ix-rolling.tf .sns-icon.f {
background: url("images/facebook_s.png") left top no-repeat;
}
div.ix-rolling.twitter ul li p .sns-icon ,div.ix-rolling.tf .sns-icon.t{
background: url("images/twitter_s.png") left top no-repeat;
}
div.ix-rolling.tf .sns-icon.y{
background: url("images/yozm_s.png") left top no-repeat;
}
img.absmiddle {
vertical-align: middle;
margin-bottom: .25em;
}
div.ix-rolling ul li p a.all-href{color:#5D5D5D}
div.ix-rolling ul li p a.title{font-weight:bold;color:#333}
위와 같습니다.
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=119117&page=11
을 사용하였는데 적용할 페이지에
<div width="620" style="border:1px solid #555"><iframe id='ix-rolling' src='ix_rolling/' border='0' frameborder='0' framespacing='0' width='620' height='255' marginheight='0' marginwidth='0' scrolling='no' bgcolor='#000000'></iframe></div>
위와 같이 적용하였습니다.
스킨 전체 테두리를 div에 style="border:1px solid #555"로 적용하였는데 그림과 같이 크롬이나 파폭에선 원하는대로 제대로 나오는데 익스에선 twitter와 facebook이 각각 흰색의 굵은 테두리로 나옵니다.
익스에서도 크롬 파폭과 같이 전체 테두리를 "border:1px solid #555" 로 적용할려면 css파일 어느곳을 수정해야 하는지 알려주시면 감사하겠습니다.
ix_rolling.css 파일 내용은
div.ix-rolling {
font: 9pt tahoma;
height: 200px;
overflow: hidden;
border: 0px #555 solid;
width: 100%;
position: relative;
background-color: #000;
color: #999;
background: #000 url("images/loading.gif") center center no-repeat;
text-align:left
}
div.ix-rolling .sync {
position: absolute;
right: 0px;
bottom: 0px;
cursor: pointer;
z-index: 10;
display: block;
width: 100%;
text-align: right;
overflow: visible;
}
div.ix-rolling div.ix-rolling-menu {
position: absolute;
left: 0;
bottom: 4px;
padding: 2px 0px;
border: 0px #000 solid;
background-color: #000;
display: none
}
div.ix-rolling div.ix-header {
display: block;
position: relative;
top: 0px;
left: 0px;
z-index: 1;
background-color: #000;
border-bottom: 0px #ddd solid;
}
div.ix-rolling div.ix-header img.s-profile-img {
margin-right: 0px;
margin-bottom:1px;
}
div.ix-rolling div.ix-header a{color:#000;text-decoration:none;margin-left:4px}
div.ix-rolling ul {
list-style: none;
padding: 0 0px 0 0;
margin: 0;
position: relative;
display: block;
}
div.ix-rolling ul li {
list-style: none;
border-bottom: 0px #efefef solid;
padding: 8px 3px 8px 3px; /* 게시글간 간격 */
line-height: 140%;
padding-right: 5px;
display: block;
}
div.ix-rolling ul li a {
text-decoration: none;
color: #33CBFF;
}
div.ix-rolling.gnu4 ul li a {
color: #333
}
div.ix-rolling ul li p {
margin: 0;
padding: 5;
display: block;
line-height: 1.4em;
text-align: left;
overflow: visible;
}
div.ix-rolling ul li p img.profile-img {
border: 0px #ddd solid;
width: 48px;
height: 48px;
margin: 0px 0px 0 0;
}
div.ix-rolling.no-profile-img ul li p {
margin-left: 0px;
}
div.ix-rolling .clear {
clear: left;
line-height: 1%;
height: 1px;
zoom: 1;
display: inline-block;
}
div.ix-rolling ul li.first {
/*background: url("images/new_bg.gif") right bottom no-repeat;*/
}
div.ix-rolling ul li.first span.timer {
background: url("images/time.gif") left center no-repeat;
}
div.ix-rolling ul li span.timer {
background: url("images/time_gray.gif") left center no-repeat;
text-indent: 16px;
margin-left: 0px;
display: inline-block;
white-space: nowrap;
}
div.ix-rolling li {
background-color: #000 /* 전체 배경색 */
}
div.ix-rolling ul li:hover {
background-color: #000
}
div.ix-rolling-message {
position: absolute;
padding: 4px;
border-bottom: 0px #555 solid;
background-color: #000;
display: block;
width: 100%;
padding: 0px;
z-index: 1
}
div.ix-rolling ul li img.absmiddle {
vertical-align: middle;
margin-bottom: .25em;
margin-right: 0px
}
div.ix-rolling ul li p .sns-icon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-bottom: .25em;
margin-right: 4px
}
div.ix-rolling.facebook ul li p .sns-icon,div.ix-rolling.tf .sns-icon.f {
background: url("images/facebook_s.png") left top no-repeat;
}
div.ix-rolling.twitter ul li p .sns-icon ,div.ix-rolling.tf .sns-icon.t{
background: url("images/twitter_s.png") left top no-repeat;
}
div.ix-rolling.tf .sns-icon.y{
background: url("images/yozm_s.png") left top no-repeat;
}
img.absmiddle {
vertical-align: middle;
margin-bottom: .25em;
}
div.ix-rolling ul li p a.all-href{color:#5D5D5D}
div.ix-rolling ul li p a.title{font-weight:bold;color:#333}
위와 같습니다.
댓글 전체
혹시 #555555로 해도 안되나요? 초보지만 혹시 도움이 되어 드릴 수 있을지 몰라서 답변 달아보았습니다
border-color라는 속성도 존재하는 것 같던데.. border하고 별도로 지정해보는 것도 나쁘지 않을지도 모르겠어요
알려주신대로 바꿔도 안되네요!!
답변 감사합니다.
답변 감사합니다.
안되네요!ㅠㅜㅠ
답변 감사드립니다.
답변 감사드립니다.
최상단에
* { margin:0px; padding: 0px; }
넣어보세요..
그리고 값에 0 이렇게 하시는것보다 0px 로 표현해야 전체 브라우져에 css가 먹힐듯합니다.
* { margin:0px; padding: 0px; }
넣어보세요..
그리고 값에 0 이렇게 하시는것보다 0px 로 표현해야 전체 브라우져에 css가 먹힐듯합니다.
답변 감사드립니다.
상단에 알려주신 코드를 적용하니 테두리 선 두께만 적어지고 여전히 남아 있네요!!
0px로 적용해도 안됩니다.
상단에 알려주신 코드를 적용하니 테두리 선 두께만 적어지고 여전히 남아 있네요!!
0px로 적용해도 안됩니다.