final gap all browsers + float questions 2

[jlockley]

I will figure it out, for sure, but what is the bottom gap? No heights, clear, on all pages and as far as I have looked (not enough) all browsers.

Note: I have yet to complete spell checking and validation, but it's on the immediate agenda.

http://www.prohospitalitysearch.com/about.html

css is

http://www.prohospitalitysearch.com/tiptest.html

Float questions: I have been agonizing over floats for the last couple of days and have it worked out, but I have a few questions - just curious on these:

1) is it not at all possible to put a border on a div containing a float without ..well, the float floating to the top and just being sloppy all over the place?

2) #tips will not float correctly unless placed directly below the containing "wrapper", that is first in the html progression. Since "tips" is on the left hand side of the page, I would have expected to have to put it below the "sidebar" and contained "menu" segments </div>s. Is there some kind of right to left rule here that I can't find, or am I just missing another punctuation mark somewhere?

 

[BillyRayPreachersSon]

Give your body a margin-bottom of 0px (this fixes Fx). To ensure all browsers render the same, I normally always have this rule:

html, body, form {
   padding: 0px;
   margin: 0px;
}

1. Yes - borders on floated elements work just fine. Try giving it a width/height, or if it contains floated elements, make sure they are cleared.

2. It looks fine for me in Fx when tips is moved above wrapper... what browser are you using?

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[jlockley]

Using Firefox and IE6 right now. Above the wrapper works, but not below Sidebar and Menu, which are floated elements outside of the non floated content. It just sprawls all over the place. One of those late night head knockers.

 

[jlockley]

body
{
margin: 0;
padding: 0;

}

The gap lives!!!!! going to try margin-bottom: 0 all around and see if that helps. same top in footer.

 

[jlockley]

Well, shucks. Everything is zeroed out vertically and still the gap stands victorious. Any thoughts? And thank you for the last one.

 

[Vragabond]

Here's a few things I would question about your page:

1. Why does #wrapper wrap around #tips and no other elements? Would it not make more sense if it would wrap around all three columns? Then you would be able to give your wrapper the background colour that your #content has for the two columns.

2. The gap at the bottom appears because of the collapsing margins. Read more about it here:

http://www.andybudd.com/archives/2003/11/no_margin_for_error/

Basically, your last paragraph in the content area has a margin at the bottom which pushes everything down. Of course, there's also the problem of the #tips column being too long, at least on my machine.

3. I find the black font on the dark blue background (title) or light blue font on a little darker blue background (#tips) hard to read. I don't think you would pass the colour blindness test with these options.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

I have to wrap my head around that..I thought collapsing margins happened when two collide, but there's nothing on footer. This would require removing the bottom margin from all paragraphs and I guess compensating by having a top margin.

I've been working on the Logo look. I like the dark and am fooling around with text-shadow..but not much comes from it. If I can't get that to work tomorrow, I think I'll just go with a graphic.

I thought I had the tips down to a pixel, but that's tweakable. Thanks for the heads up. What browser?

 

[Vragabond]

FF, latest version. It is because you've moved the bullets to the left in IE by reducing margin on the UL. FF however creates that same margin via padding on the LI element. That's why your bullets are still 40px to the right in FF and most of the text falls into the next line making the column longer.

As for collapsing margins, I suggest you re-read the article. You're not understanding the problem fully and you definitely have other options than switching from margin-bottom to margin-top. The article will give you these solutions. One simple one is adding padding-bottom: 1px; to your #main.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

Thanks for reminding me. I had forgotten about that one. The margin I am talking about is the gap on the bottom. Reading "no margin for error" I get what I already understand:

At it's core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one "collapses" to nothing

Which I still take to mean that the space between the two or three is not the sum of the two margins but the height of the largest.

What has me once again befuddled is that there is no bottom margin on the containers above nor any upper margin below. That's why I was thinking making all p bottom margins 0. Still working it out.

Looking for an IE hack for the UL now. Thanks again.

 

[jlockley]

well..both #main and #footer are now contained by a 1px top/bottom border. The gap reigns victorious. I mean, I can live with it, but at this point it's a matter of honor.

Going to try to do the same for all upper containers. See what happens tomorrow.

 

[ck1999]

The problem with the white space prior to the black box (this is what i think you want to remove.

In your css you have

p {
margin-bottom: 1.5em;
}

p {
}

Not sure what the second one does but the 1st is causing the issue change to 0px;

If you need to leave it for other reason then
change you <p> before the last sentence to

<p style="margin-bottom:0px;"

Both should fix what I am thinking you are trying to fix.
Also it looks like the black box (footer) does not have the same right margin (by appearance) as the rest of the page.

ck1999

 

[ck1999]

if you want space between the last sentence and the footer change the css to

p {
padding-bottom: 10px;
margin:0px;
}

ck1999

 

[ck1999]

also if you want to center the text in the buttons on the left change this

#menu a {
display: block;
height: 55px;
padding: 1px 0 0 10px;
line-height:55px;
background: url('images/shortbutton.jpg') repeat-x;
text-decoration: none;
font-size: 1em;
font-style: italic;
color: #003333;
}

and then for contact resource change the <a
to <a style="line-height:27px;"

Hope this helps. I also agree with the earlier post about the dark blues and blacks ontop of each other.

ck1999

 

[Vragabond]

Hmmm, I really think you need to start reading. Both my posts and the articles you're given.

1. I don't know why you think the article on collapsing margin is so long if all you need from it is a sentence from the second paragraph. Let's see:

As for collapsing margins, I suggest you re-read the article.

I give you the article and ask you to re-read it after I see you haven't gotten anything out of it. All you get then is:

At it's core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one "collapses" to nothing.

which, as I said, is the first sentence of the second paragraph. At this point you decide you know everything about collapsing margins and start proving how your case is not it. However, if you read on:

Most people think of margin collapsing happening when one block level element follows another. However margins collapse whenever one margin comes into contact with an adjacent margin. This means that margins can also collapse when one element is contained within another.

Andy explains a situation that is exactly identical to yours and gives visual representations of it. Your <p> has a margin and is contained within your #main the margin of the <p> becomes the margin of the #main. And subsequently the margin of #content. Andy then explains, just like I mentioned to you, what you can do to prevent that from happening. However, you seemed to be too interested in that first sentence that you deemed everything else not important.

2. Where did you put those borders? Did you try the bottom padding on #main? What browser were you testing on? I tried my solution in FF and it worked perfectly. The #footer element plays no part in this, it is not involved.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

Ouch.

First of all, read it carefully both times. (You suggested it before). However it's not that clear to me. It seems summed up in the first paragraph. I also read up on it in the O'Reilly guide. It is, however, as he says, a head scratcher.

Here's my disconnect: I have too much margin. The collapsing margins as I understand it reduce the margin to the largest. I will figure it out. I think the example you mean is the one where he removes the borders from two divs (outer and contained) and the margins collapse to nothing.

Thanks for the tip on IE and the misplaced </div> which truly belongs at the end. IE still doesn't work with the tips section too long.

The 1px padding works.

 

[jlockley]

I am using Firefox, btw. Still trying to figure out why the padding works.

 

[Vragabond]

Ok, so let's see if we can make this any easier. I'll assume that you understand when margins of two sibling elements come together and the larger margin prevails and the smaller falls into it. This is seen on your page between the title and the first paragraph. The paragraph element has a certain top margin (by default) and the h2 element has a certain bottom margin (again, by default). The margin between the two elements is that of the paragraph (I believe) because that margin is larger.

Ok, let's get to the more difficult part. Nested elements. Let's assume this structure:

<div>
  <h1>Title</h1>
</div>

Now I have two elements. The content of these two elements would be bounded by padding first, then border and then margin. Now assume our padding is 0. So there is no padding splitting these two elements. Now further assume our borders are the elements are 0. So there's no border splitting the two elements either. Which means that the div's margin is touching the h1's margin, just like in the above example. The only difference is is that div's top margin is touching h1's top margin. And the same with bottom margins. So instead of alternating top-bottom margins touching, we have two top margins touching or two bottom margins touching. Now let's give our div a bottom margin of 20px (all other margins should remain at 0). That means that h1's bottom margin of 0 meets the div's bottom margin of 20px. So there is a 20px bottom margin below our div box. This is expected. And if we want to remove the space, we remove the bottom margin of the div.

Now we'll put the margin elsewhere. We'll put the margin on the h1. Now h1 has a 20px bottom margin which still touches the 0 bottom margin of a div (remember, there's nothing between these margins that would not make them touch). Ok, so collapsing margins says that when you have two margins touching each other, they will be joined (collapse into each other) and show only the larger margin. Between 0 and 20px, the larger is 20px, so 20px will show. At the bottom of the box again, because this is not the margin of the h1 anymore, it is the collapsed margins of h1 and div.

Now we put a 1px padding (or border) onto our div. h1 still has the bottom margin of 20px. However, now that 20px margin touches the 1px padding of the div and no longer the div's margin. That means the margins are not touching any more and there is no possibility of them collapsing into each other.

I hope this makes more sense. I don't think I can be any clearer.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[jlockley]

It does, and it concurs with what I think I already understood about collapsing margins. Spacial thought is not my strong point and I tend to make assumptions which are hard to escape in practice. I guess my confusion was more due to the question of why the H2 margin would not push the containing divs further down, but it appears that its margin div breaks out of the box created by wrapper and content.

Very clear explanation and very much appreciated. I don't think I would have figured it out on my own.

Thanks many times.