mystery gap in IE6 (woo)

croatiankid · 12-05-2006, 09:39 PM

http://www.croatiankid.com/blog/ is the url. here's the complete css. here's the problem: it concerns the left column. in Firefox, the light(er) green square that the search form is in pretty much hugs the header; I like that. in IE6, there is a significant gap. I can't find what's causing it. if it's a margin, padding, i don't know. I don't even know why it would be caused because all that's there is divs, and they don't have paddings/margins. would another pair of eyes please be so kind as to try to find it? I've sivved through the code a couple of times, and can't find it.

Code:

body  {
	background:url(images/bbg.jpg) left top repeat;
	color:#555555;
	font-size:14px; /*changed from 11px*/
	font-family:Arial, Tahoma; /*changed from Arial, Tahoma*/
	padding:0px 0px 0px 0px; 
	margin:0px 0px 0px 0px; 
}
h4 {
	font-size:16px;
	color:#AB4032;
	font-family:Tahoma, arial, Times, serif;
	font-weight:bold;
	padding-left:0px;
}
#single
{
	font-size:16px;
	color:#AB4032;
	font-family:Tahoma, arial, Times, serif;
	font-weight:bold;
	padding-left:0px;
line-height:normal;
}
h3, h2 {display:inline;font-weight:normal;}
h3
{
	font-size:11px;
	line-height:14px;
}
h2 {
	padding-left:25px;
	font-size:11px;
	font-family:tahoma, arial, Microsoft Sans Serif;
	color:#443F3C;
	padding-top:0px;
	margin:0px 0px 0px 0px;
}
.content_txt2 {
	padding:15px 15px 20px 15px;
	line-height:14px;
	color:#555555;
}
.content_txt2 h4 {
	font-size:16px;
	color:#AB4032;
	font-family:Tahoma, arial, Times, serif;
	font-weight:bold;
	padding-left:0px;
}
.content_txt2 a {
	color:#AB4032;
	text-decoration:underline;
}
.content_txt2 a:hover {
	text-decoration:none
}

a {
	color:#AB4032;
	text-decoration:underline;
}
a:hover {
	text-decoration:none
}
.postmetadataalt {
	font-size:9px;
}

.table_main {
	vertical-align:top;
	width:670px;
	height:100%;
}
.header {
	background:url(images/header.jpg) left top no-repeat;
	vertical-align:top;
	width:670px;
	height:135px;
}
.co_name {
	padding:38px 0px 0px 25px;
margin:0px;
}
.co_name a {
	font-size:42px;
	color:#ffffff;
	text-decoration:none;
	font-family:times new roman, arial, tahoma;
	font-weight:bold;
}

.main {
	vertical-align:top;
	width:670px;
	height:100%;
	background:url(images/main_bg.jpg) left top repeat;
}
.table {
	width:670px; 
	height:100%;
	display:table;
}
.table_row {
	height:100%;
	display:table-row;
	width:670px;
}
.left {
	height:100%;
	vertical-align:top;
	display:table-cell;
	width:185px;
}
.left_main {
	vertical-align:top;
	width:173px;
	height:100%;
	margin:0px 2px 0px 1px;/*0507*/
	padding:0px 0px 0px 0px;
}
.left_2 {
	width:173px; 
	vertical-align:top;
	background-color:#3B4741;
}
.search {
	 padding:13px 5px 22px 15px;
	 color:#ffffff;
	 font-size:11px;
	 font-family:Tahoma, arial, verdana, courier;
}
.search strong {
	 color:#ffffff;
}
.form {
	font-size:11px;
	color:#555555;
	font-family:Tahoma, arial, verdana, courier;
	width:106px;
	height:18px;
	padding:0px 0px 0px 5px;
	margin:0px 6px 0px 0px;
	vertical-align:top;
}
.left_3 {
	width:173px; 
	vertical-align:top;
}
.sub_left {
	 padding:18px 5px 15px 15px;
}
.left_header {
	 color:#ffffff;
	 font-size:11px;
	 font-family:Tahoma, arial, verdana, courier;
}
.left_header strong {
	 color:#ffffff;
}
.sub_left ul {
	padding:0px 0px 0px 0px; 
	margin:0px 0px 0px 0px;
}
.sub_left li {
	list-style:none;
	padding:0px 0px 0px 21px;
	margin:0px 0px 0px 0px;
	background:url(images/li_bg.jpg) left bottom no-repeat;
	vertical-align:top;
	width:131px;
	height:15px;
	line-height:15px;
}
.sub_left ul li a {
	text-decoration:none;
	font-size:11px;
	color:#B9D0C2;
	font-family:tahoma, arial, times new roman;
	padding:0px 0px 0px 0px;
}
.sub_left li a:hover {
	text-decoration:underline;
}
.right {
	height:100%;
	vertical-align:top;
	display:table-cell;
	width:485px;
}
.right_main {
	vertical-align:top;
	width:463px;
	height:100%;
	margin:0px 12px 0px 10px;
	padding:0px 0px 0px 0px;
min-height:1500px;
}
.right_2 {
	width:463px; 
	vertical-align:top;
	background-color:#EFEFEF;
}
.content_head {
	width:463px; 
	height:100%;
	display:table;
}
.content_headrow {
	height:100%;
	display:table-row;
	width:463px;
}
.content_author {
	height:100%;
	vertical-align:top;
	display:table-cell;
	width:373px;
}
.head_txt {
	padding:9px 5px 7px 15px;
	color:#757373; 
	font-size:11px;
	line-height:14px;
	font-family:tahoma, arial, Microsoft Sans Serif;
}
.head_txt a {
	color:#AB4032; 
	font-size:11px;
	font-family:tahoma, arial, Microsoft Sans Serif;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
}
.head_txt a:hover {
	text-decoration:underline;
}
.content_date {
	height:100%;
	vertical-align:top;
	display:table-cell;
	width:90px;
}
.date_txt {
	padding:9px 11px 5px 5px;
	color:#240417; 
	font-size:9px;
	font-family:tahoma, arial, Microsoft Sans Serif;
	text-align:right;
}
*html .content_author {
	float:left;
}
*html .content_date {
	float:left;
}
.right_3 {
	width:463px; 
	vertical-align:top;
}
.content_txt {
	padding:15px 15px 20px 15px;
	line-height:14px;
font-size:14px; /*changed from 11px*/
	font-family:Arial, Tahoma; /*changed from Arial, Tahoma*/
	vertical-align:top;
	line-height:20px; /*changed from 14px*/
}
.content_txt strong {
	color:#555555;
}
.content_txt a {
	font-size:14px; 
	text-decoration:underline;
	color:#555555;
	font-family:Tahoma, arial, serif;
}
.content_txt a:hover {
	text-decoration:none;
}
.content_more {
	padding:0px 10px 20px 20px;
	text-align:right;
	color:#4F4F4F;
	font-size:11px; 
	font-family:Tahoma, arial, serif;
}
.content_more b {
	color:#4F4F4F;
}
.content_more b a {
	text-decoration:underline;
	color:#4F4F4F;
}
.content_more b a:hover {
	text-decoration:none;
}
.content {
	width:463px; 
	height:100%;
	display:table;
}
.content_row {
	height:100%;
	display:table-row;
	width:463px;
}
.content_pict {
	height:100%;
	vertical-align:top;
	display:table-cell;
	width:150px;
}
.content_pictsub {
	padding:0px 0px 0px 15px;
}
.content_menu {
	height:100%;
	vertical-align:top;
	display:table-cell;
	width:313px;
}
.content_menusub {
	padding:5px 20px 5px 8px;
}
*html .content_pict {
	float:left;
}
*html .content_menu {
	float:left;
}
.content_menu ul {
	padding:0px 0px 0px 0px; 
	margin:0px 0px 0px 0px;
}
.content_menu li {
	list-style:none;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url(images/q1.jpg) left center no-repeat;
	vertical-align:top;
	line-height:20px;
}
.content_menu ul li a {
	text-decoration:underline;
	font-size:11px;
	color:#AB4032;
	font-family:tahoma, arial, times new roman;
	padding:0px 0px 0px 16px;
}
.content_menu li a:hover {
	text-decoration:none;
}
*html .left {
	float:left;
}
*html .right {
	float:left;
}
.footer {
	background:url(images/footer.jpg) left top no-repeat;
	vertical-align:top;
	width:670px;
	height:50px;
}
.footer_txt {
	 padding:12px 3px 0px 0px;
	 color:#ffffff;
	 font-size:11px;
	 font-family:tahoma, Arial;
	 text-align:right;
}
.footer_txt a {
	color:#ffffff;
	text-decoration:underline;
}
.footer_txt a:hover {
	text-decoration:none;
}
ul {
	padding:0px 0px 0px 0px; 
	margin:0px 0px 0px 0px;
}
li {
	list-style:none;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url(images/q1.jpg) left center no-repeat;
	vertical-align:top;
	line-height:20px;
}
ul li a {
	text-decoration:underline;
	font-size:11px;
	color:#AB4032;
	font-family:tahoma, arial, times new roman;
	padding:0px 0px 0px 16px;
}
li a:hover {
	text-decoration:none;
}

ps I know that most of the markup is a mess, you don't need to mention it. when I have more time, perhaps over the winter, I will re-code the whole thing from scratch, because it seems to me a few divs are unneccessary, and need to work on headings (that's what I was doing when I noticed this gap).

Excavator · 12-05-2006, 10:39 PM

Hello croatiankid,
It seems a little unecessarily complicated... just for an example, to get to the Right column that is dropping in IE7 I had to goto
body/table_main/main/table/table_row/right/right_main and then when I got there I find that right_main is the same as it's container div right except for one selector.
Seems like everything is enclosed by at least 3 divs.

Makes debugging very difficult to say the least...

I only have IE6 on my wifes machine so I have to walk over to her office to see how the search box drops... I *think* that it's caused by the line

Code:

<br style="line-height:15px "/>

somewhere in div search...
line height could cause that for sure.
I could be wrong though.

croatiankid · 12-06-2006, 10:35 AM

nah it's not that. lol it's okay to say it's a lot unneccessarily complicated, I know it is. but like I said, i'll recode most of it from scratch over the winter breaks

croatiankid · 12-06-2006, 10:45 AM

Forget it it's not that big of a deal. Now I realize I don't want anybody to have to go through all of this (partially unneccessary) code.