จาก WikiBall

หลังจากค้นหาข้อมูลอยู่หลายครั้งในการทำ round-corner ให้กับเวปไซต์ ส่วนมาก round corner ที่ใช้กันจะเป็นแบบ static คือกำหนดความยาวรูป และกล่องมาเลย ทำให้ไม่ยืดหยุ่นในการใช้งาน แต่ถ้าเป็นแบบ dynamic ที่สามารถยืดหดกล่องได้และทำโดยใช้ div และ css จะทำได้ยากมากเพราะติดปัญหาเรื่อง cross browser โดยเฉพาะการแสดงผลใน MSIE จะมีปัญหามาก เนื่องจากไม่ค่อยแสดงผลตามแบบ w3c สักเท่าไหร่ และโดยเฉพาะเจ้า MSIE6 มีปัญหา bug ที่เกี่ยวกับ css มากอยู่พอสมควร เช่น ปัญหา [3px-jog] ซึ่งทำให้การออกแบบบางลักษณะไม่ได้

เนื้อหา 1 การใช้ css ของ Mozzilla 2 การใช้ DIV+CSS 2.1 HTML 2.2 CSS 3 การใช้ css ของ Mozzilla

การใช้ css ของ Mozzilla

• -moz-border-radius-bottomleft sets the rounding for the bottom-left curve.
• -moz-border-radius-bottomright sets the rounding for the bottom-right curve.
• -moz-border-radius-topleft sets the rounding for the top-left curve.
• -moz-border-radius-topright sets the rounding for the top-right curve.

ข้อดีคือ

• ทำง่าย
• ใช้ bandwidth และ connection น้อย

ข้อเสีย

• ใช้ได้ไม่ครบทุก browser แน่นอนว่า MSIE ใช้ไม่ได้แน่นอน

https://developer.mozilla.org/en/CSS/-moz-border-radius

การใช้ DIV+CSS

HTML

<div id="box">
  <div class="border-top"></div>
  <div class="border-topleft"></div>
  <div class="border-topright"></div>
  <div class="border-left"></div>
  <div class="border-right"></div>
  <div class="border-bottom"></div>
  <div class="border-bottomleft"></div>
  <div class="border-bottomright"></div>
  <div class="content">
    /* Type your content */
  </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

#box {
	position: relative;
	/* Replace the border image size here */
	margin: 12px 12px 12px 12px;
	/*
	 * Don't use padding here because IE6 is render incorrectly
	 * Padding shoud be in ".content"
	 */
}

#box .content {
	padding: 4px;
}

.border-top,
.border-bottom,
.border-topleft,
.border-left,
.border-bottomleft,
.border-topright,
.border-right,
.border-bottomright {
	position: absolute;
}

.border-top,
.border-bottom {
	left: 0px;
}

.border-topleft,
.border-left,
.border-bottomleft {
	left: -12px;
	width: 12px;
}

.border-topright,
.border-right,
.border-bottomright {
	right: -12px;
	width:  12px;
}
.border-top,
.border-topleft,
.border-topright {
	top:   -12px;
	height: 12px;
}

.border-bottom,
.border-bottomleft,
.border-bottomright {
	bottom: -12px;
	height:  12px;
}

.border-top, .border-bottom {
	width: 100%;
}
.border-left, .border-right {
	top: 0px;
	bottom: 0px;
	height: 100%;
	/* IE6 fix the 100% bug */
	_height: expression(eval(this.parentNode.clientHeight) + "px");
}

/* replace the border images link here */
.border-top         { background: URL(../images/greenHorizontal.gif) repeat-x top; }
.border-topleft     { background: URL(../images/greenCorner.gif) no-repeat left top; }
.border-topright    { background: URL(../images/greenCorner.gif) no-repeat right top; }
.border-left        { background: URL(../images/greenVertical.gif) repeat-y left; }
.border-right       { background: URL(../images/greenVertical.gif) repeat-y right; }
.border-bottom      { background: URL(../images/greenHorizontal.gif) repeat-x bottom; }
.border-bottomleft  { background: URL(../images/greenCorner.gif) no-repeat left bottom; }
.border-bottomright { background: URL(../images/greenCorner.gif) no-repeat right bottom; }

การใช้ css ของ Mozzilla

• -moz-border-radius-bottomleft sets the rounding for the bottom-left curve.
• -moz-border-radius-bottomright sets the rounding for the bottom-right curve.
• -moz-border-radius-topleft sets the rounding for the top-left curve.
• -moz-border-radius-topright sets the rounding for the top-right curve.

ข้อดีคือ

• ใช้ได้ทุก browser

ข้อเสีย

• เขียน css ยุ่งยาก
• ต้องเปิด connection เพื่อโหลดรูปเพิ่มอีก 3 รูป

จาก WikiBall

HTML code

<div id="GovTop10"><h1>เวปราชการยอดนิยม</h1>
<ol>
<li><a title="สรรพากร (www.rd.go.th)" href="http://www.rd.go.th">สรรพากร</a></li>
<li><a title="สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน (www.obec.go.th)" href="http://www.obec.go.th">สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน</a></li>
<li><a title="สำนักงานประกันสังคม (www.sso.go.th)" href="http://www.sso.go.th">สำนักงานประกันสังคม</a></li>
<li><a title="สำนักงานสลากกินแบ่งรัฐบาล (www.glo.or.th)" href="http://www.glo.or.th">สำนักงานสลากกินแบ่งรัฐบาล</a></li>
<li><a title="กรมส่งเสริมการปกครองท้องถิ่น (Department of Local Administration) (www.thailocaladmin.go.th)" href="http://www.thailocaladmin.go.th">กรมส่งเสริมการปกครองท้องถิ่น (Department of Local Administration)</a></li>
<li><a title="กรมประชาสัมพันธ์ (www.prd.go.th)" href="http://www.prd.go.th">กรมประชาสัมพันธ์</a></li>
<li><a title="www.ocsc.go.th (www.ocsc.go.th)" href="http://www.ocsc.go.th">www.ocsc.go.th</a></li>
<li><a title="ธนาคารแห่งประเทศไทย (www.bot.or.th)" href="http://www.bot.or.th">ธนาคารแห่งประเทศไทย</a></li>
<li><a title="Information of Thai tambon or villages with local products and many interesting places (www.thaitambon.com)" href="http://www.thaitambon.com">Information of Thai tambon or villages with local products and many interesting places</a></li>
<li><a title="CM108.com เชียงใหม่ หางานเชียงใหม่ ภาพเชียงใหม่ เชียงใหม่108 จังหวัดเชียงใหม่ (www.cm108.com)" href="http://www.cm108.com">CM108.com เชียงใหม่ หางานเชียงใหม่ ภาพเชียงใหม่ เชียงใหม่108 จังหวัดเชียงใหม่</a></li>
</ol>
</div>

CSS code

#GovTop10 {
	text-align: left;
	width: 200px;
}
#GovTop10 li{
	width: 180px;
}
#GovTop10 h1{
	font-size: 15px;
	color: #29ABE2;
	text-align: center;
	margin-bottom: 0px;
}

#GovTop10 .site{
	width: 180px;
	list-style: none;
}

GovTop10 .zebra_odd{
	background-color:#FFFFFF;
}
#GovTop10 .zebra_even{
	background-color: #EFEFEF;
}

วิธีแก้ไข

หลังจากหาอยู่เป็นเวลานานจึงได้พบว่า สิ่งที่ทำให้เกความผิดพลาดคือ

#GovTop10 li{
	width: 180px;
}

โดยถ้าลบ width ทิ้ง ก็จะแสดงผลได้ถูกต้องตามเดิม