#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2001
    Location
    USA
    Posts
    830
    Rep Power
    14

    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:

    Code:
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="2" align="left" valign="top">
    <div class="ht2">
    Programming
    </div>
    </td>
    </tr>
    
    <tr>
    <td>
    &nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    
    <td align="left" valign="top">
    <div class="ht2" style="position: relative; left: +80px;">
    JavaScript
    
    <span style="position: relative; left: +40px;">
    Testing
    </span>
    </div>
    </td>
    </tr>
    </table>
    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%?
  2. #2
  3. T-Shirt Tragic
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    886
    Rep Power
    321
    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Toronto
    Posts
    16
    Rep Power
    0
    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
  6. #4
  7. T-Shirt Tragic
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    886
    Rep Power
    321
    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;
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2001
    Location
    USA
    Posts
    830
    Rep Power
    14
    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.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Toronto
    Posts
    16
    Rep Power
    0
    Originally posted by Jonathon
    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;
    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?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    Toronto
    Posts
    16
    Rep Power
    0
    Originally posted by rezag


    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?
  14. #8
  15. T-Shirt Tragic
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    886
    Rep Power
    321
    If you simply want to apply a style to a segment of a sentence or something like that just use the <span> tag.
    Code:
    blah blah blah <span style="font-weight:bold">bold text</span> blah blah blah.
    You could also give your span a class attribute and define the styles for it in the header of the document.
  16. #9
  17. No Profile Picture
    Beelzebub
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Location
    The nether regions...ok, San Diego
    Posts
    164
    Rep Power
    14
    You can override a block level element with...
    <h1 style="display: inline">

IMN logo majestic logo threadwatch logo seochat tools logo