[RESOLVED] Top and bottom margin issues

@JazztronikFeb 12.2010

I can’t get to apply top and bottom margins correctly to nested divs.

This is the HTML code:

[code=html]<div id=”footer”> <div> <div> … </div> </div> </div>[/code]

and this, the CSS:

[code=html]#footer { clear:both; background: url(../images/backgnd_mainbody_top.png) top no-repeat; }

#footer div { margin-top:25px; background: url(../images/backgnd_mainbody_bottom.png) bottom no-repeat; }

#footer div div { margin-bottom:25px; background:url(../images/backgnd_mainbody_center.png) center repeat-y; }[/code]

As you will quickly grasp, what I want to do is to apply a rounded top background as well as a rounded bottom background, with fixed widths of course, and a repeated inbetween background for the content.

Surprisingly I see that the top margin which I assigned to “#footer div” seems to act as if I had assigned it to “#footer” directly, so that this margin appears to be applied to #footer actually, not to its child div, and the footer is displayed 25px farther than desired from the previous block above.

What should I do to fix this?

to post a comment

CSS

11 Comments(s) _↴

@CFHuttonFeb 12.2010 — #It's sometimes difficult to look at just little pieces of code like that. Do you have link to the site?

I'm not sure, but I think possibly your descendant selectors are not acting the way you think they are. I think your inner most div within footer is possibly getting both the #footer div AND the #footer div div rules applied.

If you don't have a link, you could try just giving those divs inside footer ids and making your css based on the ids instead of using descendant selectors.

Edit: That is definitely happening. Just use ids on the divs inside the footer and use them for your css rules. That might not be the only thing going on, but it's one thing.

@JazztronikauthorFeb 12.2010 — #Hello CFHutton!

I've tried what you suggested, but I'm getting the same undesired effect. Of course you can check it by yourself. Here's the link:

http://www.fast-forward.es/joomla/index.php?lang=en

This is happening to the footer. You'll see that now the structure is:

[code=html]<div id="footer">
 <div  id="footer2">
 <div  id="footer3">
 ... 
 </div>
 </div>
 </div>[/code]

@CFHuttonFeb 12.2010 — #Wow, there's bound to be a shortage of divs left on the internet! ?

I'm not even positive what you're trying to do anymore, but if you want to close the gap between that main part of the content and the piece below it, you can remove the:

maincontentwrapper3 25px bottom margin

and

footer2 25px top margin

@JazztronikauthorFeb 12.2010 — #I appreciate your suggestion. I thought it would be possible to do what I want to do this way. I've tried removing the lines you said but it doesn't solve the problem ?. IMO the bottom margin of maincontentwrapper3 doesn't affect at all the positioning of the footer. That's what Firebug seems to tell me.

Well, I don't know any other method to build the layout and background for a block with fixed width, rounded corners, and a shadow around the borders, and this last requirement is important. I know simpler ways to implement this if I didn't need a shadow around the border but I need it in this case :o. I would appreciate any help with this.

@CFHuttonFeb 12.2010 — #So what you're trying to do is have the main content area with a rounded bottom, and then the footer slightly below that with all rounded corners?

@JazztronikauthorFeb 12.2010 — #Got it! Yipee! Well, I finally got rid of those top and bottom margins as you suggested. I'm still not sure if I would be able to get something by using them.

Besides removing the margins, the other thing I've changed is the top and bottom backgrounds. They previously were transparent PNG's (the background outside the corners was the real page background), and now they are opaque PNG's with the same background colour outside the corners as the page background. This way I solve the backgrounds overlapping each other. Possible drawback: if in the future I want to change the background colour of the page, I will need to change the images of the footer background too.

Well, better suggestions would be greatly appreciated! ?

@CFHuttonFeb 13.2010 — #I don't think you even need png files there, or any transparency, just create a rectangular image and outside the grey 'border' thing fill with your background color.

You really only need transparency when you are going to overlap an image over some other element(s) that doesn't share the same color. Png files still need a fix for some ie versions, and while I've done that before, I don't like to fix things I can avoid fixing.

Glad you got it worked out. As always, that's the key thing. Live, fix, learn.

@JazztronikauthorFeb 13.2010 — #Hey thank you CFHutton! Yes, seems that what you say is what I finally did. I will take your advice regarding the PNG's and will use GIF's or JPG's instead.

Thanks for spending your time with me and my problem hehe. Best regards! ?

@JazztronikauthorFeb 13.2010 — #By the way, although it will no longer affect my case after getting rid of the margins, I found out a solution to the inheritance problem. I will mention it just in case it may help anyone who reads this thread. Instead of using different id's for the nested divs or even worse the descendant selector I used at first, use the child selector with each and every nested div, like this:

[code=html]#footer > div > div {
 ...
 }[/code]

This way inheritance is avoided.

Cheers!?

@CFHuttonFeb 13.2010 — #Child selectors don't work with ie 6. Unfortunately, it's a browser we still support at work, and probably one people building sites in general should still support for now.

Here's a nice chart you can use to check out selector compatibility.

@JazztronikauthorFeb 13.2010 — #It's a very interesting document. I've just bookmarked it. I didn't know ">" doesn't work for IE6. BTW who the hell out of a cave would still use IE6/IE5.5? I bet the usage percentages of IE6/IE5.5 from the stats actually are the thousands of web programmers/developers who use them for test purposes, and some troglodyte ?

Just joking! Thanks for the info! ?

Also in #CSS _↴

calc() with variable PHP image results into rows/columns [RESOLVED] IE6 CSS Bug?

Success!

Help @Jazztronik spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Top and bottom margin issues

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Top and bottom margin issues

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴