Div's overlap in Firefox, Netscape, look great in IE

dave-s · 03-07-2005, 02:37 AM

I am new to the board and new to css for layouts. I spent considerable time creating a page that I thought looked great in IE, only to find it looks nothing like what it should in Netscape or Firefox.

This is the page:
http://www.findgolfpro.com/test.html
and the css for that page is:
http://www.findgolfpro.com/products.css

Please ignore the broken images - this is just for testing and debugging purposes. In IE the container div acts like I thought it should, and you can see the border for that container goes all the way to the bottom of the page. In the other browsers is stops near the top of the page and everything else just spills out underneath it. Also, I had set specific heights for the columns which worked great in IE - if the content was too big, then the columns just got longer, but in NS and FF the content spilled out of the div's. So, I changed the height from a specific height to a min-height which now works great in NS and FF but as you can see in IE the min-height is not working.

Sorry for making my first post here so long winded... I have been searching for answers to this all day with no success.

Any help would be greatly appreciated!

_Aerospace_Eng_ · 03-07-2005, 03:32 AM

the gecko browsers need the height applied to the html attribute also
change this

Code:

body {
	background-color: #FFFFFF;
	margin: 0px;
	color: #000000;
	height: 100%;
	}

to this

Code:

html {height:100%;}
        body {
	background-color: #FFFFFF;
	margin: 0px;
	color: #000000;
	height: 100%;
	}

and as far as min height, well IE doesn't like it, when you float anything or use absolute positioning like you are u need to use defined heights

dave-s · 03-07-2005, 04:30 AM

Ok thanks. If I use defined heights though, then the text spills out in Netscape and Firefox... is there a way to do both?

Also, the body and div height set at 100% - is that necessary? I didn't have that before in the css and it still worked great in IE (the container div grew as the content inside it grew). I just put it in to see if it fixed the problem in Netscape. Do div's with nested div's inside not grow so that the nested divs and content fit inside? It looks like they do in IE, but not the other browsers? Is there a different way I should be doing it so that the "container" div just grows depending on what is inside? I hope what I am asking is making sense....

Thanks!

Dave

dave-s · 03-07-2005, 04:15 PM

I played around with setting html to 100% and it looks a bit better in netscape but it's still not right. I added a couple more divs inside the container to illustrate my problem better.

http://www.findgolfpro.com/test.html

It does exactly what I want in IE but if you scroll down in netscape you'll see the borders don't expand to contain all the divs. Also it seems to push the 4 contained divs up higher somehow... I might have to go back to tables.

Does anyone have any suggestions as to what I'm doing wrong? Could it be because the div's are floating?

Thanks everyone!

evilregis · 03-07-2005, 05:00 PM

I haven't checked the page yet, but it sounds like you need to add a clearing div.

<div style="clear: both;"></div>

Add that before the end of the div that is holding the floating divs and you should be okay.

I will check the page a little later. No time right now. Hope that steers you in the right direction.

dave-s · 03-07-2005, 06:03 PM

Thanks for the tip. I tried it out but unfortunately it didn't change anything in Netscape or Firefox.

Badman3k · 03-07-2005, 06:13 PM

Try this:

Code:

body, html {
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;
}

[...]

#container {
	position: relative;
	border-left: 3px #000000 solid;
	border-right: 3px #000000 solid;
	border-bottom: 3px #000000 solid;
        border-top: 0px #000000 solid;
	width: 750px;
	height: 100%;
	margin: 0 auto;
	padding-bottom: 5px;
	}

I think that that'll sort it for you.

dave-s · 03-07-2005, 09:34 PM

Thanks

I already had all that in the css except the 0px top border and the html width. Tried the code exactly as you specified and that didn't change anything in netscape either.

Any other suggestions?

Badman3k · 03-07-2005, 09:58 PM

Have you tried viewing the page with an image where it should be?

I think the problem is the fact that the image isn't there and therefore the page isn't rendering properly.
However i have found this fix for it as it stands at the moment. Add the following code to your CSS:

Code:

#pageheader {
	padding: 0;
	border: none;
	margin: 0;
}


#pageheader h1 {
	margin-top: 0;
	padding-top: 0;
}

But really there should be an image. If you don't want the header butt up against the image box, then change the value of the padding-top in the #pageheader h1 section and this'll move it down from the top

Hope this helps the problem.

dave-s · 03-08-2005, 02:37 PM

Ah yes, thanks. I was so wrapped up in fixing the container border problem....

http://www.findgolfpro.com/test.html

So now it looks better in Netscape and Firefox, but I still have the original problem of that container not expanding to fit all nested divs inside. It's 100% height of the window, but if you scroll down (at least in 1024x768 or lower) the content still spills out underneath.

Am I stuck with defining a set height for the container and changing it everytime the content inside it changes?

Thanks everyone for all your help!

Badman3k · 03-08-2005, 03:05 PM

Yeah you need to replace the container css with the following (I think) although I haven't tested this yet.

Code:

#container {
	position: relative;
	border-left: 3px #000000 solid;
	border-right: 3px #000000 solid;
	border-bottom: 3px #000000 solid;
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 5px;
	}

However if your content is less than the height of the screen, then the border won't expand to the bottom. Not sure whether this is a problem for you.

dave-s · 03-08-2005, 04:39 PM

WOOHOO! That did it, thanks! Now to get started on regrowing all the hair I pulled out over the past few days!

Thanks again for all the help!

mob4u1 · 11-20-2007, 04:31 PM

i have a similar problem. the site looks fine in ie... but in firefox... have a look:

http://www.carparkcruisers.co.uk/techtalk-allloys.html

CSS:

http://www.carparkcruisers.co.uk/template/cpc/style.css
http://www.carparkcruisers.co.uk/tem...tabcontent.css

any ideas?

Daniel

Badman3k · 11-20-2007, 05:33 PM

mob4ui,

I've had a look at your code and think I've narrowed down the search. It's to do with the tab menu you have and the JavaScript that runs it.

As the html code hides the first 'pages' text and only leaves "Chrome" viewable, the parent divs are sized to match that. As this is one of the smaller divs when you change tab the text overflows the div, and the parent divs are not resized.

Edit: The solution to the problem as far as I can tell is to search your code for the following text:

Code:

<div style="border-top: 5px solid rgb(117, 66, 66); padding: 15px 0px 5px; width: 100%; height: 250px; background-color: rgb(255, 255, 255);">

and replace it with:

Code:

<div style="border-top: 5px solid rgb(117, 66, 66); padding: 15px 0px 5px; width: 100%; height: auto; background-color: rgb(255, 255, 255);">

On a slight aside, you may want to do some house keeping on your code, it's rather difficult to read and understand and tidying things up would help you and us debug it for you.

Apostropartheid · 11-20-2007, 06:26 PM

Yeah....doesn't look great in IE7