html 작성시 컴퓨터 마다 다르게 보이는 현상
글쓴이: ant01 / 작성시간: 토, 2012/07/07 - 7:02오후
독타입도 지정하고 여러분이 알려 주시는데로 하여 메뉴를 와성했다고 생각했었습니다.
그런데 다른 사람에게 좀 봐달라고 하니 배경색부분이 하얗게 나온다고 하였습니다.
내 컴퓨터에서는 잘 나오는 데... 하여 또 다른 컴퓨터에서 확인하니 과연 배경색이 하얗게 나왔습니다.
인터넷에서 다운 받은 소스를 수정한 것인데 다운 받은 그대로를 테스트하니 마찮가지 였습니다.
아래에 다운 받은 소스 올립니다. 어디를 손 봐야할지 알려주시면 감사하겠습니다.
그런데 서로 다르게 나오는 브라우져 확인하니 모두 익스플로러 8이었습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Maker Installation Instructions</title>
<style type="text/css">
body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
h2 {font-weight:bold; color:#000099; margin:10px 0px; }
p span {color:#006600; font-weight:bold; }
a, a:link, a:visited {color:#0000FF;}
textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
textarea.html {height: 300px;}
p {margin: 0 0 10px 0;}
code, pre {font-family: Consolas,monospace; color: green;}
ol li {margin: 0 0 15px 0;}
</style>
</head>
<body>
<h2>Your Menu</h2>
<style type="text/css">.cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.cssmenu ul{
background:url(menu_assets/images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.cssmenu li{
float:left;
padding:0px 8px 0px 8px;
}
.cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.cssmenu li a:hover{
color:#000000;
text-decoration:none;
}
.cssmenu li ul{
background:#e0e0e0;
border-left:2px solid #9f9f9f;
border-right:2px solid #9f9f9f;
border-bottom:2px solid #9f9f9f;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.cssmenu li:hover ul{
display:block;
}
.cssmenu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.cssmenu p{
clear:left;
}
.cssmenu .active > a{
background:url(menu_assets/images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
.cssmenu .active > a:hover {
color:#ffffff;
}
</style>
<div class='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>Forums:
url( 다음에 지정된 이미지 파일들도 올바른
url( 다음에 지정된 이미지 파일들도 올바른 경로명과 이름으로 같이 넘겨줘야 제대로 보이지요;;
html 파일만 넘겨줬죠?
그리고 답답한건 알겠는데 그런식으로 첨부터 다 알려주세요 하는 식으로 질문올리면 누가 시간이 남아서 일일이 하나하나 답변해 줍니까?
브라우저별 다른점까지 맞춰 올바르게 동작하도록 하는
브라우저별 다른점까지 맞춰 올바르게 동작하도록 하는 것을 크로스브라우징 이라고 합니다.
http://naradesign.net/wp/category/webstandard/
https://xenosi.de/
댓글 달기