15 replies [Last post]
GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Hi, I'm just in the site-design process, but I have come across a strange problem, and need your help folks!

As far as I can tell, it renderes the same in IE and Opera, but in FireFox strange things happens.. some of the borders are lost for instance..

Site: http://www.bnry.net/test3.php
CSS: http://www.bnry.net/test3.css

Thanks,

GraveJester

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Strange behavior in firefox, please help

Which borders are missing specifically?

The next sentence is true. The previous sentence is false. Discuss...

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Strange behavior in firefox, please help

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.

The next sentence is true. The previous sentence is false. Discuss...

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Strange behavior in firefox, please help

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.

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Strange behavior in firefox, please help

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).

The next sentence is true. The previous sentence is false. Discuss...

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

Yes, I want it to expand with the content Smile

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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

co2
co2's picture
Offline
Leader
UK
Last seen: 11 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Strange behavior in firefox, please help

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.

The next sentence is true. The previous sentence is false. Discuss...

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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

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

Doesn't min-height work on IE?

-gravejester

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Strange behavior in firefox, please help

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

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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

GraveJester
Offline
newbie
Norway
Last seen: 15 years 37 weeks ago
Norway
Joined: 2004-03-21
Posts: 10
Points: 0

Strange behavior in firefox, please help

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