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!

Another absolute problem?

Status
Not open for further replies.
SilverBean

SilverBean

Programmer
May 23, 2001
44
US
I came across this I've been doing some experimenting trying to stay away from the absolute positioning that I've grown so accustomed too.
I checked out a 3 column CSS style lay out and it seemed to be what I wanted. I cut and pasted from an old CSS file to keep the names I already had setup. By mistake 1 div was still positioned absolute. But it was strange that it wouldn't show at all. Hence my posting.

If you check out the code below in IE you will see 2 lines of "Traditional Web header, Logo..." with a green container(contentabsolute2) below them.

What you will not see is a blue container (contentabsolute). However you will see blue in NN8.1.2, and FF 1.5.0.7.

IE seems to have a problem with webheaderbad, followed by an absolute position div. If I remove the width 100% or float from webheaderbad the blue container will be displayed. However if both float, width AND width=100%. IE doesn't show blue.

Is this another absolute problem? BTW: Checked it out with W3Validator and got the strict ok both HTML and CSS so any obvious things are cut and paste errors

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>Test</title>
<style type="text/css">
body {height:100%; border-style:solid; border-color:green;border-width:0px;}
.webheaderbad { float:left; width:100%;border-style:solid; border-color:yellow; border-width:0px; margin-top:0px; margin-left:0px}
.webheadergood{ width:100%;border-style:solid; border-color:yellow; border-width:0px; margin-top:0px; margin-left:0px}

.contentabsolute { position:absolute; top:35%; left:0%; width:10%; border-style:solid; border-color:blue; border-width:5px; margin-left:0%; overflow:visible}
.contentabsolute2 { position:absolute; top:30%; left:0%; width:25%; border-style:solid; border-color:green; border-width:5px; margin-left:0%; overflow:visible}
</style>

</head>
<body>
<div class="webheaderbad">
<p>Traditional Web header, Logo Site, navigation, etc. all very nice.</p>
</div>
<div class="contentabsolute">
<p> element absolutely positioned</p>
</div>
<div class="webheadergood">
<p>Traditional Web header, Logo Site, navigation, etc. all very nice.</p>
</div>
<div class="contentabsolute2">
<p> element absolutely positioned</p>
</div>
</body>
</html>
 
Sort by date Sort by votes
It is possible, although not very logical (but when was IE6 logical) that because of the float, the absolutely positioned div is floated next to the headerbad. Since headerbad is 100% wide, absolutely positioned item is outside the visible area. And because it is absolutely positioned, no scrollbar appears. One way or another, this is a very poor design.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
On second thought it does appear to be something funny in IE. I'm lucky I found this at this R&D stage rather than be in the middle of something and run into this. I think I put an honest effort into kicking the absolute habbit, but its just not going to work. I'm signing up for an XHTML/ CSS class in a few weeks so I should be able to have a good heart to heart on this with the instructor then. I have made some really interesting observations in the absolute area and I'll share at that time as an FYI.

I will say this though that mixing and matching absolute and non-absolute is dangerous you ought to be all in or not - no dipping your toe in to test the water. Your not going to wip out some absolute at 2, 3 in the morning to make one small area of your site work or appear the way you want it to.

The thing that really bent the 99th hair on my butt was that as I was refreshing my memory on some align stuff and playing around saying," gee this isn't so bad" - when I read the infamous disclaimer at the bottom of the page about getting erratic results using align under IE 5.5. Albeit a dated book, but it looks like IE still can't get it right.

Oh yeah, current issue. Well I went back to this "reputable" source of CSS layouts and as I was poking around double checking I found an absolute positon design so it was just meant to be.

Anyway. On Windows 2000, 1064x768 screen size, IE 6, Open this html in your browser not max sized, but sizable and almost max. Reduce by dragging the lower right hand corner horizontally and at about 3/4 screen width the word "Right" will duck under "Left" for a moment. Continue reducing and it goes back to where it started at (i.e. as you opened it originally left, center right all lined up). I believe their is another wierd spot around 3/8 to 5/8 screen size if you continue reducing. If you use some big images it might be easier to find these wierd spots. Also to be fair it only happens when the widths all add up to 100. As posted previously the case was 2 column case which all =100, here its is 3.

I've spent more time waffling over this then if I had just used absolute to begin with. As a choice of finding this little gem at 2,3 in the morning or having a client calling me about this I would choose absolute. Luckily I was still on the drawing board with this. PS; Didn't run it through W3 again, I'm sure everybody gets the point by now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>Test</title>
<style type="text/css">
.left { width:33%; float:left; }
.center { width:34%; float:left; }
.right { width:33%; float:left; }
</style>

</head>
<body>
<div class="left">
<p>Left</p>
</div>
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
359
PeDa
PeDa
Everton1Blue
  • Locked
  • Question
Google reCaptcha problem
Replies
4
Views
131
Everton1Blue
Everton1Blue
audiopro
  • Locked
  • Question
Problem with .htaccess
Replies
6
Views
105
ChrisHirst
ChrisHirst
PeDa
  • Locked
  • Question
HTML5 character encoding problem 1
Replies
2
Views
117
PeDa
PeDa
ThomasJSmart
  • Locked
  • Question
absolute parent, children that expand width of parent up to max.
Replies
12
Views
885
ThomasJSmart
ThomasJSmart

Part and Inventory Search

Sponsor

Back
Top