SitePoint Sponsor

User Tag List

Page 49 of 66 FirstFirst ... 3945464748495051525359 ... LastLast
Results 1,201 to 1,225 of 1630
  1. #1201
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,
    Its the 3 pixel jog on static content next to a float which makes the middle section too big to fit.
    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.

  2. #1202
    SitePoint Zealot musicman77's Avatar
    Join Date
    Dec 2005
    Location
    New Orleans, Louisiana, USA
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Is that what you meant ?
    Precisely
    David A. -- Hand coder
    Get Firefox


  3. #1203
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Sipovo
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #1204
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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

  5. #1205
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Started with this, have turned it into this:
    Code:
    /* 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 this.

    Couple of problems:
    1) The css based design doesn't show the left or right columns in IE at all.
    2) Even though they are set as absolutes the print/user displays drop to the bottom of the page.

    Any ideas/clues?
    Even a stopped clock tells the right time twice a day.

  6. #1206
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code:
    * html #outer{height:100%}
     #headerprint{
    	position:absolute;
    	top:30px;
    	left:0;
    	width:50%;
    	height:70px;
    	background:#000080;
    	overflow:hidden;
    	color: #ffffff;
    }
    Hope it helps

  7. #1207
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Even a stopped clock tells the right time twice a day.

  8. #1208
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Content between floats pushed down in Win IE

    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.

  9. #1209
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    HI Jonzal,

    It looks like the 3 pixel jog to me (again) which can only be fixed by a hack I'm afraid,

    Code:
     * 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.

    Code:
     #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.)

  10. #1210
    SitePoint Evangelist
    Join Date
    Apr 2005
    Posts
    485
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by papaja
    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
    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:

    1. logic page includes frame page.
    2. frame page includes form page. frame page has all my html).
    3. my form page. my form page includes any form logic (display errors, display form, etc) and i call

    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. ;-)

  11. #1211
    SitePoint Member vipvanlines's Avatar
    Join Date
    Nov 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello paul,

    great job man
    thx

  12. #1212
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    great job man
    thx
    You're welcome

    (and welcome to sitepoint forums )

  13. #1213
    SitePoint Evangelist
    Join Date
    Apr 2005
    Posts
    485
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Toneboy
    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!
    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.

  14. #1214
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!

  15. #1215
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    cheers

  16. #1216
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thank you for this layout example

    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.

  17. #1217
    SitePoint Enthusiast runeer's Avatar
    Join Date
    Nov 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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_tes..._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!!

  18. #1218
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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).

    Code:
     <!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.
    Last edited by Paul O'B; Nov 29, 2006 at 14:33.

  19. #1219
    SitePoint Enthusiast runeer's Avatar
    Join Date
    Nov 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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_tes...div_test3.html

    thanx!!

  20. #1220
    SitePoint Enthusiast runeer's Avatar
    Join Date
    Nov 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi guys,

    last update for today (local time 11.50pm, GMT+8)
    http://www.virtuoso.com.my/hwang_tes...div_test3.html

    - got the footer stay at bottom, thanx to PAUL, YOU ROCK!!!

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

  21. #1221
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    - gotta get the right panel stretch to the bottom, and keep the round left corner at bottom too!
    Add it to this image:

    http://www.virtuoso.com.my/hwang_test/shadows2.gif

    As i said you have to do it all in one go.

    and keep the round left corner at bottom too!
    Look at the code I gave you above as i have already put this in place for you. The round corner is placed in the footer and then dragged out of the footer so it rests at the bottom of the right column. The right column then has some bottom padding added to it so that it protects the absolute element.

    The example I gave you has all this in 100% working order so check the details in the code

    - in IE, the footer looks bigger(height) and the bottom gap is visible...
    This has also been fixed in the example I gave you make sure that there are no padding or margins on all the elements in the footer including the form as they will add to the height.

  22. #1222
    SitePoint Enthusiast runeer's Avatar
    Join Date
    Nov 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul and all,
    i've made the changes to the codes, and it looks good now,
    thanks a lot!!!

    http://www.virtuoso.com.my/hwang_tes...div_test4.html

  23. #1223
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Glad you got there in the end

  24. #1224
    SitePoint Enthusiast runeer's Avatar
    Join Date
    Nov 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello paul,
    please refer back to this link:
    http://www.virtuoso.com.my/hwang_tes...div_test4.html

    i've put in the contents and now the container and footer act
    differently in ie & ff, and both has their problems...

    in ie:
    the footer covered (on top) the bottom part of the contents...

    in ff:
    the footer goes to bottom but the background did not stretch to the end...

    i'm looking around the codes and i don't know where do i modify to fix this problem...

    thank you!
    Last edited by runeer; Dec 3, 2006 at 06:24. Reason: spelling mistake

  25. #1225
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Add my clearfooter back in to the code here.

    Code:
    					<li id="download"><a href="fundoverview.jsp" class="" title="Download Centre"></a></li>
    				</ul>
    			</div>
    		</div>
    		<!-- end right panel -->
    	    <div id="clearfooter"></div>
    	</div>
    	<!-- end all contents -->
    </div>
    <!-- end container -->
    <div id="footer">
    	<!--start footer-->
    Code:
    #clearfooter{
    height:32px;
    clear:both;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •