Some goofiness going on with IE 6

[jag5311]

Here is the link. am just trying some designs, and this is a 3 column Fluid style. The middle column contains an h2. For some reason, it won't show the background image to go with it, but it works on other browsers.

Then the paragraphs should have white backgrounds with a light grey border, but in the middle, it doesn't show up.

Any help?

Thanks
Bryan

p.s. I can't seem to get that right nav bar to be up with the others.

[BenANFA]

I have fixed a lot of your problems by doing the following

1. In the style for div#leftnav, changed margin: 10 0 0 10; to margin: 0px 0px 0px 10px;
2. In the style for div#rightnav, changed margin: 10px 20px 0px 0px; to margin: 0px 10px 0px 0px;
3. In the style for div#content h2 added position: relative; at the top
4. In the style for div#content p added position: relative; at the top

After these changes all that is wrong is that the right nav bar is a little low, I'm still working on that.

[BenANFA]

OK have managed to align the right nav as well now. The problem appears to be that the way you where using padding and margins on the different elements of the page was not standardised in anyway. This made finding the offending margin/padding (and that is all it was) hard to find. I have standardised paddings and margins, the new style code is:

<style type="text/css">
body, html {
	margin: 0px;
	padding: 0px;
}
#container
{
	width: 100%;
	margin: 0px;
	color: #333;
	position: relative;
	background-color: #F5F5F5;
}

#top
{
	width: 100%;
	background-image: url(images/gamecube_02.jpg);
	background-repeat: repeat;
	padding: 0px;
	height: 127px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}

#top h1
{
padding: 0px;
margin: 0px;
}

div#leftnav
{
float: left;
width: 130px;
margin: 20px 0px 0px 10px;
}

div#rightnav
{
	float: right;
	width: 130px;
	margin: 20px 10px 0px 0px;
}

#content
{
	margin-left: 200px;
	margin-right: 200px;
	margin-top: 20px;
	margin-bottom: 10px;
}
img.floatleft {
	/*float: left;*/
	position: absolute; left:0; top: 0;
	z-index: 200;
}
img.floatright {
	/*float: right;*/
	position: absolute; right: 0; top: 0;
	z-index:100;
}
 dt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	background-image: url(images/gamecube_06.jpg);
	background-repeat: repeat-x;
	padding-left: 5px;
	border: 1px solid #D8D5E1;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}
#footer
{
	clear: both;
	margin: 0;
	padding: 2px;
	color: #000000;
	background-color: #E4E4E4;
	border-top: 1px solid #CCCCCC;
	border-bottom-width: 1px;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
	text-align: center;
}
 dl {
	background-color: #E6E6E6;
	width: 128px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #D8D5E1;
	border-bottom-color: #D8D5E1;
	border-left-color: #D8D5E1;
	margin-left: 10px;
	margin-bottom: 20px;
	margin-top: 0px;
}
 dd {
	padding: 1px;
	margin: 0px;
	text-align: center;
}
a.even:link, a.even:visited {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	display: block;
	width: 100%;
	text-decoration: underline;
	background-color: #F3F3F3;
}
a.odd:link, a.odd:visited {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	display: block;
	width: 100%;
	text-decoration: underline;
}
 a.even:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #590288;
}
a.odd:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #590288;
	}
div#content h2 {
	position: relative;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #999999;
	text-decoration: none;
	background-image: url(images/gamecube_06.jpg);
	background-repeat: repeat-x;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 10px;
	border: 1px solid #D8D5E1;
	margin: 0px;
}
div#content p {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	letter-spacing: 1px;
	padding: 5px;
	margin: 0px;
	border-right: 1px solid #E0E0E0;
	border-bottom: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	border-top-style: none;
}
</style>

While tracking this problem I used the trick of adding the following style:

div, p, h1, h2, h3, h4 {border: 1px solid black;}

to the bottom of the style sheet so that I could see everying.

If you do that to the original code it is easy to see the no-standard padding and margins on the nav left and right divs.

[jag5311]

Thanks.

When you said standarized way of margins/padding, what did you mean by that?

[Lewis]

padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 10px;

why not:

padding: 2px 0 2px 10px;

[BenANFA]

What Lewis said is not what I meant, although that is the way I would decribe padding, however I always put units on my lengths even if they are 0 (in which case units are, strictly speaking, redundent) in order to avoid what you have done which is to accidentally miss off the units in leftnav margin.

Considering the positions of your left and right nav bars and looking at some of your original CSS

<style type="text/css">
#container
{
	width: 100%;
	margin: 0px;
	color: #333;
	position: relative;
	background-color: #F5F5F5;
}

div#leftnav
{
float: left;
width: 130px;
margin: 10 0 0 10;
}

div#rightnav
{
	float: right;
	width: 130px;
	margin: 10px 20px 0px 0px;
	padding: 1em;
}

 dl {
	background-color: #E6E6E6;
	width: 128px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #D8D5E1;
	border-bottom-color: #D8D5E1;
	border-left-color: #D8D5E1;
	margin-left: 10px;
	margin-bottom: 20px;
	margin-top: 10px;
}
</style>

The position of the dl in each nav bar is dependent on, the container padding, the nav bar margin and padding, the dl margin and padding. 2 of these are common the container and the dl. However the leftnav and right nav styles have differing values for margin and padding. If you want them to be opposite then they should be mirror images of each other,
ie
same top margin
same bottom margin
same top padding
same bottom padding
left margin of 1 = right margin of other and vis versa
left paffing of 1 = right padding of other and vis versa

For your 2 styles the margins were different and the paddings were too. One of the main things I did to get the positioning right was write the margins and padding in a standard way (in this case all padding 0 and positioned using the margins) and make sure that the values were correct according to the list above, top margins equal and left margin of leftnav = right margin of rightnav.

Additionally a suspect that your dl border could be written as

	border-width: 1px;
	border-color: #D8D5E1;
	border-style: none solid solid solid;

Which I think is easier to read than what you have. Actually one of my minor gripes with CSS the the shear number of different ways it is possible to set the border to the same thing.

[jag5311]

*cough* Dreamweaver MX *cough*

That is why I get some of the output I do. I am trying to slowly hand change them, but its so easy to point and click.

[jag5311]

any reason why in Mozilla, Opera, and Firebird the right navigation hugs the right side and doesn't use the 10px of margin there is?

[jag5311]

Alright, here is the latest with the changes
http://www.btkdesigns.com/gamecube

It appears good in all the browsers from my standpoint, but haven't seen it in older ones.