SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict jough's Avatar
    Join Date
    Sep 2001
    Location
    You have moved into a dark place. It is pitch blac
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Negative Margin and Border Overflow - Guru's Help Needed!

    Hi,

    I'm designing a new site for a poetry and literature encyclopedia database, and as has been the norm, I'm doing the layout completely in CSS.

    Here's the URI:

    http://openpoetry.plagiarist.com

    In NS6, Mozilla, and Opera, the page renders correctly. The only image in the header, the open book, floats to the left of the text "open poetry" and "PROJECT" with the border stopping at the left floated image.

    However, in IE6 there seems to be a bug (or else I'm missing something, which is more likely the case) where the border extends OVER top of the floated image.

    If I take away the negative margin on the "open poetry" div (I made the margin negative to let the descenders in the "p"s and the "y" descend over the border-top element of the "PROJECT" div) it works just as expected - the border stops at the image - all is well.

    But once I use a negative margin in *any* non-floated element the border appears over the top of the floated image.

    I can't set the z-index of the image because it's a floated, not a positioned, element. When I set it to "position: relative" and then don't specify a "top" or "left" value, it works just fine in IE but then the image is completely removed from the page flow in every other browser, rendering the text on TOP of the image.

    Grrrrr...

    Any CSS gurus on this board that have had problems with negative margins before?

    -- Jough
    My Dynamic Site in Action:
    Poetry X Poetry Archive

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Penns Woods
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try This...

    It works for me in IE

    .project
    {
    margin-left:75px;
    color: #9CC;
    background-color: transparent;
    border-top: 1px solid #AAA;
    font: bold 24px georgia, 'times new roman', garamond, serif;
    }
    // PS! My brain just hit a bad sector...

  3. #3
    SitePoint Addict jough's Avatar
    Join Date
    Sep 2001
    Location
    You have moved into a dark place. It is pitch blac
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi tryangle,

    Thanks for your reply. I'd already tried this (I probably should have posted many of the things I tried), and it renders incorrectly in IE, so it appears that it "works", but take a look at it in Netscape (6), and now the word project will be over 75px from the float, not from the containing element.

    I'm trying to make it both comply to standards *and* render the same (or "close enough") in at least the major browsers. I don't really care about NS4 at this time, since when the page is finished I'll be @import-ing the external style sheet, which will be hidden from NS4.

    -- Jough
    My Dynamic Site in Action:
    Poetry X Poetry Archive

  4. #4
    SitePoint Addict jough's Avatar
    Join Date
    Sep 2001
    Location
    You have moved into a dark place. It is pitch blac
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Oops!

    Hi,

    I've been working with a local version here, which is different than the one available on the web. Sorry about that. Actually, by absolutely positioning the image (and not specifying either a top or left property) I'm able to "fake out" IE and give the absolutely positioned element a higher z-index, while NS, Mozilla, and Opera have no trouble with it.

    I also just receive another message from someone informing me that this is a known bug in IE6. Wonderful.

    Cheers,

    -- Jough
    My Dynamic Site in Action:
    Poetry X Poetry Archive


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
  •