SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)

    Smile Yet another CSS problem

    I have read through Paul O'Brian's tutorials and they are beyond amazing. I've also tried implementing parts of the css layout from the examples on the same site.

    However, now I'm left with a few problems that I can't seem to figure out.

    My problem is that when you view the page in Firefox, the window has a scroller eventhough the content is not yet implemented. Is there a way I can fix this? See example of my test page here: http://www.currentswillshift.net/cws_new/index.php

    When you view it in IE, the footer is not at the absolute bottom. It is a bit over the bottom. But it should be at the very bottom. See url above in IE if you have IE that is.

    Here is the CSS code used:

    Code:
    html, body {height:100%}
    
    body {
    	margin: 0;
    	padding: 0;
           	font-family: Verdana, Helvetica, Arial, sans-serif;
    	font-size: 11px; 
    	color: #505367;
    	background-color: #F0ECDB;
            text-align:center;
    }
    html>body #container {height:auto;}
    
    #container {
    		margin: 0 auto;
    		width: 800px; 
    		height:100%;
    		min-height:100%;
            	text-align:left;
    		background: #F0ECDB;
    		border-left: 1px solid #a1a1a1;
    		border-right: 1px solid #a1a1a1;
                    position:relative;
    		}
    html>#container {height:auto}		
    #mainheader {
    		position:absolute;
    		left:0;top:0;
    		height: 147px;
    		width:100%;
    		background:url(img/tmpl/header.jpg);
    		border-bottom: 1px solid #e6e6e6;
    		z-index:1;
    }
    #header {
    		height: 147px;
    		width:100%;
    		background: url(img/tmpl/header_bg.jpg);
    		margin: 0px 0px 5px 0px;
    		position:relative;
    		z-index:2;
    }
    
    #sidebar {
    		float: left;
    		width: 185px;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 4px 10px 4px;
    }
    
    #content {
    
    	float: right;
    	width: 580px;
    }
    #content p, #sidebar p, #header p,#footer p  {margin:0 5px 5px 5px}	
    #footer {
    		position:absolute;
    		bottom:0;
    		width:100%;
    		height: 31px;
    		background-color: #96907B;
                    text-align:center;
    }
    .divider1 {
    	width:100%;
    	height:5px;
    	overflow:hidden;
    	background:#fff;
    	position:relative;
    	border-bottom: 1px solid #e6e6e6;
    }
    #clearfooter {height:31px;width:100%;clear:both}
    .blank , .blank2 {
    	position:absolute;
    	width:0px;
    	height:0px;
    	overflow:hidden;
    	border-top: 1px solid #96907B;
    }
    .blank {top:-1px;}
    .blank2 {bottom:-1px;border-top:1px solid #96907B;
    }
    /*
    ul { margin: 0px 0px 0px 20px; }
    li { font-size: 11px; list-style: disc; }
    */
    
    a, a:link, a:visited, a:active {
    	color: #FF3300;
    	text-decoration: none
    }
    a:hover {
    	color: #FF3300;
    	text-decoration: underline;
    }
    
    .articleText { 
    
            text-align: justify;
    	padding: 0 0 0 10px;
    }
    
    .articleCode {
    	font-family: "Courier New", Courier, monospace;
    	font-size: 12px;
    	padding: 0 0 0 10px;
    }
    
    .articleHead, .articleList_tophead, h1, h2 {
    	font-weight: bold;
    	font-size: 21px;
    	font-family: "Arial Narrow", "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
    	text-decoration: none;
    	line-height : 120%;
    	color : #000000;
    	padding: 0 0 0 10px;
    }
    
    .articleSubHead, .articleList_topsubhead, h3, h4 {
    	font-family: Helvetica, Arial, sans-serif;
    	font-size: 17px;
    	font-weight: normal;
    	color: #6D7983;
    	line-height: 110%;
    	margin-bottom: 0px;
    	padding: 0 0 0 10px;
    }
    
    .articleSummary {
    	font-family: Helvetica, Arial, Verdana, sans-serif;
    	font-size: 11px;
    	color: #000000;
    	line-height: 135%;
    	padding: 0 0 0 10px;
    }
    
    .contentHead {
    	font-family: Helvetica, Arial, Verdana, sans-serif;
    	font-size: 15px;
    	font-weight: bold;
    	color: #6D7983;
    	line-height: 110%;
    	padding: 0 0 0 10px;
    }
    
    .contentSubHead {
    	font-family: Helvetica, Arial, Verdana, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	line-height: 110%;
    	padding: 0 0 0 10px;
    }
    
    .tableHead {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	color: #6D7983;
    	line-height: 13px;
    }
    
    .tableSubHead {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000000;
    }
    
    .v09 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 9px; }
    .v10 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; }
    .v11 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; }
    .v12 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; }
    .v13 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 13px; }
    .v14 {  font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 14px; }
    
    
    .formButton	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; background-color: #92A1AF; }
    .formLabel	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; }
    .checkLabel	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold;}
    .radioLabel	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 10px; font-weight: bold;}
    .formTextArea	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px;	}
    .inputText	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}
    .inputPass	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}
    .selectMenu	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}
    .selectList	{ font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: bold;}
    
    /* search */
    .formSearch { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;}
    .search_form {}
    .search_result {}
    
    
    
    .nav_table, .nav_table a, .nav_table a:link, .nav_table a:active, .nav_table a:visited, .nav_table a:hover {
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	font-size: 10px;
    	color: #4A5966;
    	font-weight: normal;
    	text-decoration: none;
    }
    .nav_table a:hover {
    	text-decoration: underline;
    }
    
    .nav_table_active, .nav_table_active a, .nav_table_active a:link, .nav_table_active a:active, .nav_table_active a:visited, .nav_table_active a:hover {
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	font-size: 10px;
    	color: #4A5966;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    .articleList_toptext {
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	font-size: 10px;
    }
    
    .articleList_listhead {
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    }
    
    
    /* CSS for the top level list */
    #list_top_ul {
    	padding: 3px 0;
    	margin-left: 0;
    	border-bottom: 1px solid #5E747F;
    	font: bold 12px Verdana, sans-serif;
    }
    #list_top_ul li {
    	list-style: none;
    	margin: 0;
    	display: inline;
    }
    #list_top_ul li a {
    	padding: 3px 0.5em;
    	margin-left: 3px;
    	border: 1px solid #778;
    	border-bottom: none;
    	background: #D7DEE5;
    	text-decoration: none;
    }
    #list_top_ul li a:link { color: #5E747F; }
    #list_top_ul li a:visited { color: #5E747F; }
    #list_top_ul li a:hover {
    	color: Black;
    	background: #92A1AF;;
    	border-color: #227;
    }
    #list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
    	background: white;
    	border-bottom: 1px solid white;
    }
    
    /* CSS for the currect level list */
    #list_level ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    #list_level li { margin: 0 0 1px 0; }
    #list_level a {
    	display: block;
    	padding: 2px 2px 2px 24px;
    	border: 1px solid #92A1AF;
    	width: 160px;
    	background-color: #B7C2D0;
    }
    #list_level a:link, #list_level_ul a:visited {
    	color: Black;
    	text-decoration: none;
    }
    #list_level a:hover {
    	border: 1px solid #92A1AF;
    	background-color: #FF8C00;
    	color: Black;
    }
    #list_level_parent a:link, #list_level_parent a:visited, #list_level_parent_link a:hover {
    	border: 1px solid #92A1AF;
    	background-color: #FF6600;
    	color: White;
    }
    The HTML I applied is this:

    Code:
    <div id="container"> 
      <div id="header"> 
       <img src="img/tmpl/header.jpg" width="800" height="147">
      </div>
      <div id="sidebar"> 
    <div style="background-image:url(/picture/nav_bg.gif);width:185px;margin:0 0 0 0;padding:0 0 0 0;align:center;">
      <img src="/picture/nav_top.gif" alt="" width="185" height="29" />{NAV_TABLE_COLUMN:107}<img src="/picture/community.gif" width="185" height="29">
        {NAV_TABLE_COLUMN:108}
      <img src="/picture/memo.gif" width="185" height="29">
      {NAV_TABLE_COLUMN:109}
      <img src="/picture/documents.gif" width="185" height="29">
      {NAV_TABLE_COLUMN:110}
      <img src="/picture/misc.gif" width="185" height="29">{NAV_TABLE_COLUMN:111}
      <img src="/picture/nav_bottom.gif" alt="" width="185" height="29" /></div>
      </div>
      <div id="content">{CONTENT}</div>
          <div id="clearfooter"></div>
      <!-- to clear footer --> 
      <div id="footer">
    <div style="background-image:url(img/tmpl/footer_bg.jpg);width:800px;align:center;">
    <a href="news.shtml"><img src="img/tmpl/footer_dt.jpg" alt="daily telegraph" width="84" height="31" border="0"></a>
    <a href="http://www.currentswillshift.net/havenbbs/index.php?"><img src="img/tmpl/footer_haven.jpg" alt="havenbbs" width="87" height="31" border="0"></a>
    <a href="downloads.shtml"><img src="img/tmpl/footer_dl.jpg" alt="downloads" width="84" height="31" border="0"></a>
    <a href="video_guide.shtml"><img src="img/tmpl/footer_vg.jpg" alt="video guide" width="84" height="31" border="0"></a>
    <a href="audio_guide.shtml"><img src="img/tmpl/footer_ag.jpg" alt="audio guide" width="83" height="31" border="0"></a>
    <a href="tourhistory.shtml"><img src="img/tmpl/footer_th.jpg" alt="tour history" width="85" height="31" border="0"></a>
    <a href="contests.shtml"><img src="img/tmpl/footer_contest.jpg" alt="contest" width="83" height="31" border="0"></a>
      <a href="contact.shtml"><img src="img/tmpl/footer_contact.jpg" alt="contact" width="96" height="31" border="0"></a>
          </div>
       </div>
    </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to set the height to 100% exactly in your container. Your online verion is 99.8%!.

    You also need to account gfor the height of the footer correctly.

    Try this:
    Code:
    #container {
      margin: 0 auto;
      width: 800px; 
      height:100%;
      min-height:100%;
    		text-align:left;
      background: #F0ECDB;
      border-left: 1px solid #a1a1a1;
      border-right: 1px solid #a1a1a1;
    				position:relative;
      }
    html>#container {height:auto}  
    #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height: 33px;
      background-color: #96907B;
     text-align:center;
    }
    Be aware that ie has a rounding bug that will be 1px out at the bottom of the screen on each odd pixel as you resize it - but it shouldn't really notice.


    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I didn't try it with your images at the bottom but i just tested it and I think this waould be better for the footer.

    Code:
    #footer {
      position:absolute;
      bottom:0;
      width:100%;
      height: 31px;
      background-color: #96907B;
    	   text-align:center;
      overflow:hidden;
    }
    As you are working in quirks mode (partial doctype) be careful with the broken box model. Anywhere you have specified a width/height and padding and borders as well then remember that ie will be different from other browsers. Other browsers will make the lement bigger whereas ie will keep the width the same but the content area diminshes because the padding and borders are applied inside.

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I've noticed another gap at the side in ie.

    Code:
    #footer {
      position:absolute;
      bottom:0;
      left:0px;
      width:800px;
      height: 31px;
      text-align:center;
      overflow:hidden;
    background:#96907B url(http://www.currentswillshift.net/img/tmpl/footer_bg.jpg) repeat-x left top;
    }
    Paul

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    thanks a ton for your quick response.

    Hmmm ... this is most strange.
    I have done as you suggested, however, the problem still occurs. I still get a approx. 2 pixel gap between the footer and the browser window, both on Firefox and IE.

    Is there any other solution to the code perhaps?

    Thanks again.

    Maleika

  6. #6
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    wooops. Excuse me. I did not see that you had already responded twice. Sorry. Disregard my follow up post please.
    I am going to test your code now.

    Thanks again!

    Maleika

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Wow! That was it!

    Thank you, thank you, thank you!

    You've made me a happy woman today!

    Greetings,

    Maleika


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
  •