The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

[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


    Highly Reliable Systems

    Telephone: 1(775)-329-5139

    Flash Show

    As well as the relevant CSS

    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 }


    .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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed