Grow your CSS skills. Land your dream job.

[Solved] Box Model Issues

  • # March 15, 2010 at 12:59 pm

    So I’m having the weirdest issue. I guess I’m misunderstanding something, because it’s doing it in all browsers. If I create a page-wrapper, and then do image replacement on the first <h1> element, and push it down with top-margin on the <h1>, it actually moves the border of the containing div also! Which it shouldn’t, because the h1 is inside the wrapper div! I have an image of the problem attached. You’ll see that there’s this weird bar behind the logo. it should be at the top of the page…

    Here’s the relevant markup

    Code:

    Highly Reliable Systems

    Telephone: 1(775)-329-5139

    Flash Show

    As well as the relevant CSS

    Code:
    h1 { display: block; width: 300px; height: 67px; background: url(../img/header_replace.png); text-indent: -9999px; margin: 95px 0 0 -135px }
    div#main { background: url(../img/headerblock.png) top left no-repeat }

    And…

    Code:
    .wrapper { width: 730px; margin: 0 auto }
    body { background-color: #f8f8f8 }

    Also, I’m using a modified meyer reset. It’s the one from Elliot Jay Stocks’ Starkers.

    # March 15, 2010 at 1:20 pm

    Solved it. The h1 needed to be floated. Dumb question.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".