재질문~_~ 이번엔 많은걸 물어보고자 up!!
크로스브라우징에 관하여(~--~)
http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=177497 의 문제를 업그레이드해서.
질문드립니다.
譽人 님 말씀처럼 다른브라우저에서는 역시 먹히지 않는군요.. (씁쓸..)
그렇다면, 동일하게 보이게 하려면 어떤 속성을 써야할까요??
여기서 많은걸 배우고자 합니다.
그리고 마진값.. 왼쪽 상하10px 오른쪽10px(아직적용x) 중앙쪽에 상하좌우 10px을 주어서.
하려했지만.. 결과는.. 오른쪽이 처참하게 그리고 간격이 맞지 않습니다..
ie만의 버그 인듯한데.. 핵을써주어야 할까요??
저의목표는 크로스브라우징! ~_~
[code]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout Test</title>
<style type="text/css">
body { text-align:center; }
div {text-align:left}
#container {width: 950px;}
#top {width: 100%; height:100px; background-color: #f5f5f5;}
#leftside {width:200px; height:1000px; float: left;}
.snb {width: 200px; height:100px; margin: 10px 0; background-color: #aaaaaa;}
.snb1 {width: 200px; height:250px; margin: 10px 0; background-color: #ccc;}
#contentsbox {width: 500px; height:1000px;margin: 10px; float:left }
.center {width: 500px; height:105px;margin: 10px; background-color: #ccc;}
.center1 {width: 500px; height:300px; margin: 10px; background-color: #c;}
#rightside {width: 250px; height:1000px; float: right;}
.right { width:250px; height:200px;background-color: #aaaaaa;}
.right1 { width:250px; height:200px;background-color: #ccc;}
#bottom {width: 100%; height: 100px; background-color: #aaaaaa; clear: both;}
.search-button { width:50px; height:40px; background-color:#ff7700; color:#fff; font-weight:bold; }
</style>
</head>
<body>
<div id="container">
<div id="top">
<center>
<form name=fsearch action="<?=$g4[bbs_path]?>/search.php?sfl=wr_subject&sop=and&stx=">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type=text size=40 name=stx style="border:5px solid #fc8826; height:20px; font-size:15px; font-weight:bold; padding:5px;">
<input type=submit value="검색" class="search-button">
</form>
</center></div>
<!-- 왼쪽 영역 -->
<div id="leftside">
<div class="snb"><?=outlogin("sir");?></div>
<div class="snb1"><?include_once("$g4[path]/rank/rank.php");?></div>
</div>
<div id="contentsbox">
<div class="center"><img src="./img/sir.gif" border="0" width="500" height="105 "></div>
<div class="center1"><? include("$g4[path]/plugin/google-news/index.php") ?></div>
</div>
<!--오른쪽 영역 -->
<div id="rightside">
<div class="right"><?=latest("mw.news", "id_1", 5, 25)?></div>
<div class="right1">right1</div>
</div>
<div id="bottom">Bottom Box</div>
</div>
</body>
</html>
[/code]
http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=177497 의 문제를 업그레이드해서.
질문드립니다.
譽人 님 말씀처럼 다른브라우저에서는 역시 먹히지 않는군요.. (씁쓸..)
그렇다면, 동일하게 보이게 하려면 어떤 속성을 써야할까요??
여기서 많은걸 배우고자 합니다.
그리고 마진값.. 왼쪽 상하10px 오른쪽10px(아직적용x) 중앙쪽에 상하좌우 10px을 주어서.
하려했지만.. 결과는.. 오른쪽이 처참하게 그리고 간격이 맞지 않습니다..
ie만의 버그 인듯한데.. 핵을써주어야 할까요??
저의목표는 크로스브라우징! ~_~
[code]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout Test</title>
<style type="text/css">
body { text-align:center; }
div {text-align:left}
#container {width: 950px;}
#top {width: 100%; height:100px; background-color: #f5f5f5;}
#leftside {width:200px; height:1000px; float: left;}
.snb {width: 200px; height:100px; margin: 10px 0; background-color: #aaaaaa;}
.snb1 {width: 200px; height:250px; margin: 10px 0; background-color: #ccc;}
#contentsbox {width: 500px; height:1000px;margin: 10px; float:left }
.center {width: 500px; height:105px;margin: 10px; background-color: #ccc;}
.center1 {width: 500px; height:300px; margin: 10px; background-color: #c;}
#rightside {width: 250px; height:1000px; float: right;}
.right { width:250px; height:200px;background-color: #aaaaaa;}
.right1 { width:250px; height:200px;background-color: #ccc;}
#bottom {width: 100%; height: 100px; background-color: #aaaaaa; clear: both;}
.search-button { width:50px; height:40px; background-color:#ff7700; color:#fff; font-weight:bold; }
</style>
</head>
<body>
<div id="container">
<div id="top">
<center>
<form name=fsearch action="<?=$g4[bbs_path]?>/search.php?sfl=wr_subject&sop=and&stx=">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type=text size=40 name=stx style="border:5px solid #fc8826; height:20px; font-size:15px; font-weight:bold; padding:5px;">
<input type=submit value="검색" class="search-button">
</form>
</center></div>
<!-- 왼쪽 영역 -->
<div id="leftside">
<div class="snb"><?=outlogin("sir");?></div>
<div class="snb1"><?include_once("$g4[path]/rank/rank.php");?></div>
</div>
<div id="contentsbox">
<div class="center"><img src="./img/sir.gif" border="0" width="500" height="105 "></div>
<div class="center1"><? include("$g4[path]/plugin/google-news/index.php") ?></div>
</div>
<!--오른쪽 영역 -->
<div id="rightside">
<div class="right"><?=latest("mw.news", "id_1", 5, 25)?></div>
<div class="right1">right1</div>
</div>
<div id="bottom">Bottom Box</div>
</div>
</body>
</html>
[/code]
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 7개
채택하신분께 드릴게요! (질문후)
#container {width: 990px;} <<- 주니까 정상적으로 보이긴하는데--ㅋ 참고로 현재전 삼실이라(익스7)
#container {width:990px; padding:0; margin:0 auto;} <-욜케 일단 크롬만 후딱 깔아서 확인했음
파폭 안봤어도 될것임-0-ㅋ 삼실이라 온니 익스--ㅋ