IE6 issue

[Hardbyte]

Hi, iv opened it up so there is access for now
http://hardbyte.com/djsdanceschool/

Iv got this problem where there is a weird padding/spacing at the bottom of the page (IE6 only) FF and IE7 is ok.

Any ideas? I though it was a padding/margin issue - you know how FF handles then differently to IE - but I just cant get rid of it in IE6.

Any help would be appreciated before I make the site FF&IE7 users only!

People should only use FF anyway... lol

[ryanbutler]

I can't get my local copy to work for some reason perfectly...but does this happen to cure the problem?

<!--[if lte IE 6]>
<style>
#content_footer{
	height:1%;	
}
</style>
<![endif]-->

Place it right before the closing </head> tag.

[Hardbyte]

What does that do? It crashes IE6

And when it doesnt crash - still no change.

[ryanbutler]

It gives "layout" to elements in IE6. Do you have bandwidth protection setup on your server? I have the correct paths and still can't get the images to view properly.

[Hardbyte]

No bandwidth protection as far as I know.

What you trying to do, mirror the site?

[ryanbutler]

Yeah.

[Hardbyte]

example of a path would be: http://hardbyte.com/djsdanceschool/i...tentfooter.jpg

[ryanbutler]

Hmmm...I got the local copy working...but I'm not sure on this one.

[Hardbyte]

if I open the black border one (sorry cant remember the class name "main_border" and "main_wrapper_centered") to 999px like I have done now - it works but then i get an extra right hand column in pink?

[ryanbutler]

Does all your math add up?

[negrelja]

Is it possible to make my DIV Height(.banner2 in this case) less than 20 px in IE6 without using Javascript. IE 6 is displaying my DIV with a minimum Height of 20px even when I have declared a lesser value in my CSS (refer to .banner2 below). Logic has failed me, damn IE 6.

HTML:

<div id="wrapper"> 

<div id="banner"><a href="#" class="logo"><img src="../images/fctimeslogo.gif" alt="FCTimes" width="161" height="46" border="0" ></a>

<div class="banner2"></div>

CSS:

#wrapper {
	width: 880px;
	background-color:#FFFFFF;
	text-align: left;
	border:1px 1px 1px 1px solid #CCCCCC;
	border-top:0px;
	
}
#banner {
	width: 100%;
	height: 71px;
	background-color:#FFFFFF;
}
.logo {
	margin-left: 12px;
	margin-top: 10px;
	float: left;
}
.banner2 {
	width:100%;
	height:7px;
	background-color:#A4300D;
}

[WebJoel]

You really should start your own thread and not hijack someone else's.

Anyway..

<div id="wrapper">

<div id="banner">
<a href="#" class="logo"><img src="../images/fctimeslogo.gif" alt="FCTimes" width="161" height="46" border="0" ></a>

<div class="banner2"></div>

The DIV "#banner" contains the un-closed div "#banner2", but what you are describing sounds typical of IE6 a.k.a. 'the problem child'. It incorrectly expands to contain the contents (if any).

-Why would you want a 7-px tall 'div' anyway? "20px" is the thickness of a scrollbar and you can't even put text in something that small without some serious reductions of padding and margins. This actually sounds like a presentational element, not a content element (it is there for looks only)?.

Presentational you might better use the dic #banner with a 7-px border-bottom:

#banner {
width: 100%;
height: 71px;
background-color:#FFFFFF;
border-bottom:7px solid #A4300D;
}

and be doing exactly the same thing, -but with less markup. If you require more 'space' above and below this border-bottom, to #banner add:

padding-bottom:10px; margin-bottom:10px;

[Hardbyte]

Yeah negrelja bugger off to your own post.

Hey ryanbutler; maths not being a strong point of mine anyway but Ill have a look - you think its a width or height issue?

Thanks for your help

[Hardbyte]

Iv set all the width's to 100% appart from the wrapper and set this too 796px, so all should now fit to the 796px - but will get the same black at the bottom of the page.

I really dont get it, everything is floated and it should just fit underneath.

If I take out the footer it does the same again with the next div in the list...

[Centauri]

Actually, it doesn't fit into 796px, nor does it fit into 976px which is probably what you meant to type - when you add up the left and right columns plus the centre colums and the outer borders you get 982px.....

All those floats and 100% widths are also a problem - most of those floats aren't required - let things flow naturally.

I did a few changes to some of the css in core.css file and it seems to work fine. Changes only are:

.main_wrapper_centered {margin:0 auto;  width: 982px; padding:0;}
.main_border {}
.main_header {height:145px;}
.topnavWrapper {height:81px; text-align:left;}
.navTabBarWrapper {height:30px; font-size:1.1em; font-weight:bold;}
.secondNavWrapper {height:21px;	padding-top:2px; font-size:0.9em; clear: both; }
.content_repeater {overflow: hidden; }
* html .content_repeater { height: 1%; }
.content_footer {height:75px; border:0px #00CC33 solid; margin:0; padding:0;}
.main_footer { height:52px;	border:0px #FFFF00 solid; clear: both; }

The blue highlighted part is an addition to ensure IE6 encloses the floats.