#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    4
    Rep Power
    0

    Problem with CSS in Netscape


    I've been trying get a template working to transfer my site over to CSS (I've been reading about it and it seems to be the way to go) - have been working on it all weekend and have cracked a 3 column grid that seems to work well.

    You can see where I've got to here:
    http://www.discographynetwork.com/nav2.php

    The only small problem I have in ie is a missing pixel to the left of the home button. If you have a suggestion for that I'd be grateful.

    However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div.

    Can someone point me in the right direction.

    Thanks.
    Last edited by sangling; April 18th, 2004 at 05:27 PM.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    10
    Rep Power
    0
    try getting rid of all the margins in the body... some browsers take the margins into account when determining a layer location...

    <body leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Just some odds and ends…

    header2 might be better served as a float, nested in header1.

    Remove the height attribute from header3 and header5. By setting the height, overflow does just that, overflows. Look at my Nested Boxes demo in Moz or other CSS compliant browser and compare with IE's rendering. IE renders overflows incorrectly which can lead to nasty surprises when properly rendered.

    <div id="header4">
    &#160;&#160;<h2>&nbsp;</h2>
    &#160;&#160;<h1>&nbsp;</h1>
    &#160;&#160;<h2>&nbsp;</h2>
    </div>

    I don't see any way that ↑ is syntactically or structurally correct. If the <hn> elements are for vertical spacing, use 'height.'

    display: inline-block The "inline-block" is a proprietary MSIE property and is not a part of CSS standards.

    Inline padding, margin and border are applied to the element, and do affect other elements in the horizontal dimension. The gotcha is that these properties do not affect elements above or below.

    I highly recommend you read Flowing and Positioning: Two Page Models for additional insight into CSS layout/display control.

    You should also remove the old tag soup all caps stuff and properly close such elements as <img />, <br />, <meta />, <link />, &#38;c. As is, this is not valid xhtml.

    These are just some things that jumped out at me. There may be more, or not.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Originally Posted by kk5st
    J

    display: inline-block The "inline-block" is a proprietary MSIE property and is not a part of CSS standards.
    actually display:inline-block; is part of the standards, if you take a look at css2.1

    http://www.w3.org/TR/CSS21/visuren.html#display-prop

    but you should avoid using this property since its only supported by opera7.
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally Posted by Akh
    actually display:inline-block; is part of the standards, if you take a look at css2.1

    http://www.w3.org/TR/CSS21/visuren.html#display-prop

    but you should avoid using this property since its only supported by opera7.
    Thank you. I am again behind the times This property was supported by IE/Win in v5.5 but not in CSS2. I shall play around with it.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    well msie let you set width to any inline element, so i don't know if can count that as support of inline-block

    som examples of inline-block
    http://test.9ls.org/css-examples/inBlock.html
    http://www.quirksmode.org/css/display.html#inlineblock
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    See Dynamic HTML The Definitive Reference second edition; Goodman. D.; O'Reilly; p.1065.

    Perhaps not authoritive, but it's what I have.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo