Hi,
I'm trying to line up a load of images while maintaining the overflow, ie. cant use tables.
In my line i have div tags. Each one is '<div style="position: relative; display: inline">'. Most of these contain a single image. In some there are 2 images which i am trying to overlap by putting in more div tags, ie.
<div style="position: relative; display: inline">
<div style="z-index: 1; position: absolute; top: 0; left: 0">
<image1>
</div>
<div style="z-index: 2; position: absolute; top: 0; left: 0">
<image2>
</div>
</div>
This works fine in IE but not in Netscape. When it gets to the nested div it goes down a line and stacks all proceeding nested divs on top of each other.
any ideas or is this a netscape problem?
I've attached a screen shot of what should and shouldnt happen. Ie on top.Why put the images in div's?
images will naturally 'break' with the flow.Originally posted by ted_trippin
any ideas or is this a netscape problem?Woah now, don't go getting that idea into your head. Netscape (and other gecko browsers such as Mozilla) have very good CSS support. IE is the pile of crap.
Why not do what Fang said though? Images are inline by default. In fact, images are the only inline element that can take dimentions.
Oh, and while I'm here, just because you need the images to wrap, is that the only reason you're not using tables? You should only use tables for tabular data anyway, CSS based layouts are the way to go.My problem isnt getting the images to break its getting them to break at the same time as the image its overlaying.
In some cases I have to display 2 images on top of each other. When resizing the window netscape causes one of the images to break but not the other. This gives the affect of having an extra image. As the attached image shows, IE preserves the order but netscape doesnt.Ooops, I should have said that Netscape doesn't render it correctly first time, its not just on resizing. I need to get netscape to behave like IE (in the pic: make bottom window look like the top window). The pic shows the same data displayed in the two browsers.
I'm trying to line up a load of images while maintaining the overflow, ie. cant use tables.
In my line i have div tags. Each one is '<div style="position: relative; display: inline">'. Most of these contain a single image. In some there are 2 images which i am trying to overlap by putting in more div tags, ie.
<div style="position: relative; display: inline">
<div style="z-index: 1; position: absolute; top: 0; left: 0">
<image1>
</div>
<div style="z-index: 2; position: absolute; top: 0; left: 0">
<image2>
</div>
</div>
This works fine in IE but not in Netscape. When it gets to the nested div it goes down a line and stacks all proceeding nested divs on top of each other.
any ideas or is this a netscape problem?
I've attached a screen shot of what should and shouldnt happen. Ie on top.Why put the images in div's?
images will naturally 'break' with the flow.Originally posted by ted_trippin
any ideas or is this a netscape problem?Woah now, don't go getting that idea into your head. Netscape (and other gecko browsers such as Mozilla) have very good CSS support. IE is the pile of crap.
Why not do what Fang said though? Images are inline by default. In fact, images are the only inline element that can take dimentions.
Oh, and while I'm here, just because you need the images to wrap, is that the only reason you're not using tables? You should only use tables for tabular data anyway, CSS based layouts are the way to go.My problem isnt getting the images to break its getting them to break at the same time as the image its overlaying.
In some cases I have to display 2 images on top of each other. When resizing the window netscape causes one of the images to break but not the other. This gives the affect of having an extra image. As the attached image shows, IE preserves the order but netscape doesnt.Ooops, I should have said that Netscape doesn't render it correctly first time, its not just on resizing. I need to get netscape to behave like IE (in the pic: make bottom window look like the top window). The pic shows the same data displayed in the two browsers.