CSS Positioning in Navigator 4.x

I'm trying to position some elements with CSS and it's not really working out in Navigator 4.x

Here is some sample code:



In this situation, if the style is defined for one or the other, the DIV or the SPAN, then the positioning for that element works, and everything else is normal. If the style is defined for both the DIV and the SPAN, then the positioning works for the SPAN, and none of the other styles in the document work (there is a lot more content on the page, and a lot of styles).

It works in Explorer 5, and it works in Netscape if the DIV and SPAN are not in the table.

Is this just a routine case of Netscape abjectly malfunctioning without recourse, or is there something I can do to get this to work properly in Netscape 4.x?

By the way, any opinions on CSS positioning replacing tables for layout? I haven't tried much of this with CSS, but I get the feeling it's not realistic to replace table-based layout with CSS positioning at this point in time, if accomodating Netscape. Is this conceivably a realistic strategy in general, assuming all of the established positioning features worked 100%?

when you give a div or span a position of absolute or relative you effectively turn it into a layer in NS4.x .. and NS4.x will through a wobbly if it comes across a layer inside a table. Keep all your divs outside the table and it should work ok.

CSS vs tables - all depends on the content I suppose. Web developers/designers do tend to put everything inside a table without thinking about it. I've seen many a page that could have been done in exactly the same layout without the use of a table.

I have a similar(?) question/problem. The following line works as it should (again??) in IE
5.5 but in Netscape 4.x the portion after the style falls to the next line as if a <br> is typed after the </h1> tag.
The style in question only includes only font properties.
<h1>hello </h1> my name is reza.
What am I missing here?
Any help would be appreciated

The <h1> tag does imply a linebreak.. if too much space is being rendered beneath the header try using CSS to set the margin ..
margin-bottom:2px;
margin-top:2px;

alternatively you can try using CSS to set the display to inline.. this should remove the linebreak but I think that's probably not what you want.
display:inline;

Thanks for the heads-up, Jonathon. I frequently author pages that have very complex layouts, like if the home page is a large image that has buttons in it that rollover, I need to slice the image into smaller images and then rebuild the whole image in the browser by putting the images into tables.

The project I'm working on right now is partly to show that I know CSS, so I'm am trying out various things. Up to this point I have been doing the layout with tables, and then I considered doing it with CSS positioning. I am making the page so that it will work sufficiently in IE and NN. I don't know if NN is going to support the positioning features enough for me to completely eliminate my tables for layout, so I don't want to waste hours trying in vain to get it to work.

Thanx but the space beneath is not the problem only the break which I don't want at all.
What if I don't use <h1> instead define a class with the properties I need and use it instead will I be able to get the text continue on the same line after?

Here is one example:
...
H4{
font-weight : bold;

}

-->
</style>
....
<h4>text </h4>text...

the 'hello' does not stay on the same line in NN. Will I be able to keep it on the same line if I do anything differently? Not use <h4> but define a new class?

If you simply want to apply a style to a segment of a sentence or something like that just use the <span> tag.


You could also give your span a class attribute and define the styles for it in the header of the document.

You can override a block level element with...
<h1 style="display: inline">