Strange behavior in firefox, please help

Which borders are missing specifically?

Well, I have a wrapper div that has border on all sides but only the top border shows (if I remember correctly). Inside this wrapper I have a "contents" and "navarea" div's. I have filled the wrapper with an ugly background color while positioning, and like the page is now lower right corner still has this color, but in FireFox it doesn't.. and the footer is placed there in stead! Very strange..

My contents div are floated to the left, but if i remove float:left from #contents the problem is gone in FireFox, but then IE f**ks up.

Any ideas?

-GraveJester

The simple answer is that because you've floated the main two divs inside the wrapper div (navarea and content), the wrapper div will not auto-adjust it's height to the height of it's child divs. You can test this by adding a temporary height to your wrapper div... you'll noticed the border appear.

You probably can do away with the wrapper div, and use the borders of the two other divs (minus the touching edges) to make the one border. Since your using a fixed width for the two, it shouldn't be a problem.

Ok, I see what you mean.. but why is it just FireFox that behaves this way? If I skip using the wrapper div, how do I center the content and navarea divs?

What os/browser do you use? is the page ok for you btw?

-gravejester

Oops, yes, you can put the wrapper div back for centring purposes, just add the border to the other divs as I've mentioned, and not to the wrapper. Also, remember if for example, your wrapper is 800px wide... and the other two divs inside are say 600px and 200px respectively, adding borders to the two divs within, will make their widths 601px and 201px. So either change the wrapper width accordingly, or reduce the child divs' width (to 599px and 199px for example). (Presuming you are putting the border only on the one side of each contained div (i.e. content border on the left, and nav border to the right).

Site looks the same by the way.

I should also add, if your going to use a set height for the wrapper, this will allow you to add a border to it after all (I presumed that you'd want it to expand with the content).

Ok, I have done as you say, and the borders are somewhat correct now. I have uploaded the newest version of the page.. but I still have a problem in FireFox..

Check out this: http://www.bnry.net/problem.html

It's as you say, the wrapper div won't automaticly take it's child heights.. but in opera and ie this works.. is there a workaround for this??

-gravejester

Yes, I want it to expand with the content

Ok, I think I have found out WHAT the problem is.. firefox won't display the wrapper div's background-color.. now, HOW do I fix this??

Anyone?

-gravejester

Yep, you're right. The fix seems a bit silly, but it works. If I had more time, you could make it a bit more streamlined, but here goes...

What you have to do:

1. Create a div (called something like div#parent).
2. Wrap this parent div around the wrapper div.
3. Give the parent div the following CSS declaration:

div#parent
	{
	width: 680px;
	margin: auto;
	}

4. Now replace the wrapper div CSS declarations as below:

div#wrapper 
	{
	float: left;
	margin: auto;
	width: 680px;
	background: #333;
	}

This should now work. When the wrapper div is floated, it expands as you wish. However, if floated, it will disregard the auto margin. So, you have to contain it in the parent, in order to centralise it.

As I mentioned, you could improve upon the code, by making the wrapper div, the navarea div. But, that's if you want to simply reduce and streamline your code.

It worked! Thanks! You've really helped me out.. I almost gave up the whole design..

Now to figure out how to handle the cases where the contents height is less than the navarea height

Doesn't min-height work on IE?

-gravejester

Hi

IE uses height to be min-height (i.e. height:200px means min-height:200px to IE). Safari also does this.

So, declare

.container {
height:200px;
min-height:200px;
}

then hack mozilla and opera etc to make height:auto

.contain\65 r{height:auto}
/* the gap is a tab! and the escape code is an e */

unfortunately, the above swiutches height off for IE, so
switch the height back on in IE:

* html .container{height:200px}

Hard work, all this hacking.

Trevor

Thanks, I will try that. In the meantime I have another problem.

I have a paddin of 10px on my wrapper div, but when I hover my mouse over the menu in the navarea, the bottom-padding becomes 20px.. or so it seems at least.

Only happens in IE btw.. anyone?

-gravejester

http://www.bnry.net/test3.php

Still having problem with the bottom padding doubling when mouse moving over the menu. Found out that if I comment out the background-color in the a:hover the problem goes away.. there must be someone who can help me with this? At least point me in the right direction.

BTW. Only does this in IE as far as I can tell

- gravejester

Forget it, I scrapped the padding and used borders instead.. it works now