Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Block Level parents w/ precents giving IE 6 trouble? 1

Status
Not open for further replies.
SilverBean

SilverBean

Programmer
May 23, 2001
44
US
This little gem has been kicking my butt for the last couple of days. I'm a little fustrated so making a posting is helping me to vent. This is the older versions of stuff the only thing keeping my sanity is that maybe newer works ok. I'm not sure exactly why but the thought is giving me a little comfort. For the most part I've seen NN 8 work as I would expect. IE 6 is broken. I haven't fired up by Linux box yet to check FF.

I start a block level with a div set the top, left, height, width in pixels. Then start another block level with P specifiying percentages for same. The div tag overflow is set for hidden and I put in enough copy so that I know I'm going to overflow. Both versions of NN and IE indicated above work the same Ok.

The problem? I go back change the div tag top, left, height, and width to percentages do a refresh and IE closes the whole div container. NN still displays something at least. Ran into this with IE my whole page disappeared I took it apart piece by piece relearning years of knowledge overnight. The right answer(I think) is for something to be displayed at least not to just close the whole box. Pixels vs. Percents shouldn't cause that?

My guess is IE 6 has a problem with a block level parent which has percentages as tlhw, when its trying to calculate a child's block level also in percentages. I just simply change div class="contentarea" to div class="contentareapx" to reproduce.

I'm hoping I'm just coming across old bugs here if I was seeing in this in newer versions I'd just totally give up on IE at this point. Any chance I'm missing something simple here? I would consider the time well spent if I learned something at least.

Almost forgot Windows2000, and using position:absolute. Sample code below.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe"><title>CBC Voices Main Login Page</title>
<link rel="stylesheet" type="text/css" href="another.css">
</head>
<body>
<div class="contentarea">
<p class="introcopy2">Welcome to a place where I can write alot of copy and make it cutoff
</p>
</div>
</body></html>


div.contentarea
{
position:absolute;left:30%;top:40%;width:80%;height:80%;
border-color:green;
border:1;
border-style:solid;
overflow:hidden;


}
div.contentareapx
{
position:absolute;left:300px;top:200px;width:190px;height:190px;
border-color:red;
border:1;
border-style:solid;
overflow:hidden:



}

p.introcopy2
{
position:absolute;top:10%;left:45%;height:20%;width:70%;
font:bold small-caps 16px Arial;
color:#996633;
}
 
Sort by date Sort by votes
IE is quite right. Let's take a look. Your contentarea is 80% high. 80% of what? 80% of the watermelon that you haven't finished and sits on your desk? Or 80% of the mouse cursor? Ok, give up, there is no way that browser will ever figure out 80% of what you want it to be, so it will revert to height = auto. That means it will only be as high as the content in it. At the same time you're saying that if there is any more content in this container than its size, it should be not visible. So, none? Also, you do not put any content in it. The only thing in it is an absolutely positioned element and those are taken out of document flow and do not count as content but as something pasted on top of it. So, I, the standards and just about anything would expect your container to be zero sized and your paragraph to not be seen.

So, what to do?

1. Add height to html and body elements so that your div will know how high it is supposed to be. Since html element is the canvas, it needs its height set in order to provide possible calculation for the other elements. Any subsequent element without the specified height will again revert to auto and you won't be able to use percentage on that again. That is why you would need to specify height on all parent elements of your div. height: 100%; would work.

2. Stop using absolute positioning. Absolute positioning is good for what it does, but definitely not good for what you're using it for. There seems to be no need for absolute positioning in your code and it will cause a lot more problems than solutions.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
First of all missing < dropped in copy and paste it's there still same as documented above.

I was psyched to have an answer. As I thought about coming back to this it was fine to realize what the problem was but I asked myself now what do I do? Now I know.

I was able to check FF and it did the same as IE so at least there's a consensus forming. I have alot more belief in FF.

I "hope" you were telling me to do a

body
{
margin:0.25in;
background-color:#ffe8cd;
height:900px;
}

I actually did a
body
{
margin:0.25in;
background-color:#ffe8cd;
height:100%;
}

Which worked fine and solved my problem. I fear that this was interpreted to literally from what you wrote. Can you confirm yay or nay?

I like your explanation of the rendering and thinking of it in terms of that. If I just take a pass through my HTML one line at a time and I ask myself simple maybe that will help.

I don't know if I'm buying(liking) it though. I mean I see successful results first hand, but why does the percentage width work fine? I would think the same line of reasoning would apply. Sorry the world's a tough place -- I'm sure these browsers have a tough time they weren't designed with all these display capabilities and the code must be a mess -- deal with it. Do the same thing for the width and the height for the same reasons (not you my browser). I hate to make NN look good here but they can deal with %, it can't be all that complicated.
 
Upvote 0 Downvote
In my post, I told you that height: 100%; would work. So I see no veering from my recommendations. However, I would suggest adding height: 100%; to the html element as well, since html standards say that html is the canvas where the page is built and not the body.

As for the different behaviour of width and height. I don't know what to tell you, that's just the way it is. In html standards, they decided that most block level elements will have their width set to 100% (table being a notable exception here) and their height to auto (enough to fit the content). This does make sense when you look at it, because there is no need for something to be 100% high if it only has a line of text. And this is how it is defined, so this is how it works. That is the difference that causes everything.

- html is block level and is by default 100% wide and auto high.
- body is block level and is by default 100% wide and auto high.
- your outer div is also a block level element and before you set anything to it, it is 100% wide and auto high.

Now, let's start changing.

- You set width of your div to 60%. That would be 60% of the body, which is 100% of the html, which is 100% of the viewport (the area in the browser where pages are rendered). That makes sense mathematically.
- You set height of your div to 60%. That would be 60% of the body, which is auto of the html, which auto of the viewport. Since no one knows how much is 60% of auto, this calculation fails.
- You set height of your body to 100% then. That would mean your div is 60% of your body, which is 100% of your html, which is auto of your viewport. Still fails.
- You set height of your html to 100%. That finally makes things equivalent to those in width.

However, here's one little catch. Viewport is the current browser window where pages are shown (browser minus all the toolbars, menu bars and status bars). If you have more content on the page than one browser screen, what do you expect it to do? By default (heights are auto), everything will continue growing. By what you set, everything is still the size of the screen and whatever content you have will bleed over the html, body and div. That is an important thing to note, because making element extend farther down then they normally do can cause more problems than benefits. That is why footers at the bottom of the page are often discouraged.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
This is all great information I appreciate your time. I don't mean to put you on the spot with these things but I'm learning. I would've never thought to trace all the way up to the html tag. I don't know why just never dawned on me. If I had taken the time to checkout FF and if width and height did the samething I would've been more inclined to realize there was something I didn't know here.

Hopefully all in good nature too.....until now :)

Now for the absolute positioning part of this conversation. I just thought of a great username you can call me Mr. Absolute. I can tell you that I could show you tons of stuff that will certainly prove this out.

Seriously, I know my example above doesn't show it, but I do have cause for having a content area. I have several elements I want to put inside of it. Actually many several, but lets keep it simple. Some copy, an image or 2 maybe some more copy. Hey isn't this what all this CSS is about? Or should I go back to tables?

I create a div(container) called content area and position it below my top title area on the page. I position the div(container) area on the page using position absolute. So now with this container I place another div container called introstuff position how? Absolutely :) ! For positioning there's not awful lot of choices here static (no - I want to control where the image goes), fixed (interesting effect but not today), relative (why? I'll admit never dealt much with this concept of flow, why? when I can place the image on the page exactly where I want to - or in terms of a percentage of where I want it). I look at worse case smallest browser size I want to support things are a little crowed but ok. Look at largest no major gaps and I'm in business.

A picture of this is as follows:

<div class="contentarea"
<p class="introcopy">
</p>
<img class="introimg"

</img>
</div>

To the best of my knowledge and I'd love to learn something tonight too if I'm wrong, but I have a parent block level called contentarea which contains 2 child block levels introcopy and introimg. If these child classes are positioned absolute that is supposed to be interpreted within the context of any parent element. I concede that your right it probably does take them out of their containers, but it should keep them within the contentarea -- those are the rules?

Oops I forgot I want to add a supplemental menu below my top title area. No problem the beauty of CSS or so I thought I just position the contentarea div a few % lower, and everything looks fine. The elements positioned within contentarea aforementioned introcopy and introimg do not need to be altered they are all layed out nice. I change the contentarea position and everything is great.

Then on my About page I like the way everything looks but I'll do a class aboutcopy and aboutimg because I want to swap their positions to give this page a little dynamic apperance compared to the others, but they'll remain within the content area class because that makes everything on the site consistent.

So is this thinking wrong? Please let me know another way.
 
Upvote 0 Downvote
I think this approach gives you more work at the end of the day. Because if you add that menu, you need to move your container a few pixels lower. Then, when the menu needs to be a bit bigger, you again need to move the container. Your logo grows smaller and you need to manually move the container. And so on. Given the page that would follow document flow, all that would be accomplished without any additional coding.

There is also the degree of client management of your page. If I have trouble reading text in your menu, I will enlarge the font. But what will that get me? Your menu will now be all over your content area and I will have even more trouble reading it. With my approach, the menu will grow and push the content down.

What are you positioning that needs to be so pixel perfect just somewhere? I usually have to put things left, right or in the center. If it is left or right, I can use floats and additionally use margins to make them closer or farther apart from the other elements. If it needs to be centered, I use margin: 0 auto;. In all my work I have never needed any more precise positioning than that.

And for the absolute positioning -- yes, your inner element will be "confined" to your outer element because it is positioned. But confined in a sense that their top left position will be in the top left corner of the parent element. You can still put them outside with negative values.

But what they won't do is affect the parent. If parent has no height specified (height defaults to auto), parent will be zero pixels high, because it has no "normal" children. Absolutely positioned children are not considered normal children. Absolutely positioned elements are like sticky notes you put on a normal text -- they cover the text, but the text has no interactions with the sticky note (it doesn't flow around it) and the page does not get bigger if the sticky note is hanging over it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Thanks, I'm sold on having to specify the height of the parent be it body, mind soul, html, etc.

I here what your saying and will consider it when I get a moment to digest it all. Maybe revisit some flow theory on a cold stormy night this winter.

Probably analness, and my upbringing gives me an insatiable need to want to know where my elements are going to wind up. Not down to the pixel. +/- 20 is fine :)

I remember my web design class and my instuctor telling me to make sure to have visual elements( images, copy, etc.) in designated areas of the page nice and neat, properly segregated with attractive borders or colors. Back in the day when all we had was tables, and steam-powered PCs ;)
 
Upvote 0 Downvote
I can place all my elements within 5px of where I want them without any absolute positioning. That goes for standard designs that you see mostly around the net. If there is a difficult design that requires awkward positioning (think some special portfolio websites where the whole website looks like a messy desk, plate of spaghetti or a dirty toilet bowl) I would use absolute positioning when absolutely needed.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
411
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
431
PeDa
PeDa
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
410
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
326
PeDa
PeDa
Lets Code
  • Locked
  • Question
Inline element into a block level element
Replies
1
Views
193
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top