|
| |
|
|
BeTheBall
Posts: 6359
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
 |
IE and 100% Height - 5/30/2006 16:39:49
I am struggling with IE when trying to make sure my content div fills 100% of the viewport. I have thrown together this little test page to illustrate the problem. The CSS is all inline solely due to laziness.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="height:100%;color:#FFFFFF;">
<div style="background-color:#999999;height:100%;width:100%;">
<div style="background-color:#666666;float: left;width: 175px;margin: 0px;padding-left: 0px;">
<div style="background-color:#0000FF">test</div>
</div>
<div style="background-color:#333333;height:100%;">test</div>
</div>
</body>
</html>
I get a 3-pixel line between the divs. If I delete the height attribute, the line goes away, but of course my divs no longer fill the viewport. Is it possible to have both, 100% height and no 3 pixel line?
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
|
|
|
Tailslide
Posts: 6036
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: IE and 100% Height - 5/30/2006 17:24:22
What you're seeing is the IE 3px jog bug.
The 3px jog can be solved by floating the right-hand div. You'll probably find it easier to work with %s to ensure you get the flexibility of screen width there.
It's caused by having a non-floating div next to a floated one.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
BeTheBall
Posts: 6359
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: IE and 100% Height - 5/30/2006 18:12:38
Ahhh. Thanks Helena. I thought it was a the box model bug. No wonder the fixes I was trying were not working.
quote:
You'll probably find it easier to work with %s to ensure you get the flexibility of screen width there.
Most of the time I know exactly what I want the left-column to be and I want the right-column to be the rest. How do I deal with that in percentages? For example, in the page I am currently working on, I want the left-column to be exactly 175px and the the right column to be whatever remains.
< Message edited by BeTheBall -- 5/30/2006 18:23:21 >
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
Tailslide
Posts: 6036
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: IE and 100% Height - 5/31/2006 5:20:37
That's no problem. What I'd do (there are several other ways) would be to stick all the contents into a container just to keep everything under control. float your 175px sidebar left. Give your contents a left margin of 175px or whatever but no width. If you don't give it a width it will expand to fill the container div.
I've been fiddling a bit with this and the 100% height issue and have 3 test pages to show a couple of the issues.
1. This page is the basic structure you want with the 175px sidebar but no fullheight divs - Test Page 1
2. This page has the same basic structure but I've fiddled with it a bit to get the container div to be full height - Test Page 2
3. This page has the original basic structure but with Faux Columns stuck onto the body element to achieve the look of 100% height: Test Page 3
The first example is fine but if you need background colours it's not exactly pretty! This would be the technique to go for with one colour backgrounds.
The second example is technically the sort of thing you were after - full height div (the main container div in this case). Same basic structure but with a few different CSS rules including a * hack to get IE to behave. Doing full height divs can be problematical as different browsers deal with it in different ways. This is overall probably a problem stemming from the original standard set down - you really should be able to do this easily and you can't. Also you've got the 3px jog thing back.
The third example is basically exactly the same as the first but with a background image on the body element repeating vertically. This gives the effect of full height divs, works cross-browser even in IE5 (and IE7) and also allows for a little flexibility (doesn't matter if you've got a couple of px difference in different browsers - it will still look fine. The only downside of this is that you need to actually make the graphic yourself - but frankly it usually takes about 3 minutes to do something simple and the benefits outweigh effort.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
BeTheBall
Posts: 6359
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: IE and 100% Height - 5/31/2006 10:37:32
OK, now that I am ready to hang myself, can you post the code for the faux column page? I tried to duplicate it by doing a "View Source" and then copying the code, however, IE apparently changes the code in the view source process because if I save the source to a new file and then view it in IE, the effect changes. Thanks again for you time.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
Tailslide
Posts: 6036
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: IE and 100% Height - 5/31/2006 11:20:31
It would depend on the image.
You could easily have a gradient image fading to the background colour of that div and then repeat it horizontally rather than vertically at the top of the div for instance.
In your example you could have the background image repeating 175px away from the left hand side so it would look like it's on the content div.
There are also some "sliding doors" techniques for liquid layouts - I haven't tried them yet (I don't think) but with liquid layouts becoming more and more popular they are gaining ground.
Here's a gallery specifically for CSS liquid layouts - http://www.cssliquid.com/category/gallery/
Edit: Here's a site I did which has a semi liquid layout and has various background images: http://www.purplewebit.com/index.html (and yes I know the images are cheesy!)
< Message edited by Tailslide -- 5/31/2006 11:27:56 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
