Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts

    When using percentages...

    In IE, what is it a % OF?


    Example:

    Code:
    #borderright {
        background-image:url(images/border-right.jpg);
        background-repeat:repeat-y;
        width:40px;
        height:95%;
        position:absolute;
        right:0px;
        top:159px;
        overflow:visible;
        z-index:2;
    }
    What is it making it 95% of? I thought it was 95% of the browser window, but at the moment, that's not displaying at all...


    If you need more info, (screenshots, more code, whatever) let me know, but I'm just curious as to why this isn't working as expected.

  • #2
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    height by default tends to be NULL so you have to set it, try adding something like this to your CSS:

    Code:
    html
    {
       height:100%
    }
    
    body
    {
       height:100%
    }

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Absolutely positioned element considers the dimensions of a relatively positioned parent element when we use %d. Consider giving position:relative; to its parent element.
    If you give your complete code, then we may able to explain more.
    Last edited by abduraooft; 02-14-2008 at 03:51 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    You asked for it.

    CSS:

    Code:
    /* CSS Document */
    
    * {
        padding:0px;
        margin:0px;
        height:100%;
    }
    
    body {
        background-color:#000000;
        font-family:"Trebuchet MS";
        font-size:14px;
        color:#FFFFFF;
        height:100%;
    }
    
    img {
        border:none;
        height:auto;
    }
    
    ul, br, li, h1, h2, h3, h4, hr {
        height:auto;
    }
    
    #banner {
        height:auto;
        position:relative;
        left:12%;
        top:0px;
        z-index:2;
    }
    
    #contentwrapper {
        background-color:#000000;
        position:relative;
        top:auto;
        left:20%;
        width:756px;
        height:auto;
        z-index:1;
    }
    
    #textarea {
        background-color:#000000;
        position:relative;
        margin-left:7%;
        top:20px;
        width:656px;
        min-height:100%;
        max-height:none;
        overflow:visible;
        z-index:4;
    }
    
    #textarea ul {
        padding-left:35px;
    }
    
    #borderleft {
        background-image:url(images/border-left.jpg);
        background-repeat:repeat-y;
        width:40px;
        height:95%;
        position:absolute;
        left:0px;
        top:159px;
        overflow:visible;
        z-index:2;
    }
    
    #borderright {
        background-image:url(images/border-right.jpg);
        background-repeat:repeat-y;
        width:40px;
        height:95%;
        position:absolute;
        right:0px;
        top:159px;
        overflow:visible;
        z-index:2;
    }
    
    /* Begin Navigation */
    
    #navwrapper {
        background-color:#000000;
        position:relative;
        top:auto;
        left:0px;
        width:756px;
        height:50px;
        z-index:2;
    }
    
    #nav_leftcorner {
        background-color:#000000;
        position:absolute;
        top:auto;
        left:0px;
        width:100px;
        height:40px;
    }
    
    #nav_rightcorner {
        background-color:#000000;
        position:absolute;
        top:auto;
        right:0px;
        width:100px;
        height:40px;
    }
        
    
    #btn_home {
        background-image:url(images/btn_home.jpg);
        background-repeat:no-repeat;
        width:60px;
        height:42px;
        position:absolute;
        top:0px;
        left:100px;
        z-index:3;
    }
    
    #btn_home:hover {
        background-image:url(images/btn_home_hover.jpg);
        background-repeat:no-repeat;
        width:60px;
        height:42px;
        position:absolute;
        top:0px;
        left:100px;
        z-index:4;
    }
    
    #btn_about {
        background-image:url(images/btn_about.jpg);
        background-repeat:no-repeat;
        width:92px;
        height:42px;
        position:absolute;
        top:0px;
        left:160px;
        z-index:3;
    }
    
    #btn_about:hover {
        background-image:url(images/btn_about_hover.jpg);
        background-repeat:no-repeat;
        width:92px;
        height:42px;
        position:absolute;
        top:0px;
        left:160px;
        z-index:4;
    }
    
    #btn_sponsors {
        background-image:url(images/btn_sponsors.jpg);
        background-repeat:no-repeat;
        width:90px;
        height:42px;
        position:absolute;
        top:0px;
        left:252px;
        z-index:3;
    }
    
    #btn_sponsors:hover {
        background-image:url(images/btn_sponsors_hover.jpg);
        background-repeat:no-repeat;
        width:90px;
        height:42px;
        position:absolute;
        top:0px;
        left:252px;
        z-index:4;
    }
    
    #btn_progress {
        background-image:url(images/btn_progress.jpg);
        background-repeat:no-repeat;
        width:87px;
        height:42px;
        position:absolute;
        top:0px;
        left:342px;
        z-index:3;
    }
    
    #btn_progress:hover {
        background-image:url(images/btn_progress_hover.jpg);
        background-repeat:no-repeat;
        width:87px;
        height:42px;
        position:absolute;
        top:0px;
        left:342px;
        z-index:4;
    }
    
    #btn_first {
        background-image:url(images/btn_first.jpg);
        background-repeat:no-repeat;
        width:138px;
        height:42px;
        position:absolute;
        top:0px;
        left:429px;
        z-index:3;
    }
    
    #btn_first:hover {
        background-image:url(images/btn_first_hover.jpg);
        background-repeat:no-repeat;
        width:138px;
        height:42px;
        position:absolute;
        top:0px;
        left:429px;
        z-index:4;
    }
    
    #btn_contact {
        background-image:url(images/btn_contact.jpg);
        background-repeat:no-repeat;
        width:89px;
        height:42px;
        position:absolute;
        top:0px;
        left:567px;
        z-index:3;
    }
    
    #btn_contact:hover {
        background-image:url(images/btn_contact_hover.jpg);
        background-repeat:no-repeat;
        width:89px;
        height:42px;
        position:absolute;
        top:0px;
        left:567px;
        z-index:4;
    }
    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Team 8 Bit - About Us</title>
        <link href="styles.css" rel="stylesheet" media="screen" type="text/css" />
        <!--[if lte IE 6]>
            <link href="styles_ie.css" rel="stylesheet" media="screen" type="text/css" />
        <![endif]-->
    </head>
    
    <body>
    
    <div id="contentwrapper">
        <div id="banner"><img src="images/Banner.jpg" width="556" height="120" alt="Team 8 Bit Banner Image" /></div>
    
        <br />
    
        <div id="navwrapper">
            <img id="nav_leftcorner" src="images/border-left-corner.jpg" alt="Left Navigation Corner Image" width="100" height="40" />
            <a href="index.html" id="btn_home"></a>
            <a href="about.html" id="btn_about"></a>
            <a href="sponsors.html" id="btn_sponsors"></a>
            <a href="progress.html" id="btn_progress"></a>
            <a href="first.html" id="btn_first"></a>
            <a href="contact.html" id="btn_contact"></a>
            <img id="nav_rightcorner" src="images/border-right-corner.jpg" alt="Right Navigation Corner Image" width="100" height="40" />
        </div>
    
        <div id="textarea">
            <h2>About Us</h2>
                <hr />
                <br />
            Our main purpose is to provide students the opportunity to get practical experience with robotics and engineering by providing resources that would otherwise not be obtainable by most students.  The community clearly benefits by graduating people with a higher level of technical expertise.  The Robotics Team is a student organization dedicated to building and promoting the usage of robotics.  We believe robotics will soon become the next great revolution of our time, allowing people more freedoms and luxeries than ever before thought possible.  In order to assist the sponsors of the event and to reap the benefits of being an established team, EVIT has teamed up with Chinle High School/Navajo Nation and may add students from the Tri Cities/Camp Verde area.  This action can be completed by weekend assists and video teleconferencing.
                <br />
                <br />
            <h2>Who can join us</h2>
                <hr />
                <br />
            Our members are a diverse group of all experience levels.  Anyone is welcome to attend the team meetings.  We are interested in electronics, mechanics, programming, and the sciences in general.
                <br />
                <br />
            <h4>There are 2 kinds of members, <em>active</em> and <em>inactive</em>.</h4>
                <ul>
                    <li><em>Active</em> members must dedicate more time to be eligible to participate in projects and to run for office.</li>
                    <li><em>Inactive</em> members are everyone else. So, if you want to learn a little bit about robotics, but don't want to pay a fee or spend a large portion of time, you are always welcome to come to the team meetings.  However, those who spend little or no time involved in the program will not be able to participate in projects regarding team travel or run for office.</li>
                </ul>
                <br />
                All members, active and inactive, are on the membership list and can recieve e-mails to keep posted of any of our events.
                <br />
                <br />
                Drop by and help us make some robots sometime!
        </div>
    
        <div id="borderleft"></div>
        <div id="borderright"></div>
        
    </div>
    
    
    </body>
    </html>

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Quote Originally Posted by Aceramic View Post
    What is it making it 95% of? I thought it was 95% of the browser window, but at the moment, that's not displaying at all...
    Percent values are always relative to the parent element. If no size is set then it’s not doing anything. If everything is supposed to be based on percent then you need to initiate it by setting the html and body elements to a percent value and follow from there.

  • Users who have thanked VIPStephan for this post:

    oesxyl (02-14-2008)

  • #6
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Internet Exploder

    Firefox


    Notice the borders? I'm sure I just screwed up something simple, but I sure can't figure it out. (Oh, and sorry for the massive screenshots... I suppose I could've made them smaller...)

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    PMJI, but you gave me some help elsewhere on hiding/revealing text. It works great!

  • #8
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by jerry62704 View Post
    PMJI, but you gave me some help elsewhere on hiding/revealing text. It works great!

    ..... Wha?

  • #9
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Sorry. I thought I was responding to Andrew Johnson.

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I now start my css with=

    Code:
    <style type="text/css">
    *{padding:0;
    margin:0;}
    
    html, body {
    height:100&#37;;
    }
    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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