CSS div 질문드립니다

CSS div 질문드립니다

QA

CSS div 질문드립니다

본문

간단한 메인페이지를 만들어봤는데요

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

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


<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>

이 질문에 댓글 쓰기 :

답변 3

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

doctype 선언하시고 크로스브라우징 하시면 됩니다.

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

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

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

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

doctype 선언도 하시고 덧붙여서 ul태그에 li가 빠진듯
답변을 작성하시기 전에 로그인 해주세요.
전체 60
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT