IE6 issue

This site is best viewed in a modern browser with JavaScript enabled.

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/image_assets/templates/default/djs_contentfooter.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. :o

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; }
[COLOR="Blue"]* html .content_repeater { height: 1%; }[/COLOR]
.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.

negrelja

sorry for the snake I accidentally jumped into this post by accident. I was in a hurry and actually thought I was on the main level when I originally posted. MY BAD! Good common sense with the "bottom border" though thanks!

Hardbyte

Centauri - you are a star!

This has been bugging me for days! Im not sure which part of the css you provided fixed it thou - I will had to float a few of them and put in the widths, but whatever you did works a treat!

Thank you so much!!