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

    Join Date
    Apr 2004
    Posts
    16
    Rep Power
    0

    CSS negative margin screws in IE


    im using (stripped most) CSS:

    Code:
    h3 {
        margin-top:-10px;
        }
    in this HTML

    Code:
    <h1>Header</h1>
    <h3>subtitle</h3>
    i want the <h3> the overlap the <h1> partly, like defined in the CSS. It works fine in every browser, but in IE, the rest of the page is distored because of the negative margin definition.

    is there any workaround for this
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Use
    Code:
    h3 {
        position: relative;
        top: -10px;
        }
    Using position: relative preserves the natural position of the element. The top: -10px; simply shifts the element without affecting other elements.

    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.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    16
    Rep Power
    0
    thx for the reply.

    it works partly the page is still distorted, but less. now other DIV elements shift a little too much to the right in IE :S
    Last edited by Sheqel; May 4th, 2004 at 04:40 AM.
  6. #4
  7. what's your moniker?
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Highland Park, NJ
    Posts
    201
    Rep Power
    11

    you could try...


    You could try putting the two h tags in a div with position relative with no top or left defined.
    Then make the h tags absolute - they will be positioned within the containing div, not for the whole document. Then you don't have to worry about them affecting the rest of the page.

IMN logo majestic logo threadwatch logo seochat tools logo