Forum Moderators: not2easy
position:relativeMy issue is that the formerly disappearing div is next to a floated image which overlaps it. The fix works just fine in IE6, but in Opera the text in the div now overlaps the image instead of flowing around it.
So it seems that I can get it to look fine in IE6 and not so good in Opera, or I can have it look fine in Opera and disappear in IE6.
Is there a way to to have it actually show up in IE6 AND flow in Opera?
if that's not it can you post the relevant bits of CSS and HTML, and is it Opera 7 or 6?
Suzy
I was glas to see your response. I know from the searching that I did that you've struggled with this as well.
The two elements--the floated image and the disappearing div--are in separate containers.
Here's a whittled down version of the page with (hopefully) just the pertinent elements, and nothing of importance left out. It still displays the behavior in IE6 and Opera I mentioned in my initial post.
Note that in IE6 the bottom border on the H2 header extends into the image, while the text itself flows aroung the image. When I add a
position:relativeThe example code is small enough apparently that the main div doesn't disappear since there's no scrolling involved.
Here's the relevant 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" xml:lang="en" lang="en">
<head>
<title>IE6 vs. Opera float</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="header">
<img style="float:left; padding:0 10px 10px 0;" src="example.jpg" height="220px" width="220px" alt="This is a floating image" title="This is a floating image" />
<h1>An H1 header here</h1>
</div> <!-- header -->
<div id="content">
<div id="main">
<h2>H2 header here</h2>
<p>Blah blah blah fourscore and seven years ago.... We the people in order to every good man should come to the aid of his country. Your mother was a hamster and father smelt of elderberry..</p>
<p>This will be replaced with the line tag in CSS2.<br /><a href="#">Link goes here</a></p>
</div> <!-- main -->
</div> <!-- content -->
<div id="bonus">
Bonus info area
</div> <!-- bonus -->
<div id="nav">
Navigation
</div> <!-- nav -->
<div id="footer">
</div> <!-- footer -->
</body>
</html>
And the CSS:
body
{position:relative;
margin:0;
padding:0;
}
img {border:3px solid blue;}
#header
{margin:0;
padding:0;
}
#nav
{position:absolute;
left:0;
top:140px;
width:15%;
border:3px solid red;
}
#bonus
{position:absolute;
top:100px;
right:15px;
width:20%;
padding-top:10px;
border:3px solid red;
}
#content
{margin:0 24% 0 17%;
padding:10px;
border:5px solid green;
}
#main
{position:relative;
padding:5px;
margin:0 0 5px;
}
#main h2
{margin-bottom:4px;
border-bottom:2px solid black;
}
Thanks for your help.
This was a question and half.. I hate reading specs ;)
Note that in IE6 the bottom border on the H2 header extends into the image, while the text itself flows aroung the image. When I add a position:relative to the H2 tag, the border "flows" around the image as well.
Well as usual IE is incorrect. There is nothing that I have read that will make the bottom border flow as well as the text.
It is correct behaviour (according to the CSS2 specs) for non-positioned block box (which in this case the h2 is) to flow vertically as if the float weren't there.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.from: here [w3.org]
So then you ask why is the text floating? (Well I did!) it's floating because it's in a "line box"
The line box is created because the text within the <h2> generates an anonymous inline box [burks.brighton.ac.uk].
However, line boxes created next to the float are shortened to make room for the floated box.from the same spec
so the text in the anonymous inline box is floating but the h2 element (block box) is not.. and because of this the background color and borders, which are attached to the block box, are still there but are hidden behind the floated element:
When a block box overlaps, the background and borders of the block box are rendered behind the float and are only be visible where the box is transparent. The content of the block box is rendered in front of the float.
Summary of all this is that I don't think there is any way to stop the "underline" bottom border from "extending into the graphic"
as an aside I did find that to create an underline:
<hr style="display: inline;" />
works in IE and NN, but not OPera.
as soon as you add position: relative;, which as you say works in IE, then in this case you are positioning the <h2> relatively relative to it's parent element, in this case <div id="main"> so it displays in the top left corner of the "main" div, on top of the float (correctly) as float behaviour only applies to non-positioned elements.
So here's the CSS I came up with that seems to work in IE, Opera and NN (btw NN exhibits the same, correct, behaviour as Opera). I couldn't recreate the disappearing div syndrome in IE, so you'll have to let me know if this brings back that "bug". (I added background colors so you can see the behaviour of block boxes as opposed to line boxes.)
CSS:
body{
/* position: relative; */
margin:0; padding:0;}#header {margin:0; padding:0;}
#header h1{
/* position: relative; */
background: yellow;}#header img {
border:3px solid blue;
display: block;
float: left;
margin: 0 10px 10px 0; /* this changed from padding */
width: 220px;
height: 220px;
}#content
{
margin:0 24% 0 17%;
padding:10px;
border:5px solid green;
}#main
{
/* position: relative; */
padding:5px;
margin:0 0 5px;
}#main h2
{
/* position: relative; */
margin:0 0 4px 0;
padding: 0;
border-bottom:2px solid black;
background: yellow;
}#main p{
border-bottom:2px solid black;
background: lime;
}/* absolute divs and general */
#nav
{
position:absolute;
left:0;
top:140px;
width:15%;
border:3px solid red;
}
#bonus
{
position:absolute;
top:100px;
right:15px;
width:20%;
padding-top:10px;
border:3px solid red;
}
(note I added the image styles into the CSS and I changed the image "padding" to margin to create the space between image and text.)
Suzy
It may be later today before I have a chance to test this, but I just wanted to say a quick thank you for help.
I'll let you know how it works.
