Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Something weird

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #40831
    Anonymous
    Inactive

    Just wondering why this happens. It’s kind of hard to explain, but if you look at the example, you’ll see what I mean. I’m sure there’s a perfectly logical reason for this, but why does the image appear in between the H2 tags text and background color? I would think that the H2 tag would appear completely under or over the image…

    [This is weird](http://codepen.io/msguerra74/pen/kbnzj “Weird”)

    #114517
    chrisburton
    Participant

    @msguerra74 Are you trying to accomplish this? http://jsfiddle.net/7kxQN/

    #114521
    Anonymous
    Inactive

    @ChristopherBurton – I was trying to do [something like this.](http://codepen.io/msguerra74/pen/kbnzj)


    @joshuanhibbert
    – Haha, I thought for sure you’d be able to tell me the reason was because of some obscure anomaly in the css spec on how block level element backgrounds are rendered, or something fancy like that!

    #114523
    lhoezee
    Member

    @msguerra74 If I’m understanding you correctly, you should just be able to remove your margin-top or set your margin-top: 0 for both h2 and h3.

    That will set h2 and h3 below the images. Is this what you mean?

    http://codepen.io/anon/pen/dyFHK

    #114524
    Anonymous
    Inactive

    I actually wanted the H tag to partially overlay the image, which I know how to do, but ran into that weird issue in the process. I was really just wondering why that was happening more than I was wondering how do do what I was doing.

    I appreciate all the help though!

    #114525
    TheDoc
    Member

    That’s sort of cool, actually.

    #114526
    Anonymous
    Inactive

    Haha, yeah it is.

    #114527
    Meta_Ing
    Participant

    It seems like inline elements (such as img) are stacked higher than block elements, regardless of whether they come before or after [the block element].

    I think what’s happening is that because the img and h2 are sibling elements, the img overlays the actual h2 itself (in this case, the background) based on what I said above, but the text inside the h2 overlays the img because it is a child of the h2.

    Here’s something I wrote that should hopefully explain what I mean: http://codepen.io/Iire/pen/fheGA

    #114546
    Taufik Nurrohman
    Participant

    I don’t know what to say. Like magic. The text get out from the background.

    #114557
    Anonymous
    Inactive

    @Meta_Ing That’s really interesting and weird at the same time, thanks for sharing.


    @Hompimpa
    It’s neat because I love magic!

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.