SIR
목록으로

CSS div 질문드립니다

영영튜
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전 조회 10,642
답변 3
목록

크롬에서는 원하는대로 나오는데 익스에서는 엉망으로 나오네요...

잘못된 부분이나 고칠점을 알려주실수 있을까요?ㅠㅠ

Copy 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link rel="stylesheet" href="normalize.css" />
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@font-face {font-family:COUTURE-Bold; src:url(COUTURE-Bold.ttf);}
* { margin: auto; padding: 0px; border: 0px; font-family: Nanum Gothic; }
ul { line-height: 160% }
h1 { line-height: 120%; font-family: COUTURE-Bold; }
h3 { line-height: 120%; font-family: }
body {
	background: url("bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: fixed;
}
.menu {
	width: 150px;
	background-color: #000000;
	font-size: 13px;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
}
#menu {
	position: fixed;
	top: 100px;
	left: 10px;
	padding: 0px 0px 0px 0px;
}
#logo {
	font-family: COUTURE-Bold;
	font-size: 35px;
	color: #FFFFFF;
	position: fixed;
	left: 20px;
	top: 15px;
	margin-left: 0px;
}
#info {
	font-size: 11px;
	width: 200px;
	position: fixed;
	left: 10px;
	bottom: 10px;
}
#menu1 {
	position: relative;
	top: 0px;
}
#menu2 {
	position: relative;
	top: 10px;
}
#menu3 {
	position: relative;
	top: 20px;
}
.btn_content {
	display: block;
	width: 360px;
	border-style : solid;
	border-width : 1px;
	color: #000;
	font-family: "Georgia";
	font-weight : 700;
	font-style: italic;
	font-size : 12px;
	text-align : center;
	padding: 15px 0px;
	margin-top: 30px;
}
.articles {
	width: 400px;
	text-align : center;
	position: fixed;
	left: 50%;
	top: 30%;
	color: #000;
	margin-left: -200px;
}
</style>
</head>

<body>
<div id="logo">로고</div>
<div id="menu">
	<div class="menu" id="menu1">
    	<ul>BOUTIQUE</ul>
        <ul>NOTICE</ul>
        <ul>STATUS</ul>
        <ul>HELP</ul>
    </div>
    <div class="menu" id="menu2">
    	<ul>DIARY</ul>
        <ul>FACEBOOK</ul>
    </div>
    <div class="menu" id="menu3">
    	<ul>AGREEMENT</ul>
    	<ul>PRIVACY POLICY</ul>
    	<ul>GUIDE</ul>
	</div>
</div>
<div class="menu" id="info">
	<ul>내용1</ul>
	<ul>내용2</ul>
	<ul>내용3</ul>
	<ul>내용4</ul>
	<ul>내용5</ul>
	<ul>내용6</ul>
	<ul>내용7</ul>
	<ul style="color: #777;">내용8</ul>
</div>
<div class="articles">
	<h1>문구1</h1>
	<h3>문구2</h3>
    <a href="#" class="btn_content" data-dynamic="link">문구3</a>
</div>

</body>
</html>
#html5 #html #크로스브라우징 #css

답변 3개

<style>
 ul{list-style:none}
</style>
스타일에 추가 해주세요
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

doctype 선언도 하시고 덧붙여서 ul태그에 li가 빠진듯
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

네 빠졌네요ㅠㅠ 만약 그냥쓰면 문제가 되는건가요? li를 쓰면 앞에 땡떙이? 가 나와서요ㅜㅜ

댓글을 작성하려면 로그인이 필요합니다.

doctype이 없어서 브라우저가 지멋대로 해석을 해서 그렇습니다.

doctype 선언하시고 크로스브라우징 하시면 됩니다.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다 doctype 하나 쓰니 거의 원하는데로 나와요!

#menu {
width: 0;
float: left;
position: fixed;
top: 100px;
left: 10px;
padding: 0px 0px 0px 0px;
}

이렇게 고쳤는데 width와 float가 잘못된거같은데 일단 이렇게 하면 익스에서도 원하는데로 나옵니다

더 좋게 웹표준에 맞게 고치려면 어떻게해야할지..ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고