Putting image in <div> makes menu disappear!

[Kyle James Matthews]

At my wit's end on this one. I have a menu and an image that appears at the
top of almost every page on the site I'm building. I had previously defined
the pictures height and width in pixels, but as the picture is quite wide I
thought it would be best to redefine its width in % to be friendly to
smaller browser windows. The height is still defined in pixels to
accomodate an absolutely positioned menu that is on top of the image. All
well and good. In case I wanted to change things again in the future, I
thought it would be good to wrap the image in a <div> and define the style
thus:

div#topimg {
width: 98%;
height: 314px;
border: 0;
}

It appeared to work very well, except on 3 pages - my weblog and 2 archived
logs from the last 2 months. The pages are XHTML only. The image is
displayed perfectly, but the menu has disappeared. When I remove the <div>
and replace the original width/height/border specs as part of the <img> tag,
everything appears as normal. I would be happy to just use this as a
solution, but it doesn't make sense that this problem only occurs on 3
pages. And, to no one's particular surprise, this only occurs in IE (I am
using v 6.0).

The problem page is http://www.digitalovertone.com/weblog/index2.htm.
Compare with http://digitalovertone.com/index.htm or
http://digitalovertone.com/photos/photomain.htm for how it ought to look.
Is there something I'm missing here? I have tried copying the body of the
problem file into other files that work, and the same things happens!
Please help!

Many thanks!

Kyle

 

[Kyle James Matthews]

wrap
the image in a <div> and define the style thus:

div#topimg {
width: 98%;
height: 314px;
border: 0;
}

The
image is displayed perfectly, but the menu has disappeared. When I
remove the <div> and replace the original width/height/border specs
as part of the <img> tag, everything appears as normal. I would be
happy to just use this as a solution, but it doesn't make sense that
this problem only occurs on 3 pages. And, to no one's particular
surprise, this only occurs in IE (I am using v 6.0).

The problem page is http://www.digitalovertone.com/weblog/index2.htm.
Compare with http://digitalovertone.com/index.htm or
http://digitalovertone.com/photos/photomain.htm for how it ought to
look. Is there something I'm missing here? I have tried copying the
body of the problem file into other files that work, and the same
things happens! Please help!

Following up to my own message, if I remove the definition "float:right"
from "div.rightside", everything goes back to normal. Since that particular
definition was mostly unnecessary anyway, I took it out. So, problem
solved. I still don't understand why enclosing an image in a <div> would
cause a style definition to cause an unrelated element to disappear
entirely. Is it just IE? Any enlightenment would still be most
appreciated.

Thanks,

Kyle

 

[Els]

Following up to my own message, if I remove the definition "float:right"
from "div.rightside", everything goes back to normal.

Is it just IE? Any enlightenment would still be most
appreciated.

http://www.positioniseverything.net/explorer/peekaboo.html