Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

파이어폭스에만 적용되는 핵 본문

Web publishing/웹 표준

파이어폭스에만 적용되는 핵

BeOne 2010. 5. 4. 17:16

테스트 결과 파이어폭스 3.5까지 모두 지원이 되었습니다.

@-moz-document url-prefix() { div#header h1 {font: 1.2em bold arial;} } 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Basic three column</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="demo_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {margin:0px; padding:0px; font: 1.0em verdana, arial, sans-serif;}
div#header {height:48px; background-color:#CCC; padding-top:12px;}
div#header h1 {width:18em; margin-top:0px; margin-right:auto; margin-left:auto; font: 1.2em bold "comic sans MS", cursive;  text-align:center; border:solid;}
div#nav {position:absolute; left:0px; top:60px; width:150px;
    padding:.5em 0 0 0; margin:22px 0 0 15px;
    border-top:2px solid #069; border-bottom:1px solid #069;}
div#nav ul {margin-top:0; margin-bottom:.8em;}
div#nav li {margin-bottom:.5em; font-weight:bold; font-size:.75em;}   
div#content {margin:20px 150px 0 165px; padding: 0 1em;}
div#content h1{font-size:1em;}
div#content p {font-size:.8em;} 
div#content li {font-size:.75em;}
div#rightcolumn {position:absolute; width:125px; top:60px; right:0px; 
  margin:20px 15px 0 0; padding:1em  .5em; border-top:2px solid #069; border-bottom:1px solid #069;}
div#rightcolumn p {font-size:.75em;}
@-moz-document url-prefix() { div#header h1 {font: 1.2em bold arial;} }


</style>
</head>
<body>
<div id="header"><h1>Three-column layout with header</h1></div>
<div id="nav">
  <ul>
    <li><a href="#">Rubovia</a></li>
    <li><a href="#">Middle Earth</a></li>
    <li><a href="#">Far, Far Away</a></li>
  </ul>
</div>
<div id="content">
  <h1>Adding a Header</h1>
  <p><strong>Step 3 - style and center the heading element.</strong> We set a width for the h1 element in the header so we can apply auto margins on each side to center it.</p>
 
  <p>We also use the text-align property to center the type within this centered element, and select a different font for a little variety. The h1 border is temporarily on so you can see the
  element's position and the text centered within it.</p>
  <p>Unfortunately, IE5 doesn't support auto margins, so the header is not centered in IE5 - we'll fix that in our clean-up phase.</p>
 <p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus
    mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse
    consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis
    fermentum purus.</p>
 <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales,
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna.
    Nunc mattis congue leo. Ut diam nibh, mollis at, luctus eget, rhoncus id,
    elit. Suspendisse potenti. Quisque eget justo rutrum erat placerat pellentesque.
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames
    ac turpis egestas.</p>
</div>
<div id="rightcolumn">
 <p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales,
    magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna.
    Nunc mattis congue leo.</p>
</div>
</body>
</html>

 

저작자표시

'Web publishing > 웹 표준' 카테고리의 다른 글

IE7 li 에 이미지 사용시 벌어지는 문제 해법  (0) 2010.11.25
웹표준, 웹접근성 세미나  (0) 2010.05.29
파이어폭스에서 플래시 투명하게하기  (0) 2010.04.08
웹표준코딩 팁 - 하코사  (1) 2010.04.01
html5 관련 tag  (0) 2010.03.30
'Web publishing/웹 표준' Related Articles more