...

View Full Version : 100% Hieght in non-ie6



latemodern
12-06-2006, 09:18 AM
Hi,

I am trying to have a border on the left and another on the right that run from top to bottom of the browser window regardless of its size. I have achieved this in ie6 by repeating (y) a 1 pixel high image down the left side of the body:

body{
background-image: url(../images/body_bg.jpg);
background-repeat: repeat-y;
background-position: left;
}

and then setting a container div to height:100% and width: 100% and repeating another 1 pixel high image down the right hand side:

#container{
background-image: url(../images/container_bg.jpg);
background-repeat: repeat-y;
background-position: right;
width:100%;
height:100%;
}

FF seems to ignore the height rule and only stretches when I put content into the div.

Any ideas how I can get it to stretch all the way in FF?

Thanks

ahallicks
12-06-2006, 11:46 AM
Do you have a link and have you set margins and padding in the parent elements to a height and width of 100% as well?

latemodern
12-06-2006, 01:17 PM
Thanks for your reply

The link is: http://hapuk.coreware.co.uk/test/priddle/index.htm

Here is the entire CSS so far:

*{
border:0;
margin:0;
padding:0;
}

body, html{
height:100%;
}

body{
background-image: url(../images/body_bg.jpg);
background-repeat: repeat-y;
background-position: left;
background-color:#fafafa;
}

#container{
background-image: url(../images/container_bg.jpg);
background-repeat: repeat-y;
background-position: right;
width:100%;
height:100%;
}

ahallicks
12-06-2006, 02:03 PM
Why do you have two body tags? Take the body out of the first bit and put height: 100% in the ONLY body!

latemodern
12-06-2006, 03:32 PM
Ok done.

Thanks

Still got the problem though.

What now?

_Aerospace_Eng_
12-06-2006, 04:52 PM
<!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>
<base href="http://hapuk.coreware.co.uk/test/priddle/css/" />
<style type="text/css" media="screen">
/* CSS Document */
*{
border:0;
margin:0;
padding:0;
}
html{
height:100%;
font:90%/1.4 "Trebuchet MS", Arial, Helvetica, Verdana, Sans-Serif;
}
body {
background:#FAFAFA url(../images/body_bg.jpg) repeat-y;
height:100%;
}
#container {
min-height:100%;
background:url(../images/container_bg.jpg) repeat-y top right;
min-width:775px;
}
#logo {
background:url(../images/logo.jpg) no-repeat;
margin-left:34px;
float:left;
width:222px;
height:103px;
text-indent:-1000px;
display:inline;
}
#nav {
margin: 0 30px 0 250px;
background:url(../images/nav_bg.jpg) repeat-x;
height:113px;
}
#nav ul {
background:url(../images/nav_ul.jpg) no-repeat top right;
height:83px;
padding-top:10px;
padding-bottom:17px;
list-style:none;
}
#nav li {
font-weight:bold;
text-align:center;
display:block;
float:left;
height:50px;
width:100px;
padding-top:30px;
border-right:2px solid #334F63;
}
#nav li a{
text-decoration:none;
color:#FFF;
line-height:0.8em;
font-size:1.2em;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height:100%;
}
#logo {
margin-right:-3px;
}
#nav {
margin-left:0;
height:1%;
}
</style>
<![endif]-->
</head>

<body>
<div id="container">
<div id="logo">Palace Chambers</div>
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Properties</a></li>
<li><a href="index.php">About Us</a></li>
<li><a href="index.php">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>

latemodern
12-06-2006, 05:10 PM
Thanks Aerospace Eng

What did you do?

Cheers

_Aerospace_Eng_
12-06-2006, 09:04 PM
You tell me. Compare it to your original code and see the differences.

ahallicks
12-07-2006, 09:06 AM
For someone who constantly berates other users for not posting EXACTLY as they should, you haven't done yourself any favours Aerospace. What if somebody doesn't understand the code or how it works. Simply looking at the changes doesn't explain WHY something has worked, does it now??

Little bit of a description isn't too much to ask :-)

_Aerospace_Eng_
12-07-2006, 09:09 AM
Its also not hard for the OP to compare the code I posted with what they originally had. They likely copy and pasted. If they did infact compare it then they would have seen one little line. min-height. If you were so inclined to an explanation then maybe you could have explained it rather than say what I should or shouldn't do. I think now though is the time to just move on.

ahallicks
12-07-2006, 09:11 AM
Yes sir :-(

latemodern
12-07-2006, 12:43 PM
Yeah. That's great thanks. But I can't tell what you did?

_Aerospace_Eng_
12-07-2006, 01:50 PM
I used min-height where as you used just height. That is what I said in my last post as well.

latemodern
12-08-2006, 08:59 AM
Hi Guys,

Didn't mean to start a fight! The reason I was having difficulty seeing the difference is because I had made several changes to my original css file by the time the reply was posted.

Anyway, I have another problem (if you're not sick of looking at this one). This time in ie6 when I make the screen smaller than about 780px wide the blue links bar breaks away from the red logo bit and sits beneath it.

Check it out: http://hapuk.coreware.co.uk/test/priddle/index.htm

The CSS is here: http://hapuk.coreware.co.uk/test/priddle/css/main.css

By the way, how do you post CSS into a special window (like aerospace engineer did)?

Thanks

Chris

_Aerospace_Eng_
12-08-2006, 05:35 PM
IE6 doesn't support min-width. I prefer to use JS to fake it. The way I see it is if the user is using IE then they likely don't know how to disable javascript or they wouldn't be using IE in the first place. Add this after your default stylesheet in your html

<!--[if lte IE 6]>
<style type="text/css">
body {
width:expression( documentElement.clientWidth < 750 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 750 ? "750px" : "auto") : "750px") : "auto" );
}
</style>
<![endif]-->

To post code in code tags read this page

http://www.codingforums.com/misc.php?do=bbcode



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum