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

    Join Date
    Mar 2004
    Posts
    3
    Rep Power
    0

    CSS Negative Margins and Vanishing Text


    In Internet Explorer 6, the following HTML and CSS with negative margins causes the first letter of the heading to disappear:

    Code:
    <html>
    <head>
    <style type="text/css" media=screen>
    #siteBody {
     position: absolute;
     top: 100px;
     left: 100px;
     width: 700px;
     margin-left: 2em;
    }
    
    h1 {
     margin-left: -1em;
    }
    
    </style>
    </head>
    <body>
    <div id="siteBody">
    <h1>This is the heading</h1>
    <p>
    This is the content.
    </p>
    </div>
    </body>
    </html>
    There are ways to get the negative margin to work in IE properly, but at a loss of functionality. For instance, if I remove the width property from the siteBody CSS, and change the position to 'relative', the letter will appear. Also, if I remove the div and just place the 'siteBody' id on the body tag, then the first letter will appear.

    Any help is greatly appreciated as I've been searching for a solution for a couple of days now.

    Thanks,
    ---atomgiant
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    This may give you some ideas.

    http://www.positioniseverything.net/...rstletter.html

    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