css 오류 확인좀 부탁드리겠습니다.

뒷집돌쇠 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2014.09.27 18:44:58 조회 3656 (121.♡.♡.171)

본문

메인페이지를 준비하는 중인데요.

링크의 페이지를 보시면 크롬이나 쿨노보등에서는 정상적으로 슬라이드배너 좌우 화살표가

로드되는데 익스플로러에서는 좌측 화살표가 오른쪽으로 많이 밀려있습니다.

jquery 메뉴를 적용하고 나서부터 이러는데 제 지식으로는 도저히 해결책을 찾기 힘드네요. ㅠㅠ

우선 index.html 내용입니다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Beautiful advanced jQuery background image slideshow</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="header">
	<!-- jQuery handles to place the header background images -->
	<div id="headerimgs">
		<div id="headerimg1" class="headerimg"></div>
		<div id="headerimg2" class="headerimg"></div>
	</div>
	<!-- Top navigation on top of the images -->
	<div id="nav-outer">
		<div id="navigation">
			<div>
				<ul>
					<li id="logo"><a href="http://ami1388.83rpm.com"><img src="images/logo.png" border="0"></a></li>
				</ul>
			</div>
			<div id="menu">
				<ul class="menu">
				<li><a href="#">My dashboard</a></li>
				<li><a href="#">Likes</a></li>
				<li><a href="#">Views</a>
				<ul>
				<li><a href="#" class="documents">Documents</a></li>
				<li><a href="#" class="messages">Messages</a></li>
				<li><a href="#" class="signout">Sign Out</a></li>
				</ul>
				</li>
				<li><a href="#">Uploads</a></li>
				<li><a href="#">Videos</a></li>
				<li><a href="#">Documents</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- Slideshow controls -->
	<div id="headernav-left">
		<div id="lheadernav">
			<ul id="back" class="btn"></ul>
		</div>
	</div>
		<div id="headernav-right">
		<div id="rheadernav">
			<ul id="next" class="btn"></ul>
		</div>
	</div>
</div>
<div id="content">
 
</div>
</body>
</html>

그리고 css 화일의 내용입니다. (좀 깁니다. ^^ ㅈㅅ)


/*
                                __      _ _                   _   
                               / _|    | (_)                 | |  
 _ __ ___   __ _ _ __ ___ ___ | |_ ___ | |_  ___   _ __   ___| |_ 
| '_ ` _ \ / _` | '__/ __/ _ \|  _/ _ \| | |/ _ \ | '_ \ / _ \ __|
| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | |  __/ |_ 
|_| |_| |_|\__,_|_|  \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
                                                                  
*/
 
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
 
/* HTML ELEMENTS */
body { background-color:white; font:62.5% Georgia,'Times New Roman',serif; letter-spacing:1; }
/* 가로스크롤 제거 */
html { overflow:scroll; overflow-x:hidden; }
 
/* COMMON CLASSES */
.break { clear:both; }
 
/* HEADER */
#header { height:600px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }
 
/* NAVIGATION */
#nav-outer { height:120px; padding-top:11px; position:relative; top:24px; background-image:url("../images/headerbg.png"); }
#navigation { height:100px; width:960px; margin:0 auto; }
 
/* CONTROLS */
.btn { height:90px; width:25px; float:left; cursor:pointer; }
#back { background-image:url("../images/btn_back.png"); }
#back:hover { background-image:url("../images/btn_backo.png"); }
#next { background-image:url("../images/btn_next.png"); }
#next:hover { background-image:url("../images/btn_nexto.png"); }
 
/* HEADER HAVIGATION left*/
#headernav-left { position:relative; top:185px; margin:0 auto; width:960px; }
#lheadernav { padding-left:0px; }
 
/* HEADER HAVIGATION right*/
#headernav-right { position:relative; top:185px; margin:0 auto; width:960px; }
#rheadernav { padding-left:900px; }
 
/* CONTENT */
#content { color:#575757; background-color:white; }
#content p { padding:10px 20px; font-size:16px; width:960px; margin:0 auto; }
#content p a { text-decoration:none; color:#CD2B3A; }
#content p a:hover { text-decoration:underline; color:#7F000C; }
 
/* MENU */
#menu { position:relative; top:0px; left:420px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }
/* ----------------------------- menu --------------------------- */
 
/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}
 
/* Menu */
.menu {	
	height: 40px;
	width: 960px;
 
	/*background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);*/
 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
 
.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}
 
/* Links */
 
.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 18px;
	text-decoration: none;
	
	border-left: 1px solid #999999;
 
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;
 
	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}
 
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
 
.menu li:hover > a { color: #8fde62; }
 
/* Sub Menu */
 
.menu ul {
	position: absolute;
	top: 37px;
 
	background: white;
	opacity: 0;
 
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
 
	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}
 
.menu li:hover > ul { opacity: 1; }
 
.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;
 
	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}
 
.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}
 
.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;
 
	border: none;
	border-bottom: 1px solid #353539;
}
 
.menu ul li:last-child a { border: none; }
 
/* Icons */
 
.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

어디를 수정해야 할지 모르겠네요. css 초보라서 죄송합니다. ^^;

#css

답변 2

새벽비 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-09-28 00:41:15 125.♡.♡.221

</div>

</div>

를

</div>로 바꾸시고

스타일을

#headernav{position:relative;margin:0 auto;width:960px}

.btn {position:absolute; top:185px; height:90px; width:25px;cursor:pointer; }

#back {left:-25px;background-image:url("../images/btn_back.png"); }

#back:hover { background-image:url("../images/btn_backo.png"); }

#next {right:-25px;background-image:url("../images/btn_next.png"); }

#next:hover { background-image:url("../images/btn_nexto.png"); }

로 바꿔보세요.

컨텐츠의 넓이를 960px로 잡은것 같아서 좌우 화살표도 960px를 기준으로 잡았구요, 화면 좌우 끝 기준으로 잡으실거면 #headernavd의 width:960px를 min-width:960px로 바꾸시고 #back, #next의 left, right값을 10~20px로 정도로 해두시면 보기 좋을것 같네요.