SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Arcata CA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Absolute positioning difference: FireFox vs IE6

    I've got text absolute positioned over the top of images, the images are also absolute positioned. The images show correctly in both browsers, both horizontally and vertically. The text, however, shows correct horizontal position, but the vertical position appears about 50px higher in IE6 than in FireFox. I have tried changing the text from <h1> to <p>, no effect, I've tried giving them zero margins, even negative margins, no effect. I have tried nesting the text inside their own separate divs, no effect.

    Both the html and the css validate, and I have searched the forum for examples of this problem. Here is a test page with the problem: http://www.foxblocks.com/!!NEW/test.shtml

    Any insights?

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set position: relative on the div holding the h1 and the image and then use margins, not AP to position the div. The image comes first in the source so doesn't need to be positioned, but you can use position: absolute to move the h1 over the image relative to its position in the div, not the body (which is what you've got at the moment).

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Location
    Arcata CA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Used a Hack instead

    Okay, I did that and it's probably better css than what I had, but it did not fix the problem, the difference between FF and IE is the same. I was able to correct the problem here: http://www.foxblocks.com/!!NEW/test2.shtml using a hack. This is the first time I have done a hack, and am a bit uncertain if it's the right way to go. I mean, it seems to work, but, is it "proper"?
    Thanks for your help!

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    background foreground

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <style type="text/css">
    <!-- 
    *{margin:0;padding:0;}
    
    h1{color:black;background:gray;text-align:center;margin-left:10px;margin-right:10px;}
    html .fotoa h1,html .fotob h1,html .fotoc h1,html .fotod h1{margin-top:112px;}
    
    .spot{background:red;height:10px;width:10px;overflow:hidden;margin:10px 0 0 10px;}
    
    .pic{
    float:left;
    display:inline;
    width:200px;
    position:relative;
    margin:50px 0 0 50px;
    }
    
    .fotoa{background:url(graphic/random/res/03.jpg) no-repeat;}
    .fotob{background:url(graphic/random/res/03.jpg) no-repeat;}
    .fotoc{background:url(graphic/random/res/03.jpg) no-repeat;}
    .fotod{background:url(graphic/random/res/03.jpg) no-repeat;}
    
    p{clear:both;height:10px;}
    
    .a{position:absolute;left:0px;top:0px;}
    
    .pic img{display:block;}
    .pic h1{margin-top:-18px;position:relative;}
     -->
    </style>
    </head>
    <body>
    
    <div class="pic fotoa">
    <div class="spot"></div>
    <h1>Sample Text</h1>
    </div>
    
    <div class="pic fotob">
    <div class="spot"></div>
    <h1>Sample Text</h1>
    </div>
    
    <div class="pic fotoc">
    <div class="spot"></div>
    <h1>Sample Text</h1>
    </div>
    
    <div class="pic fotod">
    <div class="spot"></div>
    <h1>Sample Text</h1>
    </div>
    
    <p></p>
    
    <div class="pic">
    <div class="spot a"></div>
    <img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
    <h1>Sample Text</h1>
    </div>
    
    <div class="pic">
    <div class="spot a"></div>
    <img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
    <h1>Sample Text</h1>
    </div>
    
    <div class="pic">
    <div class="spot a"></div>
    <img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
    <h1>Sample Text</h1>
    </div>
    
    <div class="pic">
    <div class="spot a"></div>
    <img src="graphic/random/res/03.jpg" alt="" width="200" height="152">
    <h1>Sample Text</h1>
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Jul 5, 2006 at 07:48.


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
  •