Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts

    mystery gap in IE6 (woo)

    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).
    Last edited by croatiankid; 12-05-2006 at 09:56 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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
    Last edited by croatiankid; 12-06-2006 at 10:42 AM.

  • #4
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •