2

Ok. This is really weird and I have spent countless hours in vain searching for anything similar. I will add code, but you'll need visuals as well, so I'll include a couple of cropped images to show you what I mean.

My goal: Simple. Push my horizontal nav bar in my footer about 25px below the top edge of the footer. (Footer has a static background image) Code used: #footer ul {margin:25px} Result: No change.

HUH? So I played with it... tried several variations, but nothing worked. NOW, I did find a workaround... used padding instead of margin... but it bothered me that margin wouldn't work so I kept trying to figure out if I messed up my code somewhere.

I used float in the body, but I cancelled it out. Validations all came out ok. So I accidentally stumbled upon Firebug (never used it before... and still don't know how) but in my aimless clicking, I noticed something odd... when I clicked onto my footer ul, a box overlapping the footer and content was highlighted. So it appeared that my margin did exist, but instead of pushing my nav list down... it kept the nav list static, and expanded into the content.

HUH? So I did a little experiment. I created a bright border around the divs in my content and footer and ul to figure out exactly what was happening. (My content section has three divs: content (floating left); sidebar (floating right); and contentWrapper that contains both).

With the borders on, I noticed that my 'outerContent' div was collapsed. A mere 20% or so of the height of the area. So after some (lengthy) research, I came up with the overflow-auto fix. And although I still don't quite understand it, it worked. The contentWrapper expanded to meet the footer, and the footer ul moved to where I wanted to. So problem fixed, right? Well..... not exactly.

My previews did fine, so I went back in and deleted the borders so I can get on with the rest of the formatting. Only when I previewed again... the footer ul was right back where it started. At the very edge of the top of the footer.

I did the borders again... the divs seemed fine, except that the contentWrapper was now pushed slightly above the footer to allow for that margin. Now the REALLY weird thing is that when I put the border around my footer... the ul margin works. When I take it off... the ul goes back to where it was.

What the #$@%!? Although I know of the workaround (the padding) I am worried about compounding whatever mistake I have made and repeating constantly in the future (I have to build another website after this). If someone can figure out what I did to screw things up... it would be GREATLY appreciated.

#contentWrapper {
    overflow: auto;
    padding: 20px 10px;
}
#content {
    float: left;
    width: 660px;
}
#content h1 {
    padding: 0 0 20px;
}
#content h2 {
    padding: 20px 0 10px;
}
#content p {
    line-height: 160%;
    text-align: justify;
}
#content img {
    float: left;
    margin-right: 10px;
}
#content ul {
    line-height: 160%;
    list-style: disc outside url("../images/Bullet-artsy1.png");
    margin: 0 0 10px 325px;
    padding: 10px 0;
}
#content .info {
    margin: 5px 0 10px 250px;
}
#rightSide {
    float: right;
    line-height: 140%;
    padding: 0 10px;
    width: 220px;
}
#rightSide h2 {
    margin-top: 10px;
    padding-bottom: 10px;
}
#rightSide p {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 16px;
    text-align: justify;
}
#rightSide img {
    display: block;
    margin: 5px auto;
}
#footer {
    background-image: url("../images/TCS-Footer1b-plain-230px h.png");
    background-repeat: no-repeat;
    clear: both;
    height: 230px;
}
#footer ul {
    list-style: none outside none;
    margin: 25px;
    text-align: center;
}
#footer ul li {
    display: inline;
    margin: 30px 0;
}
#footer ul li a {
    color: #E8FAFF;
    padding: 30px;
}
#footer p {
    color: #E8FAFF;
    text-align: center;
}
#footer img {
    bottom: -60px;
    position: relative;
    right: -900px;
}

The site is not active, but I've uploaded a word doc with images showing what I am talking about. This is the link to Temp Share: http://temp-share.com/show/dPf3UCobW

Thanks in advance to everyone who can perhaps show me where I went wrong.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
Smokva
  • 33
  • 6
  • Setting margin on #footer ul does not visually affect the ul. It stays right where it is. But if I put a border around the footer, the ul reacts as it should. If you look at the .doc I uploaded, it shows you images of what I am referring to. Note that I do not want a border around my footer, but I would like to know why that is making a difference to how the ul margin code is responding. – Smokva Jul 19 '13 at 06:45
  • you'll notice that almost all questions of this type that elicit answers include a [jsfiddle](http://jsfiddle.net) . It's fairly self explanatory, and makes troubleshooting much easier for people looking at your question. At a minimum, include some html markup with your question. – Dom Day Jul 19 '13 at 07:08
  • I apologize. I'm not used to posting for help so was not aware of jsfiddle and how it works (I did look for a q&a, but couldn't find one). I tried for a quick workaround (the uploaded doc) since I knew it was a css issue and hoped it would be enough. You are correct, however, and now that I had some sleep I will look into familiarizing myself with jsfiddle for future reference. – Smokva Jul 19 '13 at 14:59
  • No worries. In practice though, if the question had had a fiddle to go with it, that showed the problem, it probably would have been answered within minutes. Instead you had to wait for people using stackexchange to avoid doing their day job. hah. – Dom Day Jul 19 '13 at 15:27
  • Wow... spoke too soon. The problem remains. I've actually created it in jsfiddle. The way I set it up, it looks fine. Go into the #footer and delete the border, and watch the positioning of the ul. It's like the margin disappeared although it actually just bleeds into the body.: http://jsfiddle.net/Smokva123/HCxUR/embedded/result/ Note that changing margin to padding works fine... but my question is why???? How can margin be affected but not padding? – Smokva Jul 19 '13 at 21:36
  • This is expected behavior. See [margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) ... to fix this, you need to prevent the margins of the elements from touching. In your case, you can just replace the `margin: 40px;` on the `#footer ul` with `padding: 40px;`, or add 1px of padding to the `#footer` itself. Your border was serving that purpose, by keeping elements apart, so there was no border collapse behavior. I'll add that to the answer below, now we have a fiddle :) – Dom Day Jul 19 '13 at 22:06
  • Yes. That fiddle thingy is very useful. I'm very proud of myself! :) I think there should be a quick link/faq to that on the registration page so noobs like me can get with the program more quickly. I did look for one, and will be very embarrassed if someone tells me it was there and I missed it. – Smokva Jul 19 '13 at 23:20
  • possible duplicate of [Margin on child element moves parent element](http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element) – Ejaz Jun 15 '15 at 13:41

3 Answers3

0

I tested it using firebug and working fine. If you have problem you can add !important at the end as this

#footer > ul {
    margin: 13px !important;
}

And even what you would like to do is to get some margin before and or after the ul. For this you could set margin and/or padding value to your #footer.

Hope this help!

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • I know it validated everywhere; that's why I was stumped. I knew I was making a very subtle mistake somewhere. For the sake of research, I did try your approach, and it didn't work. The ul remained in a fixed position, and its margin simply expanded into the contentWrapper above decreasing its height by the margin value. As I said before, the work around is to address the ul padding instead - but it seemed a band-aid solution as margin SHOULD work properly. – Smokva Jul 19 '13 at 15:06
0

First, to prevent your margin from disappearing, either change the margin on the #footer ul element to padding, or add one px of padding to the #footer element.

In this fiddle, we've set the padding on the #footer to 1px and reduced the height by 2px to compensate.

FIDDLE

#footer ul {
    list-style: none outside none;
    padding: 40px;
    text-align: center;
}

or

#footer {
    background-color: #DDDDDD;
    background-repeat: no-repeat;
    clear: both;
    color: #808080;
    font-size: 12px;
    height: 228px;
    padding: 1px;
}

looking at the css, your padding settings on the <a> tags won't work the way you expect, since by default they are aren't block elements. Add this to the css to have them padded correctly:

#footer ul li a { 
    display: inline-block;
 }

likewise, your ul li should be inline-block.

so ... 

#footer ul li {
    display: inline-block;
    margin: 30px 0;
}
#footer ul li a {
    display: inline-block;
    color: #E8FAFF;
    padding: 30px;
}

Basically, just be aware that when top and bottom margins touch, including those of parent and child elements, the largest margin is used, but the margin is pushed outside the outermost element.

Dom Day
  • 2,542
  • 13
  • 12
  • Yes! That worked! Margins are responding properly: ul element is being pushed down from the footer border instead of its margins fighting against the body. It's funny because 'inline' was the way I was taught to do this by a designer (tutorial). t – Smokva Jul 19 '13 at 15:11
  • The `inline` part is how you get the `li` elements to line up next to each other without using `float`. That part was working fine, so the tutorial wasn't wrong. You add the `block` part of `inline-block` so that you can pad them like a `div`, or other block elements – Dom Day Jul 19 '13 at 15:18
  • Yes! That worked! Margins are responding properly: ul element is being pushed down from the footer border instead of its margins fighting against the body. It's funny because 'inline' was the way I was taught to do this by a designer (tutorial). Thank you. You've corrected a basic assumption I had - I doubt I would have found a solution. – Smokva Jul 19 '13 at 15:24
  • Still strange that 'padding' worked ok. I tried to research which attributes I should be assigning to the ul, and which to the ul li since both seemed to work, but surprisingly there is very little info on that. I think you helped me there as well; I didn't think there was that much difference between the two except the obvious (individual vs group). I figured their basic make-up was the same. Thank you again very much. I will correct my top navigation bar to reflect your input. Come to think of it, I had some funny problems with that nav bar as well and it was probably because of this. – Smokva Jul 19 '13 at 15:28
  • Wow... I'm certainly messing this posting thing up. I'm afraid to edit anything else in case I duplicate it again! Sorry to the administrators. – Smokva Jul 19 '13 at 15:35
  • Huh. Just when I think I get it, I realize I don't know anything. I read your link and am still trying to wrap my head around it-but then I only read it 20x :). The gist seems to be that margins are more fluid than padding, and can 'cross-over' while I assumed they were fixed. What is causing me some confusion is the fact that the contentWrapper DOES have bottom padding so really should have provided a solid barrier. Also, the footer DID have 'clearance' which according to your link should have substantiated the edge. Hmmm... I need another 20reads. But thank you. Now I know where to look. – Smokva Jul 19 '13 at 23:13
0

This is for future reference. I simply wanted to add the following link to compliment Dom Day's above. I am still having difficulty conceptualizing the event but between the two links, it will help me research it until I find the equivalent to an 'adjoining/collapsing margins-for-dummies' site. www.w3.org/TR/CSS2/box.html - Details near the bottom of the web page.

Smokva
  • 33
  • 6