SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Malaysia
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Another newbie question from a newbie

    Dear all,

    I seem to have a problem with the following code and perhaps someone would be kind enough to help me.

    HTML Code:
    .mystyle {
    	font-family: "Times New Roman", Times, serif;
    	font-size: x-small;
    	background-color: #000000;
    	position: absolute;
    	width: 20%;
    	height: 100%;
    	
    	color: #66CCFF;
    	padding: 190px 5px 10px;
    	z-index: 5;
    	float:left;
    }
    The problem is that this layer doesn't extend to the very end of the document.
    Is there a way to do this?

    Thank you all for your help.

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What height?

    Without seeing the source code this style rule is applied to it's impossible to give a conclusive answer (in other words: code, please!), but you have to ask yourself this:
    Code:
     height: 100%;
    100 percent of what? A percentage always refers to some other measurement, in this case the -- calculated -- height of the containing block.
    Regards,
    Ronald.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    The problem is that this layer doesn't extend to the very end of the document.
    Is there a way to do this?
    Not for all browsers but most modern browsers will be ok with this.

    Code:
    <style type="text/css">
    html,body {height:100%}
    .mystyle {
    font-family: "Times New Roman", Times, serif;
    font-size: x-small;
    background-color: #000000;
    width: 20%;
    height: 100%;
    min-height:100%;
    color: #66CCFF;
    padding: 0px 5px 0px;
    z-index: 5;
    float:left;
    }
    html>body .mystyle {height:auto}
    </style>
    You need to set the parent of the element to have a height so the element has something to base its 100% on. In this case the parent is the body so you need to set the body to 100% also.

    Be aware that you cannot then add padding to this 100% otherwise that will make it bigger than 100% and probably not what you want. If you want padding inside that element then you will need to nest another element inside.

    The height auto is for mozilla so that the element will extend with the content.

    Also the element can't be both absolutely placed and floated at the same time. It's either one or the other so make your mind up as you will not only confuse yourself but possibly the browser as well .

    Paul

  4. #4
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Malaysia
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help Paul, but I am still having problems.

    I tried your code and it doesn't work (I am using IE6).

    I also tried setting the body of the html to 100% but it doesn't help.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I tried your code and it doesn't work (I am using IE6).
    Well you must be doing something wrong then as the code does work OK
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body {height:100%}
    .mystyle {
    font-family: "Times New Roman", Times, serif;
    font-size: x-small;
    background-color: #000000;
    width: 20%;
    height: 100%;
    min-height:100%;
    color: #66CCFF;
    padding: 0px 5px 0px;
    z-index: 5;
    float:left;
    }
    html>body .mystyle {height:auto}
    
    </style>
    </head>
    <body>
    <div class="mystyle">Text</div>
    </body>
    </html>
    Post the whole code you are using (including html) and then we can see what's going wrong

    Paul
    Last edited by Paul O'B; Apr 18, 2004 at 01:09.

  6. #6
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    As a general rule, always Mac Hack the height:100% in html style, else it goes horribly wrong in MAC IE5 (it adds the screen width to the height!):

    /* \*/html {height:100%}/* */
    body {height:100%}

    is OK though.




    Trevor

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes thanks for reminding me Trevor

    I always forget about macs (not having one).

    I'm going to buy a secondhand one for testing as there is a gap in my knowledge there

    Paul

  8. #8
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Malaysia
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am pretty sure that my code is exactly the same as yours.

    The problem is that the layer doesn't extend itself to the end of the document, it only extends to the end of the screen...

    Here is the code anyway:

    HTML Code:
    <?php
    include 'functions.php';
    ?>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Home--Senior Two Science 3 2003 Foon Yew High School </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    <style type="text/css">
    html,body {height:100%}
    
    
    .mystyle {
    font-family: "Times New Roman", Times, serif;
    font-size: x-small;
    background-color: #000000;
    width: 20%;
    height: 100%;
    min-height:100%;
    color: #66CCFF;
    padding: 0px 5px 0px;
    z-index: 5;
    float:left;
    }
    </style>
    
    
    <link href="class.css" rel="stylesheet" type="text/css">
    </head>
    
    <body text="#000066">
    <div class="flash">
    <script menumaker src="../NavBar/nav.js"></script><br>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="570" height="150">
          <param name="movie" value="../Images/Untitled-4.swf">
          <param name="quality" value="high">
          <embed src="../Images/Untitled-4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="570" height="150"></embed></object>
    
    </div>
    
    [COLOR=DarkOrange]<div id="Layer1" class="mystyle"> [/COLOR]   <!-- SiteSearch Google -->
      <FORM method=GET action="http://www.google.com/search">
        <TABLE>
          <tr> 
            <td><span class="smallheader">Search Science3.net:</span></td>
          </tr>
          <tr> 
            <td> <INPUT TYPE=text name=q size=10 maxlength=255 value=""> <input type=submit name=btnG value="Search" target="_blank"> 
              <input type=hidden name=domains value="science3.net"> <input type=hidden name=sitesearch value="science3.net"> 
              <br> </td>
          </tr>
        </TABLE>
      </FORM>
      <!-- SiteSearch Google -->
      <p><span class="smallheader">Did You Know?</span><br>
        <?php include 'didyouknow.php';?>
      </p>
    </div>
    
    
    
    
    
    <div id="Layer2" class="content">
      <table width="100%" border="0">
        <tr>
          <td colspan="2"><p>Good Afternoon and Welcome to Science3.net. I surely
              hope that you will find your stay a pleasant one. Thanks.</p>
            <p>&nbsp;</p></td>
        </tr>
        <tr>
          <td width="50%" valign="top"><span class="header">
            <p>Site News</p>
            </span>
    		        <?php
    include 'reminder.php';
    ?>
          </td>
        </tr>
      </table>
      <?php include 'footer.php'; ?>
    </div>
    </p>
    
    
    <div class="poll">
      <p><span class="header">Registered Users</span></p>
      <p> 
        <?php include 'loginform.php' ?>
      </p>
      <p> <span class="header">Birthdays</span></p>
      <?php include 'birthday.php'?>
    </div>
    <?php /*<div id="Layer5" class="footer"> 
      <p align="center"><a href="../board/index.php">Forums</a> | <a href="../4images/index.php">Albums</a> 
        | <a href="activities.php">Activities</a> | <a href="email.php">E-mail</a> 
        | <a href="halloffame.php">Hall of Fame</a> | <a href="misc.php">Misc. </a><br>
        <a href="copyright.php">Copyright Notice</a> | <a href="contact.php">Contact 
        Us </a> | <a href="about.php">About Us</a></p>
      <p align="center">Site Best Viewed With 800x600 Screen Resolution and Newest 
        Version of Microsoft Internet Explorer.</p>
    </div>*/?>
    </body>
    </html>
    Thanks for helping out.

  9. #9
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    hi,

    the reason your page is longer then 100% is beacause you have content following the 100% left black column.

    i dont know if this is the best solution but it helped with ie:

    add this to your css:
    Code:
    #layer2 {float: right;}

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

    I'm not quite sure what you are trying to achieve with your layout but you won't be able to make an element stretch the length of the document unless the content of that document is contained within the 100% element.

    You can really only use one 100% high element as subsequent nestings don't work in all browsers.

    Also you can't start a 100% high element half way down the screen because it will the be 100% long from where it starts.

    I think you may be trying to make a 100% high nav column on the left and your easiest bet is to repeat a bg gif down the left side of the body to simulate your column.

    Otherwise take a look at my 3 col layout (the sticky thread at the top of the main threads) to see if this is anything like what you want. There are a ntmber of techniques there that show 100% height eyc and may be useful to you.

    It's hard to tell from your code above what you are trying to do as all the stylesheets and includes are obviously not present. If you have a link to the page it might be easier for us to work with.

    My original code does work in the context that I gave it and will be 100% high unless the content in the element is greater when it will stretch to accomodate. Obviously this element will not stretch to the length of other elements unless they to are inside this element.

    Hope that makes some sense to you

    Paul

  11. #11
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Malaysia
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul, you have been most helpful.

    I am having exams now and can only review after a week, but I will do so.

    Once again, thanks to those who have helped.


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
  •