Forums | MacLife

I'm with stupid · 2005-12-14 2:01 pm

Can someone explain why this is happening.

I have some html:

Code:

<body>
<div id="wrapper">
  <div id="head">
    <h1>Page Heading</h1>
    <form>a search box</form>
  </div>
</div>

and some css:

Code:

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: white url(images/homepagebackground.png) repeat-x top;
    font-family: Veranda, sans-serif;
    color: #000;
    text-align: center;
    }
#wrapper {
    width: 800px;
    margin: 0 auto;
    background: url(images/topForeBanner.png) no-repeat top;
    text-align: left;
    }

The background image on the body element is a 4x53px image that creates a banner across the top. The image on the wrapper tag is a logo that is 600X53px. It should be placed directly on top of the banner created by the repated image on the body tag, but it adds a top margin so the logo doesn't line up with the banner. I realized that if I add an   just after the <div id="wrapper"> in the html it works. The images line up perfectly. Why?

I hope I'm explaining this well enough...

reefdog · 2005-12-14 2:44 pm

Not sure why the space would fix it, but my initial thoughts would be to fix the CSS wrongnesses. Correct the font spelling ("Veranda"), and get the background properties in proper shorthand order:

Code:

background: color url("pathname.jpg") horizontal vertical repeat;

You also might try specifying the div's padding as 0. You also shouldn't have to set body to 100%, as that's implied. (I'm also assuming you just left out the closing body tag.)

Try that and see what gives. Also, a link would be nice, so we can see the site and code in their entirety.

reefdog · 2005-12-14 2:45 pm

Sorry for all the "also"'s. Whew.

Basseq · 2005-12-14 2:50 pm

Yeah, a little confusing. smile But I believe it has to do with your H1 tag. The margin on header tags will "jump through" divs. The extra space you're seeing is actually the margin of the header being applied above the div. I'm sure there's logic behind this decision, but I don't know what it is. Anyway, either killing the margin-top on the header or (maybe?) specifying a padding on #wrapper will fix your problems.

Basseq · 2005-12-14 2:56 pm

reefdog wrote:
Not sure why the space would fix it, but my initial thoughts would be to fix the CSS wrongnesses. Correct the font spelling ("Veranda"), and get the background properties in proper shorthand order:
Code:
background: color url("pathname.jpg") horizontal vertical repeat;
You also might try specifying the div's padding as 0. You also shouldn't have to set body to 100%, as that's implied. (I'm also assuming you just left out the closing body tag.)

Try that and see what gives. Also, a link would be nice, so we can see the site and code in their entirety.

Actually, the background code he has is valid. Order and/or inclusion of properties is not required for the background tag. At least, according to W3Schools. That was my first thought, too. I'd run it through the validator, but I am way too lazy to write a HTML page, upload it, and then validate it.

reefdog · 2005-12-14 2:58 pm

Ooh, good call. (On the h1.)

Yesh, the background thing wouldn't account for the bug, but I can't help but recommend cleanup when needed. Improper shorthand will often work, but it's still improper.

I'm with stupid · 2005-12-14 3:07 pm

Ah ha!!! padding did it.

I actually tried setting the padding to 0 earlier, because the logo was being pushed down on the page, not up, but that had no effect - (neither did killing the top margin on the h1). I thought there was some extra padding somewhere that was being applied that I needed to remove. I still don't understand why giving it padding works, but it does. Thanks.

CSS Wierdness indeed...

reefdog · 2005-12-14 3:43 pm

Margin collapsing. Basseq was right: the h1 (and maybe #head's) margin was peeking through the #wrapper's bounds and pushing #wrapper away from the top of the page. Giving #wrapper vertical padding effectively told all its child elements "your margins can't poke through me anymore."

I wish margin-collapse were definable, just like border-collapse. Will that change in CSS3?

By the way, obviously I'm excellent at explaining why other people are right. Props to Basseq for actually, y'know, resolving the problem.

Basseq · 2005-12-14 6:35 pm

And I'm good at figuring out what is wrong, but having no idea why. We make a good team. We should probably go into fighting crime.

reefdog · 2005-12-14 9:41 pm

Fixxy and Splainer!

TonyPrevite · 2005-12-14 9:57 pm

reefdog wrote:
Ooh, good call. (On the h1.)
Improper shorthand will often work, but it's still improper.

Well, laa tee frikin da! wink

reefdog · 2005-12-14 10:01 pm

Hit him, Fixxy. Hit him in the face.

Basseq · 2005-12-14 11:35 pm

But I don't know why!

TonyPrevite · 2005-12-15 2:09 am

drool

Basseq · 2005-12-15 3:32 pm

This thread cracks me up every time I read it.

reefdog · 2005-12-15 6:19 pm

So, do we get outfits, or what? And where's our lair going to be? I vote for deep in the Aztec ruins. Ice castles and lava caves are soooo done.

TonyPrevite wrote:

That truly is the most versatile maxie ever.

Basseq · 2005-12-15 9:13 pm

I'm not really into the spandex thing. I mean, go for it if you like, but give me jeans and a t-shirt any day. Oh, but Aztec ruins are fine with me. Unless you suggest the Azores. I mean, just say it. Azores. It sounds cool. I think they're mountains, and I think cool stuff happens there.

reefdog · 2005-12-16 7:57 am

Spandex is right out. Jeans are great, and a tee. But if we're going to be in the mountains, we should probably have thick lambswool jackets. And, of course, wide hats to keep off the rain. We'll also want mountain-capable transportation, so... maybe some horses. And a cover job that will let us come and go to our lair without the locals getting suspcious. I know... cowboys! Cowboys who work on a lonely mountain range, secretly sharing a connection that none but they know.

Dammit.

Basseq · 2005-12-16 2:07 pm

"Cowboys who work on a lonely mountain range, secretly sharing a connection that none but they know."

Yikes.

OK, so let's refine this. Firstly, we need women. Secondly, we need a dedicated T1 line. I don't think order is important here.

Splainer · 2005-12-16 2:49 pm

This seemed necessary, too.

If we're going for a wishlist, let's just make it a DS3 and Scarlett Johansson. And I think it goes without saying that we need elaborate secret passageways, a bronze bust with hidden button, and a butler.

Stan · 2005-12-16 2:53 pm

Are you going to live on Broke Code Mountain?

Splainer · 2005-12-16 2:56 pm

These sorts of jokes will not be tolerated. Ring Of Validation, activate!

Basseq · 2005-12-16 4:37 pm

I think you mean "Hit him, Fixxy. Hit him in the face."

To which I would respond:

And I am way too lazy to switch back and forth between alts. I thought about it, but then I decided that I'm not that big of a nerd. Thank you, reefy/splainer for stepping up to that particular plate. wink But as for the rest, you have my acknowledgment and acceptance of terms.

TonyPrevite · 2005-12-16 5:32 pm

drool

I'm with stupid · 2005-12-16 5:45 pm

Holy Crap!!!! eek

You leave your thread for one minute and look what happens....

It gets overrun by superheros, everytime.

Last edited by I'm with stupid (2005-12-16 5:46 pm)

Forums | MacLife

#1 2005-12-14 2:01 pm

css wierdness...

Code:

Code:

#2 2005-12-14 2:44 pm

Re: css wierdness...

Code:

#3 2005-12-14 2:45 pm

Re: css wierdness...

#4 2005-12-14 2:50 pm

Re: css wierdness...

#5 2005-12-14 2:56 pm

Re: css wierdness...

reefdog wrote:

Code:

#6 2005-12-14 2:58 pm

Re: css wierdness...

#7 2005-12-14 3:07 pm

Re: css wierdness...

#8 2005-12-14 3:43 pm

Re: css wierdness...

#9 2005-12-14 6:35 pm

Re: css wierdness...

#10 2005-12-14 9:41 pm

Re: css wierdness...

#11 2005-12-14 9:57 pm

Re: css wierdness...

reefdog wrote:

#12 2005-12-14 10:01 pm

Re: css wierdness...

#13 2005-12-14 11:35 pm

Re: css wierdness...

#14 2005-12-15 2:09 am

Re: css wierdness...

#15 2005-12-15 3:32 pm

Re: css wierdness...

#16 2005-12-15 6:19 pm

Re: css wierdness...

TonyPrevite wrote:

#17 2005-12-15 9:13 pm

Re: css wierdness...

#18 2005-12-16 7:57 am

Re: css wierdness...

#19 2005-12-16 2:07 pm

Re: css wierdness...

#20 2005-12-16 2:49 pm

Re: css wierdness...

#21 2005-12-16 2:53 pm

Re: css wierdness...

#22 2005-12-16 2:56 pm

Re: css wierdness...

#23 2005-12-16 4:37 pm

Re: css wierdness...

#24 2005-12-16 5:32 pm

Re: css wierdness...

#25 2005-12-16 5:45 pm

Re: css wierdness...

Board footer