Wow. I NEVER would have figured that one out on my own. Wish I had asked sooner!
Paul, I can’t thank you enough for all of the help you’ve provided me with over the past year or so … and I can’t believe how much you know about every little thing having to do wish CSS. Did you invent CSS??? 
Thanks a bunch.
Precisely:)
Technique showed here: http://www.pmob.co.uk/temp/3col-centred-template6.htm
does not work really good in my case. In FF footer is not on bottom of page.
Here is link:
http://81.93.74.18/berzanova
does not work really good in my case. In
Thats because you didn’t follow the method correctly 
The example works perfectly in all mozilla.
You have added a form wrapper to the page and therefore the 100% height collapses to zero. You must follow my instructions carefully. Read the faq on 100% height for more information and the faq on putting a footer at the bottom of the page.
This is your first line:
<form name=“Form1” method=“post” action=“Default.aspx” id=“Form1”>
<input type=“hidden” name=“__VIEWSTATE” value=“dDw5OTI2NTAzNjg7Oz719p5sXGsnsquI11Rlt1Y+xz7g8Q==” />
If you have to have a form element surrounding your page (although I don’t know why) then you will have to treat the form as you main wrapper and apply to it all the styles that you were applying to #drzac instead.
You only have one shot at 100% height and you must use it wisely
How long did it take you to get used to all this Paul? I’m tinkering and trying different things and I think all I’m succeeding in doing is getting frustrated! :xeye:
Started with this, have turned it into this:
/* CSS Document */
* {margin:0;padding:0}
p{margin-bottom:1em}
ul{margin-left:16px;margin-bottom:1em}
/* commented backslash hack v2 \\*/
html, body{height:100%;}
/* end hack */
/* set link properties */
A:link {color:#FFFF00; TEXT-DECORATION: underline}
A:visited {color:#FFFF00; TEXT-DECORATION: underline}
A:active { TEXT-DECORATION: underline}
A:hover{color:#add8e6; TEXT-DECORATION: underline}
body {
background:#000080;
color: #ffffff;
}
#outer{
margin-left:130px;
margin-right:130px;
background:#000080;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #ffffff;
min-height:100%
}
#header{
position:absolute;
top:0;
left:0;
width:470px;
height:70px;
background:#000080;
overflow:visible;
color: #ffffff;
}
#headeradvert{
position:absolute;
text-align:right;
top:0;
right:0;
width:50%;
height:70px;
background:#000080;
overflow:hidden;
color: #ffffff;
}
#headerprint{
position:absolute;
top:70;
left:0;
width:50%;
height:70px;
background:#000080;
overflow:hidden;
color: #ffffff;
}
#headerusers{
position:absolute;
top:70;
right:0;
width:50%;
height:70px;
background:#000080;
overflow:hidden;
color: #ffffff;
}
#left {
background:#a50400;
position:relative;/*ie needs this to show float */
width:130px;
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
z-index:100;
left:-1px;
}
#left p,
#right p {padding:3px}
#right {
position:relative;/*ie needs this to show float */
width:130px;
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
left:1px
background:#000080;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #000080;
color: #ffffff;
text-align:center;
position:relative;
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:52px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
#centrecontent {
width:100%;
float:left;
position:relative;
z-index:1;
margin:0 -1px;/* moz fix*/
}
/* css stuff below is just for presentation and not needed for the demo */
#left span {
display:none;
}
#left a:hover span {
display:block;
position:absolute;
left:130px;
width:150px;
z-index:20;
}
@media all and (min-width: 0px){
#left a:hover span {
top:150px;
}
}
#footer span {
display:none;
}
#footer a:hover {
color: #666666;
background: #FFFFCC;
text-decoration: none;
}
#footer a:hover span {
display:block;
position:absolute;
top:-95px;
width:150px;
z-index:20;
background:#fff;
left:50%;
}
html>body #minHeight{float:right;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */
Wanting to get something like this (old html/table design), feel I’m getting nearer with [url=http://www.trulybizarre.co.uk/archives/test.php]this.
Couple of problems:
Any ideas/clues?
Hi,
The columns aren’t showing in IE because you have omitted the 100% height for ie which not only gives it the 100% height it also forces “layout” so that ie behaves (see faq on haslayout").
The print heading is at the bottom because oyu have given it no top position and therefore it is placed where it is in the flow. You have given it a top position of top:70 - 70 what? miles, inches, light years…
Units without dimensions are treated as zero.
It looks as though it should be about top:30px anyway otherwise it goes under the other elements.
[b]* html #outer{height:100%}[/b]
#headerprint{
position:absolute;
[b]top:30px;[/b]
left:0;
width:50%;
height:70px;
background:#000080;
overflow:hidden;
color: #ffffff;
}
Hope it helps
That’s an enormous help, thank you.
BTW I suspect many people will know this already, but the Firefox Webdeveloper toolbar is very handy for showing gridlines in relation to a CSS design. I’m finding it quite handy for making alterations.
Back to tampering with THIS SITE again.
Need I bother saying that it looks good in everything except Windows IE?
In Win IE, the main content in the center is pushed way down the page. Can’t figure out why, and I’m fried from trying. Any help would be appreciated.
HI Jonzal,
It looks like the 3 pixel jog to me (again) which can only be fixed by a hack I’m afraid,
* html #sidebar2{margin-right:-3px;}
* html #sidebar{margin-left:-3px;}
* html #content{margin-left:-177px}
However I’m thinking that as you have a fixed with layout then you should simple be able to remove the margin-left form Content and float it instead without needing any hacks.
#content {
width: 535px;
padding: 0 33px 0 32px;
margin: -61px 0 0 0px;
border-top: 1px solid #000;
float:left;
}
I haven’t tested the last idea but the first one definately works but the second would be neater.
I don’t think you need the minheight safari hack anymore as the later versions of safari support min-height (and I’m not sure its working where it is anyway - I don’t have safari to test either.)
papaja,
i notice Paul identified a form tag wrapping your entire document as the source of your problem.
are you using a forms class? i had the same issue a while back. i had to refactor my code to get
startlayoutcapture() and
endlayout capture()
around my form only - and not around all my html. those aren’t the real names of the methods, but you get the idea.
my set up is as follows:
startlayoutcapture() and
endlayout capture()
at the form level instead of at the logic page level where it will surround all of your code.
if the forms class isn’t causing this problem, sorry for giving you a headache.
hello paul,
great job man
thx
great job man
thx
You’re welcome
(and welcome to sitepoint forums ;))
you aren’t alone. Paul is either a css natural or a highly disturbed person who likes inflicting pain on himself.
seriously, thanks Paul for helping out so many folks wade through the brwser css mess. it has`been a while sice i stopped in, but i still appreciate what you did for me and what you do for others.
in addition Paul is extremely willing to help. Just hope he gets out enough!
Paul, if you are ever over in Sussex I will buy you a pint on behalf of all of us!!
cheers
I just wanted to pop in and say Thank you so much. I have been searching all over trying to find tutorials for footer placement that would adjust positioning automatically based on page content. 
hi paul and all,
i’ve tried to do the same thing… sorry for my ignorance that i’m really new to coding,
perhaps i don’t understand ur explanations fully…
here is the link to what i tried to achieve:
http://www.virtuoso.com.my/hwang_test/investor_family_div_test.html
the height of the whole page seems longer than the viewport, and the shadow image
doesn’t tile till the bottom in firefox… would appreciate helps from you guys!!
Hi,
i’ve tried to do the same thing… sorry for my ignorance that i’m really new to coding,
I think I am going to refer you to the explanation linked to in the demo so that you can understand what is going on with certain elements especiallay the 100% height.
Once you’ve done that then look at the css faq at the top of the forum and read the section on 100% height and the one on putting a footer at the bottom. I know this may seem a bit of a task but theres not much point in me giving you fixes if you can’t understand why they need to be done in certain ways
You ony have one-shot at 100% height and only one container can be 100%. You cannot nest inner elements with 100% heights because css doesn’t work like that (more’s the pity :)).
Also when you specify 100% height you must give good browsers min-height;100% and ie6 and under height:100% but they must be kept separate from each other otherwise good browsers will fix the page to 100% and no more. This is explained in the faq under the 100% height section.
So once you have read all the above then go and make yourself a background image that contains the shaodw image and the red column image and also include the left column background colour and the white dividing border. You need to include all those elements on one image because we only have one 100% high container to repeat it on.
Look at this 3 col example that uses one image for all three columns.
http://www.pmob.co.uk/temp/3col-centred-template.htm
http://www.pmob.co.uk/temp/3col-centred-template6.htm
I have adjusted your page and included the shadow image on the body which is not really a good idea because ie won’t make it meet the containers image exactly.
However the page will show you the format you need and if you repeat the new image you make on the main container then is should be self explanatory (you will need to put the container back to 840px when you include the shadow image).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://www.virtuoso.com.my/hwang_test/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://www.virtuoso.com.my/hwang_test/pngfix/pngfix.js"></script>
<![endif]-->
<script language="JavaScript" type="text/javascript">
<!--
function JumpToIt(list)
{
var selection = list.options[list.selectedIndex].value
if (selection != "None")
window.open(selection)
}
//-->
</script>
<script language="javascript" src="http://www.virtuoso.com.my/hwang_test/popup.js" type="text/javascript"></script>
<link href="hwang_main.css" rel="stylesheet" type="text/css" />
<link href="hwang_top.css" rel="stylesheet" type="text/css" />
<link href="hwang_right_panel.css" rel="stylesheet" type="text/css" />
<style type="text/css">
* {margin:0;padding:0}
p.h1,h2,h3,h4,h5,h6,ol,ul{margin-bottom:1em}
ul,ol{margin-left:16px;}
html, body{ height: 100%;}
body {
background: url(http://www.virtuoso.com.my/hwang_test/shadows.gif) repeat-y center top;
text-align:center;
}
#container {
width: 800px;
min-height: 100%;
margin:auto;
}
* html #container {height:100%}
#contents {
clear: both;
width: 800px;
padding-bottom:30px;
}
#left_bar_space {
width: 5px;
min-width: 5px;
background-color: #BF2828;
float: left;
display: block;
margin: 0px 0px 0px 0px;
}
#content_box {
background-color: #F5F5F5;
width: 567px;
float: left;
}
#quick_links {
width: 530px;
height: 15px;
float: left;
padding-top: 3px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
color: #666666;
}
#visual_header {
width: 540px;
float: left;
}
#intro_txt {
float: left;
width: 530px;
padding-top: 8px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
text-align: justify;
vertical-align: top;
font-style: normal;
line-height: normal;
}
.txt_body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
text-decoration: none;
text-align: justify;
vertical-align: top;
font-style: normal;
line-height: normal;
}
.txt_body_bold {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #333333;
text-decoration: none;
text-align: justify;
vertical-align: top;
font-style: normal;
line-height: normal;
}
#v_space10 {
width: 9px;
height: 15px;
float: left;
background-color: #F5F5F5;
}
#divider_g_h {
float: left;
width: 540px;
background-image: url(http://www.virtuoso.com.my/hwang_test/images/divider_g_h.gif);
background-repeat: repeat-x;
height: 15px;
display: block;
background-position: 10pt 6px;
}
#footer {
width: 800px;
margin:-30px auto 0;
position:relative;
height: 30px;
clear: both;
background-color: #E0DFE3;
}
#ast_txt {
float: left;
height: 20px;
padding-left: 15px;
padding-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666666;
text-decoration: none;
}
#ast_company {
padding-left: 5px;
padding-top: 7px;
float: left;
height: 23px;
}
.ast_company {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #333333;
text-decoration: none;
}
.divider {
float: left;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
}
#policy {
float: left;
padding-top: 10px;
}
#disclaimer {
float: left;
padding-top: 10px;
}
.policy_disc {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
}
#copyright {
padding-right: 15px;
padding-top: 10px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
}
#header {
width: 800px;
display: block;
}
#top_space {
height: 10px;
width: 800px;
display: block;
}
#top_nav {
clear: both;
width: 800px;
height: 98px;
padding: 0px 0px 0px 0px;
}
#hwang_logo {
width: 218px;
padding-bottom: 40px;
float: left;
}
#top_nav_links {
float: right;
width: 582px;
margin-top: 0px;
}
#link_home {
height: 19px;
padding-top: 5px;
padding-left: 10px;
float: left;
}
#link_about {
height: 19px;
padding-top: 5px;
padding-left: 18px;
float: left;
}
#link_distribution {
height: 19px;
padding-top: 5px;
padding-left: 18px;
float: left;
}
#link_compliance {
height: 19px;
padding-top: 5px;
padding-left: 19px;
float: left;
}
#link_careers {
height: 19px;
padding-top: 5px;
padding-left: 17px;
float: left;
}
#link_contact {
height: 19px;
padding-top: 5px;
padding-left: 16px;
float: left;
}
#link_search {
height: 19px;
padding-top: 5px;
padding-left: 45px;
float: left;
}
#search_box {
padding-top: 3px;
height: 21px;
float: left;
}
#link_go {
height: 24px;
padding-right: 11px;
float: right;
}
.search_input {
height: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #333333;
vertical-align: bottom;
background-color: #FFFFFF;
}
#separator {
height: 25px;
width: 572px;
background-image: url(http://www.virtuoso.com.my/hwang_test/top_navi_images/top_navi_28.gif);
background-repeat: repeat-x;
float: right;
}
#main_links1 {
float: left;
}
#main_links2 {
float: left;
}
#main_links3 {
float: left;
}
#main_links4 {
float: left;
}
#main_links5 {
float: left;
}
#right_panel {
width: 228px;
float: right;
padding-bottom:30px;
}
#bg_top {
float: left;
width: 228px;
height: 24px;
background-image: url(http://www.virtuoso.com.my/hwang_test/right_panel_images/bg_top.gif);
background-repeat: no-repeat;
background-position: right top;
padding-top: 7px;
text-indent: 17px;
text-align: left;
display: block;
margin: 0px;
}
#bg_bottom {
position:absolute;
right:0;
top:-31px;
width: 228px;
height: 31px;
background-image: url(http://www.virtuoso.com.my/hwang_test/right_panel_images/bg_bottom.gif);
background-repeat: no-repeat;
background-position: left top;
}
#nav {
float: right;
width: 228px;
margin: 0px;
padding: 0px;
background-image:url(http://www.virtuoso.com.my/hwang_test/right_panel_images/bg_all.gif);
background-repeat: repeat-y;
}
#nav ul {
float: left;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#nav li {
margin: 0px;
text-indent: 17px;
height: 32px;
}
#nav li a,
#nav li a:visited {
width: 228px;
height: 26px;
padding-top: 3px;
padding-bottom: 3px;
display: block;
float: left;
overflow: visible;
text-decoration: none;
}
#nav li a:hover {
width: 228px;
height: 26px;
padding-top: 3px;
padding-bottom: 3px;
background-color:#8F0000;
display: block;
float: left;
overflow: visible;
text-decoration: none;
}
</style>
</head>
<body>
<!-- start screen -->
<div id="container">
<!-- start container -->
<div id="header">
<!-- start header -->
<div id="top_space"></div>
<!-- top space -->
<div id="top_nav">
<!-- start top nav -->
<div id="hwang_logo"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/hwang_dbs.gif" alt="" width="218" height="58"/></div>
<div id="top_nav_links">
<!-- start firt row links -->
<div><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/top_navi_02.gif" alt="" width="582" height="9"/></div>
<div id="link_home"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_home.gif" alt="" width="28" height="15"/></div>
<div id="link_about"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_about.gif" alt="" width="45" height="15"/></div>
<div id="link_distribution"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_distribution.gif" alt="" width="53" height="15"/></div>
<div id="link_compliance"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_compliance.gif" alt="" width="56" height="15"/></div>
<div id="link_careers"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_careers.gif" alt="" width="40" height="15"/></div>
<div id="link_contact"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_contact.gif" alt="" width="53" height="15"/></div>
<div id="link_search"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/search.gif" alt="" width="34" height="15"/></div>
<div id="search_box">
<input name="textfield" type="text" class="search_input" size="16"/>
</div>
<div id="link_go"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/go.gif" alt="" width="23" height="24"/></div>
</div>
<!-- end firt row links -->
<div id="separator"></div>
<!-- start main links -->
<div id="main_links1"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_products.gif" alt="" width="139" height="33"/></div>
<div id="main_links2"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_fund.gif" alt="" width="93" height="33"/></div>
<div id="main_links3"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_fund.gif" alt="" width="93" height="33"/></div>
<div id="main_links4"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_fund.gif" alt="" width="93" height="33"/></div>
<div id="main_links5"><img src="http://www.virtuoso.com.my/hwang_test/top_navi_images/link_news.gif" alt="" width="63" height="33"/></div>
<!-- end main links -->
<div style="clear: both;"></div>
</div>
<!-- end top nav -->
</div>
<!-- end header -->
<div id="contents">
<!-- start all contents -->
<div id="left_bar_space"></div>
<div id="content_box">
<!-- start content box on left -->
<div id="quick_links">home > family minded</div>
<div id="visual_header"><img src="http://www.virtuoso.com.my/hwang_test/images/header_family.gif" alt="" width="540" height="150"/></div>
<div id="intro_txt">
<!-- start intro texts -->
As your progress in life, your loved ones depend on you to make sound decisions that will ascertain a comfortable life for the whole family. Planning ahead to ensure your finances are sound and sufficient for the present and future purposes require a lot of time and effort.<br />
<br />
We have taken on the hard work of evaluating available options to make certain you have access to the best, collective investment solutions that may potentially help you achieve your financial goals. <span class="txt_body_bold">There are some things you wish did not grow so quickly, money should not be one of them.</span><br />
<br />
Here are the funds we believe may potentially match your growing needs:</div>
<!-- end intro texts -->
<div id="divider_g_h">
<div id="v_space10"></div>
</div>
</div>
<!-- end content box on left -->
<div id="right_panel">
<!-- start right panel -->
<div id="bg_top"><img src="http://www.virtuoso.com.my/hwang_test/right_panel_images/header_investers.gif" alt="" width="186" height="15" /></div>
<div id="nav">
<ul>
<li><a href="individual.jsp"><img src="http://www.virtuoso.com.my/hwang_test/right_panel_images/01_young.png" alt="" width="112" height="26" border="0" /></a></li>
<li><a href="women.jsp"><img src="http://www.virtuoso.com.my/hwang_test/right_panel_images/02_women.png" alt="" width="71" height="26" border="0" /></a></li>
<li><a href="familyminded.jsp"><img alt="" src="http://www.virtuoso.com.my/hwang_test/right_panel_images/03_family.png" width="105" height="26" border="0" /></a></li>
<li><a href="corporate.jsp"><img alt="" src="http://www.virtuoso.com.my/hwang_test/right_panel_images/04_corporate.png" width="150" height="26" border="0" /></a></li>
<li><a href="highnetworth.jsp"><img alt="" src="http://www.virtuoso.com.my/hwang_test/right_panel_images/05_high.png" width="110" height="26" border="0" /></a></li>
<li><a href="retirees.jsp"><img alt="" src="http://www.virtuoso.com.my/hwang_test/right_panel_images/06_retirees.png" width="74" height="25" border="0" /></a></li>
<li><img alt="" src="http://www.virtuoso.com.my/hwang_test/right_panel_images/separator.gif" width="198" height="4" /></li>
<li><a href="fundoverview.jsp"><img alt="" src="http://www.virtuoso.com.my/hwang_test/right_panel_images/download.png" width="120" height="26" border="0" /></a></li>
</ul>
</div>
</div>
<!-- end right panel -->
<div style="clear: both;"></div>
</div>
<!-- end all contents -->
</div>
<!-- end container -->
<div id="footer">
<!--start footer-->
<div id="ast_txt">Associated Companies</div>
<div id="ast_company">
<form action="">
<select name="select" class="ast_company" onchange="JumpToIt(this)">
<option value="1" selected="selected">Select Site</option>
<option value="http://www.hdbs.com.my">Hwang-DBS Group</option>
<option value="http://www.dbsam.com">Hwang-DBSAM</option>
</select>
</form>
</div>
<div class="divider"><img src="http://www.virtuoso.com.my/hwang_test/footer_images/divider_nav.gif" alt="" width="8" height="14"/></div>
<div id="policy"><a href="javascript:policy();" class="policy_disc">Policy</a></div>
<div class="divider"><img src="http://www.virtuoso.com.my/hwang_test/footer_images/divider_nav.gif" alt="" width="8" height="14"/></div>
<div id="disclaimer"><a href="javascript:disclaimer2();" class="policy_disc">Disclaimer</a></div>
<div id="copyright">Copyright © 2006 Hwang-DBS Investment Management Berhad</div>
<div id="bg_bottom"></div>
</div>
<!-- end footer -->
</body>
</html>
Hope it helps but please read the faq I mentioned above as I am away for a few days and may not have time to reply for a while.
hi paul n all,
thanx for your help! I’ll look into the sections u mentioned, and before that,
I’ve made some changes to the layout and codes, like cutting down the number of divs, taken away unnecessary 100%height, removed “div screen”, container, background… etc.
my current question is how do i put the input box at the right position???
here’s the link to my updates:
http://www.virtuoso.com.my/hwang_test/investor_family_div_test3.html
thanx!!
hi guys,
last update for today (local time 11.50pm, GMT+8)
http://www.virtuoso.com.my/hwang_test/investor_family_div_test3.html
the current issues:
in IE, the footer looks bigger(height) and the bottom gap is visible…
gotta get the right panel stretch to the bottom, and keep the round left corner at bottom too!
search input box not in right place (ul li problem??)
would appreciate any helps!!!