|
|
|
|
04-26-2004, 06:04 PM
|
#1 |
nestscape respecting floats
IE 6 displays this the way I want. Netscape7 doesn't seem to care that the
paragraph is floated to the left. Its as though it is positioned relative to the window rather than the floated paragraph. It's my understanding that by specifying position:relative, the container will appear as it normally would in the flow of content. Basically, is this behaivor one of those inherent inconsistencies or is my form bad? I assume IE is getting this right and Nestscape wrong. <body> <p style="float:left;">here is a bunch of stuff, lets see where it goes</p> <div id="Layer1" style="position:relative; border: 1px solid; left:80px; top:0px; width:199px; height:480px; z-index:1"></div> <div id="Layer2" style="position:relative; border: 1px solid; left:0px; top:0px; width:520px; height:480px; z-index:2"></div> </body> Shawn Modersohn |
|
|
|
04-26-2004, 06:17 PM
|
#2 |
|
Posts: n/a
|
Re: nestscape respecting floats
"Shawn Modersohn" <> wrote:
>IE 6 displays this the way I want. Netscape7 doesn't seem to care that the >paragraph is floated to the left. Its as though it is positioned relative >to the window rather than the floated paragraph. It's my understanding that >by specifying position:relative, the container will appear as it normally >would in the flow of content. Basically, is this behaivor one of those >inherent inconsistencies or is my form bad? I assume IE is getting this >right and Nestscape wrong. Always a dangerous assumption. ><p style="float:left;">here is a bunch of stuff, lets see where it goes</p> ><div id="Layer1" style="position:relative; border: 1px solid; left:80px; >top:0px; width:199px; height:480px; z-index:1"></div> Imagine this without any positioning. <p style="float:left;">here is a bunch of stuff, lets see where it goes</p> <div style="border: 1px solid; width:199px; height:480px;"></div> Where does the div go? It goes right up at the left hand edge. Why? Because floated elements don't cause the adjacent elements to move - the cause the content of adjacent elements to be reflowed. Try this to see what I mean: <p style="float:left; background: yellow; width: 50px; height: 50px;"></p> <div style="border: 1px solid black; width:199px; height:480px;">here is a bunch of stuff, lets see where it goes here is a bunch of stuff, lets see where it goes here is a bunch of stuff, lets see where it goes </div> IE gets this wrong. Mozilla/Netscape gets it right. Opera gets it wrong in quirks mode and right in Standards mode. It's a mess, so you need to think about what you want and see if you can do it some other way (with different nesting of elements, or with margins instead of positioning). Steve -- "My theories appal you, my heresies outrage you, I never answer letters and you don't like my tie." - The Doctor Steve Pugh <> <http://steve.pugh.net/> |
|
|
|
04-27-2004, 10:53 AM
|
#3 |
|
Posts: n/a
|
Re: nestscape respecting floats
"Steve Pugh" <> wrote in message news  ... > "Shawn Modersohn" <> wrote: > > >IE 6 displays this the way I want. Netscape7 doesn't seem to care that the > >paragraph is floated to the left. Its as though it is positioned relative > >to the window rather than the floated paragraph. It's my understanding that > >by specifying position:relative, the container will appear as it normally > >would in the flow of content. Basically, is this behaivor one of those > >inherent inconsistencies or is my form bad? I assume IE is getting this > >right and Nestscape wrong. > > Always a dangerous assumption. > > ><p style="float:left;">here is a bunch of stuff, lets see where it goes</p> > ><div id="Layer1" style="position:relative; border: 1px solid; left:80px; > >top:0px; width:199px; height:480px; z-index:1"></div> > > Imagine this without any positioning. > > <p style="float:left;">here is a bunch of stuff, lets see where it > goes</p> > <div style="border: 1px solid; width:199px; height:480px;"></div> > > Where does the div go? > It goes right up at the left hand edge. Why? Because floated elements > don't cause the adjacent elements to move - the cause the content of > adjacent elements to be reflowed. > > Try this to see what I mean: > <p style="float:left; background: yellow; width: 50px; height: > 50px;"></p> > <div style="border: 1px solid black; width:199px; height:480px;">here > is a bunch of stuff, lets see where it goes here is a bunch of stuff, > lets see where it goes here is a bunch of stuff, lets see where it > goes </div> > > IE gets this wrong. Mozilla/Netscape gets it right. Opera gets it > wrong in quirks mode and right in Standards mode. > > It's a mess, so you need to think about what you want and see if you > can do it some other way (with different nesting of elements, or with > margins instead of positioning). > > Steve > > -- > "My theories appal you, my heresies outrage you, > I never answer letters and you don't like my tie." - The Doctor > > Steve Pugh <> <http://steve.pugh.net/> I guess I assumed that since I declared a <div> relevant to another element I was going to get a box beside the first block of content, just like IE does. Taken in context with the purpose of a float, to flow elements around, your explanation makes more sense I suppose. This was an exercise in academics mostly. Academics aside, I am working on http://webpages.charter.net/shawnmodersohn/tnttest.html . In Netscape, the center div flows to the left of a shorter left div as I would now expect while IE keeps the appearance of two distinct columns. I want everything fluid for any type of display. I am new to html and I decided if I am going to learn I will learn with the cutting edge in mind, distinguishing between the purposes of html, css, and xml. The navigation bar will eventually have hover effects but the links are all valid to the almost deployable table formatted site. Any input is appreciated. |
|
|
