...

View Full Version : When using percentages...



Aceramic
02-14-2008, 04:43 PM
In IE, what is it a % OF?


Example:


#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.

Andrew Johnson
02-14-2008, 04:48 PM
height by default tends to be NULL so you have to set it, try adding something like this to your CSS:



html
{
height:100%
}

body
{
height:100%
}

abduraooft
02-14-2008, 04:49 PM
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.

Aceramic
02-14-2008, 05:01 PM
You asked for it. :)

CSS:


/* 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:


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

VIPStephan
02-14-2008, 06:09 PM
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.

Aceramic
02-14-2008, 06:25 PM
Internet Exploder (http://www.freewebs.com/tkgg/data/IE.gif)

Firefox (http://www.freewebs.com/tkgg/data/FF.gif)


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

jerry62704
02-14-2008, 06:38 PM
PMJI, but you gave me some help elsewhere on hiding/revealing text. It works great!

Aceramic
02-15-2008, 04:38 PM
PMJI, but you gave me some help elsewhere on hiding/revealing text. It works great!


..... Wha?

jerry62704
02-15-2008, 06:41 PM
Sorry. I thought I was responding to Andrew Johnson.

effpeetee
02-16-2008, 12:37 PM
I now start my css with=


<style type="text/css">
*{padding:0;
margin:0;}

html, body {
height:100&#37;;
}


Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum