SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Trouble with NS6 positioning


    I'm trying to position and image and some text within a table on my page, but it doesn't work in NS6.

    Here are the two screenshots


    The IE6 version is what I want it to look like, the image and text positioned within the border.

    Here is my CSS :

    body {
    background-color: #FFFFFF;
    margin-top: 0px;
    margin-left: 20px;
    scrollbar-face-color: #C5CAD5;
    scrollbar-shadow-color: #7996B5;
    scrollbar-highlight-color: #7996B5;
    scrollbar-3dlight-color: #C5CAD5;
    scrollbar-darkshadow-color: #C5CAD5;
    scrollbar-track-color: #C5CAD5;
    scrollbar-arrow-color: #7996B5; }

    p.pos {
    position: absolute;
    left: 160px;
    top: 10px; }

    a:link {
    color: #56C9FF;
    text-decoration: none;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold; }

    a:active {
    color: #2687B5;
    background-color: #DBF2FD;
    text-decoration: none;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px; }

    a:visited {
    color: #1477A5;
    text-decoration: none;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    background-color: #B1E5FD; }

    a:hover {
    color: #2687B5;
    text-decoration: none;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    background-color: #DBF2FD; }

    p {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #686868;
    line-height: 135%; }

    .top {
    font-family: verdana;
    font-size: 9px;
    color: #000000;
    margin-top: 0px; }

    table.table {
    position: absolute;
    left: 20px;
    top: 180px;
    width: 470px;
    border: 0px;
    border-collapse: collapse;
    background-color: #FFFFFF; }

    .box {
    width: 100%;
    border-top: 1px solid #ECEBEB;
    border-bottom: 3px solid #E5E3E3;
    border-left: 1px solid #ECEBEB;
    border-right: 3px solid #E5E3E3;
    height: 80px;
    vertical-align: top;
    background-color: #FFFFFF; }

    img.pos {
    position: absolute;
    top: 12;
    left: 10; }

    .boxblank {
    width: 33%;
    height: 8px;
    vertical-align: top;
    background-color: #FFFFFF; }


    Here is my HTML :

    <body>
    <div style="left: 10; top: 0; width: 200; height: 80; position: absolute">

    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="350" height="90">

    <tr>
    <td width="33%" style="border-bottom: 10px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; font-family:Verdana; font-size:8pt" height="80" valign="top">&nbsp;


    </td>
    </tr>
    </table>

    </div>

    <p><span style="left: 52; top: 4; position: absolute"><img border="0" src="images/links.jpg" width="300" height="70"></span></p>


    <table cellpadding="0" cellspacing="0" class="table">
    <tr>
    <td class="box"><img src="links/1kp.jpg" class="pos" alt="www.1000planets.com">
    <p class="pos"> <a href="http://www.1000planets.com" target="_blank">1000
    Planets Inc.</a></p> </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    <tr>
    <td class="box">&nbsp; </td>
    </tr>
    <tr>
    <td class="boxblank"> </td>
    </tr>
    </table>


    </body>


    What is going wrong? I looked over my positioning CSS and they are supported by IE4+ and NS4+, so I'm stumped.

    Thanks in advance for looking over all that code.

    Cosmic.

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both of your screenshot links produced a 404 error.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow :.:

    I don't know whats up with the links, but just copy and paste the address into your browser. They are correct, but SitePointForums does something to the links.

    www.1000planets.com/cosmic/CSStest/NS6css.jpg
    www.1000planets.com/cosmic/CSStest/IE6css.jpg

    Cosmic.

  4. #4
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) you are not providing units next to your positions. you should specify as "left: 10px;" rather than "left: 10;"

    2) your IMG.pos style is specified as "position: absolute;" when what you really want it to be is "position: relative;". IE does not correctly render CSS in many cases, and you were being fooled. In actuality, NS was displaying it correctly and IE was not, contrary to what you originally thought.

    3) all that absolute positioning is going to come back one day and bite you in the bum. You would be well-advised to try a more fluid manner of positioning your content.

  5. #5
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with everything randem said. The fact is, you likely tested your work using IE and as an after thought checked it with NS6. Because NS has sucked for so long, you automatically assumed NS was doing it wrong. The fact is NS follows the standards according to w3c and the folks in Redmond are more or less iterpreting those standards however they like.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2002
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :.:

    Ok, I do test with IE6 because NS is "el crapo" and most people use IE.

    As far as using absolute positioning, what other "method" should I use so it doesn't nip me in the but? I'm brand new to CSS so I don't know much about positioning.

    Thanks for the goods so far.

    Laters, Cosmic.

  7. #7
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay... for starters, Netscape is *FAR* from el crapo.

    Get Mozilla 1.0 and code everything in that first. Mozilla 1.0 is the most standards compliant browser available, not to mention the added benefits of tabbed browsing and disabling popups.

    Rather than absolute positioning, use your margins effectively to get things where they need to be. And remember, not all monitors are the same size.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •