CSS - Get Rid Of Gaps?

Hi,

I looked on your forum trying to find the answer it may be I don't know the correct term. If so, please forgive me.

I am trying to do some changes to my site and I have existing tables and wanted to put in a background color in a td. The code in question is about 14 lines of code down.

Here is the new look and feel page http://www.test222.whsites.net/home.php

Look at the left hand column near the top you will see the word "SEARCH" bordered in green. There is a 2-3 pixel gap between the end of the border around SEARCH and the border around the navigation bar. That is what I want to get rid of. Can anyone give me some direction as to why that is doing that. I want to do that on all the headings if I can get rid of the gap.

Also, the code below has gaps where other tables are located. Due to space considertations I shortened the code.

Thanks,

Randal

Just look for the CSS categoryborder - Here is my code:

Code:

  <table width="150" class="tableborder" bgcolor="#FFFFFF" >
  <tr>
    <td width="148">
	</td>
  </tr>

******************* This is my problem ********************

  <tr bordercolor="#99CC99">
    <td valign="top" class="categoryborder"><center>
SEARCH
    </center></td>
  </tr>

*********************************************************
  <tr bordercolor="#99CC99">
    <td valign="top">      <table width="147" border=0 align="center">
        <TR>
          <Td width="146" align=center>
<FORM METHOD=GET ACTION="/isearch2/index.php/">
  <table border=0>

  <TR><td>
        <input maxLength="255" name=s size=10 value="">
      <input type=submit value="Go">
      <input type="hidden" name="action" value="search"> </td> </TR>
</TABLE>
</FORM>
 

          </Td>
        </TR>
    </TABLE></td>
  </tr><tr>
       <td valign="top" bordercolor="#006633" border="1" bgcolor="#FFFF99"><center>
         <span class="temp_body_bold">CLEANSING</SPAN>
    </center></td>
     </tr>
     <tr>
       <td valign="top"><div align="left">

       </div></td>
     </tr>
  <tr>
    <td valign="top" bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">BUSINESS OPPORTUNITIES</SPAN> 
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">
      <div align="left">

                  
        
    </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99">	 <center>
      <span class="temp_body_bold">100% ESSENTIAL OILS</span>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">      
</td>
  </tr>
  
     <tr>
       <td valign="top" bgcolor="#FFFF99"><center>
         <span class="temp_body_bold">FREE NEWSLETTER</SPAN>
       </center></td>
     </tr>
     <tr>
    <td valign="top"><center>
          <span class="temp_body_bold"><b>Health
          Tip & Weekly Specials</b></span>
        </center>
        <form name="" method="post" action="http://www.thefrugallife.com/12all/box.php">

        </form>
    </td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">WEIGHT LOSS </SPAN>
    </center></td><tr><td valign="top">
	  <div align="left">

      </div></td>
      </tr>
  
    <tr>
      <td valign="top" bgcolor="#FFFF99"><center>
        <span class="temp_body_bold">SPIRITUAL HEALTH</SPAN> 
      </center></td>
    </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF"><center>
        <div align="left">

          
        </div>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">FOR YOU </SPAN>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">

    </td>
  </tr> 
  <tr>
    <td valign="top" bgcolor="#FFFF99" ><center>
      <span class="temp_body_bold">PETS</span>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF" ><center>
      <div align="left">
        
        
        </div>
    </center>      </td>
  </tr>
  <tr>
    <td bgcolor="#FFFF99">	 <center>
      <span class="temp_body_bold">VISIT OUR OTHER SITES </span>
    </center></td>
  </tr>
  <tr>
    <td valign="top" bgcolor="#FFFFFF">      
      </td>
  </tr>
	
	
	
		
		
		
		<tr>
    <td valign="top" bgcolor="#FFFF99"><center>
      <span class="temp_body_bold">SHOP</span>
    </center></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF" align="center">
      <span class="temp_body_bold"><a href="http://www.theherbsplace.com/Online_Catalog_sp_59.html">Online
      Catalog</a></span>
     
  </td>
  </tr>
 </table>

Here is the CSS code:

Code:

.categoryborder {
position: relative;
left: 10px;
background-color:#FFFF99;
padding:0px;
font-family: "Arial";
	font-size: 11px;
	color: #000000;
	font-weight: bold;
}

.tableborder {
	border: 1px solid #006633;
	padding:0px;
}

I've been trying to make this layout for about 5 hours now and i'm about to give up and just use tables. The problem is that everytime i make it work in firefox, it ****s up in IE. I was able to fix the gaps in firefox by using a negative margin but no luck in IE. I figure i'm not the first person to experience this so i searched for solutiosn but all i got was solutions for the list problems. I would really appreciate any help
CSS(it contains my various attempts at fixing it)
Code:

 
#container
{
width:806px;
min-height:610px;
border-color: #666666;
border-style: solid;
border-width:3px;
z-index: 1;
margin: 0pt;
padding: 0pt;

}
#left
{
min-height:586px;
width:130px;
padding-right: 0pt;
margin-left: 0pt;
border:none;
float:left;
display: inline;
}
#menu
{
background-color: #eeeeee;
width:130px;
height:85px;
vertical-align: top;
display: none;
}
#logo
{
width:673px;
height:73px;
position: relative;
background-color:#ffffff;
display: block;
float:right;
}
#top_bar
{
width:673px;
height:50px;
background-color: #666666;
position:relative;
boder-width:0px;
display: inline;
float:right;
vertical-align: top;
}
#divider
{
width:673px;
height:24px;
background-image: url("images/divider.jpg");
background-repeat: repeat-x;
position: relative;
margin-left:-5px;
float:right;
}
#content
{
width:668px;
min-height:300px;
float:right;
}
#bot_bar
{
width:668px;
height:24px;
background-image: url("images/bbarbg.jpg");
float:right;
display: block;


}
#body_bg
{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -1;
}

html code(everythin inside body)
Code:

<body background="images/bg.jpg" bgcolor="#FFFFFF" style="background-repeat: repeat-x">
<div id="container">
	<div id="left">
		<img src="images/main_02.jpg" width="130" height="125" alt="">
		<div id="menu"><img src="images/main_09.jpg" width="130" height="20" alt="" vspace="0"><img src="images/main_10.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_12.jpg" width="130" height="23" alt=""vspace="0"><img src="images/main_13.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_14.jpg" width="130" height="20" alt=""vspace="0"></div>
	<img src="images/main_15.jpg" width="130" height="35" alt="" onclick="tongle()">
	</div>
	<div id="top_bar"></div>
	<div id="logo">
		<img src="images/main_06.jpg" width="668" height="73" alt="">
	</div>
	<div id="divider">
	</div>
	<div id="content">
	ds
	
							<p>ds</p>
							<p>s</p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
							<p></p>
						</div>
	<div id="bot_bar">dasdsad</div>	
		</div>
	</body>

http://67.177.129.17/BrianRoyer/xhtml%20compliant/

Why are their gaps between the logo, navigation row, and content area only in firefox?

/ssi/style.css for stylesheet



Thanks guys.

In IE6 (only) my price tag images have gaps. I have attached a screen shot of my homepage in IE6.

{well can't add an image because I cannot post my url}

Here is the code:

#switcher .active { margin-top: 6px; }

#switcher a.product { position: relative; display: block; }
#switcher a.product span.tag { color: #ffffff; font-size: 22px; position: absolute; top: 5px; left: -23px; display: block; background: url(images/featured-small-tag.png) no-repeat bottom right; padding-right: 11px; }

#switcher a.product span.tag span { display: block; background: url(images/featured-small-tag.png) no-repeat; padding-left: 9px; height:36px; padding-top: 9px; }

Your help would be greatly appreciated.

Hi,

I am trying to create a dropdown menu at present but for some reason there is a large gap between each row of data on this menu. I have tried everything but cannot work out how to remove these gaps.

Any help greatly appriciated.

Thanks,
David

Argh! I want to have a little icon as a link with a caption under it.
It should be a no brainer.
Like this:

PHP Code:
<a class="a" style="line-height: normal;" href="http://www.oregonetail.com/etail.html"><img src="/images/heart_innovation_icon.jpg" height="60" width="39" alt="heart innovation poster" border="0" />E-tail Neighbors</a> 





Here's the thing, there's a GAP between the graphic and the caption, and if the caption has to go an extra line because of the width constraint of the <div> that this is in, there's a huge GAP between the lines.

I want
the caption BUTT UP against the bottom of the picture and if the caption wraps, I want the second line of it BUTT UP against the first one NO GAP. I've been twiddling around with line-height but NOTHING I DO alters this in the slightest.

BTW the "a" class is nothing but font-size: .75em
my next test is to take that out and see if that helps, but I don't have a clue what is the root cause of this. This should be so ffing basic!!!
Removing the "a" class didn't work.

Here is a little context:

Code:

<div>
<div style="width:88px; float:left" >
<a href="https://estore.villageprofile.com/itemdetail.cfm?nItemid=546&viewby=exhibit&nexhibitID=2&subview=37"
target="_blank">
<img src="/images/corv_ebook_cover.jpg" style="width:88px; height:100px" border="0" /> 
<span  class="a"  style='line-height: .5;'>FREE Town Guide</span></a> 
</div> 
<div style="float: left; width:50px;">
<a href="http://www.corvallisiba.org"><img src="/images/ciba_tiny.jpg" height="33"; width="50" alt="ciba logo" border="0" /> 
<span   style='line-height: .5;'>CIBA Member</span></a> 
</div>

On one of them I took the span out in case *THAT* was causing it and applied the styles to the "<a" tagged item as in the first exmple. NOTHING changed.

PLEASE HELP!

The "on" tab of my menu system displays an odd pixel or so gap on both sides of the tab where I want it to intersect with the border of the navigation bar below it. I am unsure why it is there or how to fix it.... any help is appreciated, and a picture of the issue is attached, along with the 3 needed image files that will replicated the issue.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
@import "menu.css";

* {
  margin: 0;
  padding: 0;
}

body {
  margin:0;
  padding:0;
  text-align: center; /* IE5/Win fix */  
}

#wrapper {
  width:750px;
  height:100%;
  margin:0 auto 0 auto;
  border:1px solid green;
  text-align: left;
}

  #top {
   width:750px;
   height:60px;
   padding:5px 1px 0 3px;
  }

		#logohead {
		  width:370px;
		  height:60px;
		  position:absolute;
		  left:157px;
		  top:17px;
		  /*float:left;*/
		  background-image:url(../images/ricochetlogo.gif);
		  background-repeat:no-repeat;
		  background-position:bottom left;
		  z-index:5000;
		 }
		
		#toplinks {
		  height:60px;
		  width:365px;
		  margin-left:380px;
		  font-family:Verdana, Arial, Helvetica, sans-serif;
		  font-size:11px;
		  color:#666666;
		}
  
    #midbanner {
     width:auto;
     height:170px;
     border:1px solid red;
     position:relative;
    }
    
	#midblock {
	 width:auto;
     height:45px;
     position:relative;
	 background-color:#6292BB;
	 margin:1px 0 0 0;
	}
	
    #bottomcontent {
     width:auto;
     height:auto;
    /* border:1px solid #990; */
    }
	
		#leftnavbox {
		
		}
	
		#leftboxes {
		width:185px;
		height:auto;
		padding:5px 5px 0 5px;
		float:left;
		border:1px solid gray;
		}
		
			.leftbox, .leftboxBottom {
			height:80px;
			width:98%;
			border:1px solid #8D8D8D;
			background-image:url(../images/leftboxstrip.gif);
			background-repeat:no-repeat;
			background-position:top;
			color:#334C99;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:11px;
			font-weight:bold;
			padding-top:2px;
			}
			
			.leftbox{
			margin-bottom:10px;
			}
		
		#rightboxes {
		width:535px;
		padding:5px 0 0 0;
		margin-left:205px;
		border:1px solid pink;
		}
			.rightbox1, .rightbox2, .rightbox3 {
			height:176px;
			width:165px;
			border:1px solid blue;
			background-image:url(../images/teststip.gif);
			background-repeat:no-repeat;
			background-position:top;
			color:#ffffff;
			font-weight:bold;
			}
			
			.rightbox1 {
			float:left;
			}
			
			.rightbox2 {
			margin-left:183px;
			}
			
			.rightbox3 {
			float:right;
			}
		
		#bottombox {
			height:80px;
			width:535px;
			margin-top:10px;
			border:1px solid orange;
			}
		
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
  width:750.5px;
  wid\th:750px;
  }
/* end hide */

/* BEGIN MENU */
#nav,#nav li,#nav li ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  
#nav {
  position: relative;
  width:750px;
  min-height: 3.1em;
  height:auto;
  margin:0;
  font-size: .8em;
  top: 0;
  }
  
#nav li {
  margin: 0 0 0 2px;
  padding: 0;
  width:100px;
  float:right;
  text-align:center;
  font-weight: bold;
  color:#444;
  }

#nav a {
  display:block;
  color:#999999;
  text-decoration:none;
  background: url(inactive.gif) no-repeat;
  background-image: url(inactive.gif);
  background-repeat: no-repeat;
  background-position: top left;
  margin:0;
  position: relative;
  font-weight: bold;
  font:Verdana, Arial, Helvetica, sans-serif;
  font-size:13px;
  top: 0;
  line-height: 1.4em;
  }

#nav a:hover {
/*color:#334C99;*/
  color:#777777;
  }

ul#nav li a.here {
  background: url(active.gif) no-repeat;
  z-index: 310;
  position: relative;
  margin-bottom: -1px;
  color:#334C99;
  }
  
ul#nav li a.he hover {
  color:#334C99;
  }
  
ul#subnav {
  width:750px;
  min-height: 23px;
  height: 1.7em;
  background:url(subnav_background.gif) repeat-x;
  /*border-top:1px solid #efefef;*/
  border-top:1px solid #CECECE;
  text-align:right;
  padding:0 2px 0 0;
  clear:both;
  z-index:290;
  position:absolute;
  margin: 0;
  right: 0;
  top: 1.34em;
  }
/* hide from IE/Mac \*/
* html #nav {
  height: 3.1em;
  wid\th:752px;
  lef\t: 1px;
  }

* html #nav a {
  height: 1%;
  }

* html ul#subnav {
  wid\th:753px;
  }
/* end hide */

#subnav li {
  position:relative;
  z-index:102;
  display: block;
  margin: 0 /*3px 0 1px*/;
  padding: 0;
  float:left;
  line-height: 1.4em;
  /*width:auto;*/
  width:50px;
  }

ul#subnav li a {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  /*font-weight:600;*/
  font-size:9px;
  margin-top:3px;
  color:#666666;
  background-image:url();
  border-left:1px solid #cccccc;
  }
</style>
</head>
<body>
<div id="wrapper">
  <div id="top">
		<div id="logohead">&nbsp;</div>
		<div id="toplinks" align="right"><img src="images/arrows2.gif">Client Login</div>
  </div>
  <ul id="nav">
		<li><a class="a3" href="#">About</a></li>
		<li><a class="a2" href="#">Tools</a></li>
		<li><a class="a1" href="#">Text</a></li>
		<li><a class="a0 here" href="#">Home</a>
		<ul id="subnav"><li>&nbsp;</li></ul>
		</li>
  </ul>
  <div id="midbanner">Flash Banner Here</div>
  <div id="bottomcontent">
		<div id="leftboxes">
			<div class="leftbox"><img src="images/bluearrows2.gif">&nbsp;</div>
			<div class="leftbox"><img src="images/bluearrows2.gif">&nbsp;</div>
			<div class="leftboxBottom"><img src="images/bluearrows2.gif">&nbsp;</div>
		</div>
		<div id="rightboxes">
			<div class="rightbox1">1</div>
			<div class="rightbox3">3</div>
			<div class="rightbox2">2</div>
			<div id="bottombox">4</div>
		</div>
  </div>
</div><!--end Wrapper-->
</body>
</html>

Hi Folks,
I really have spent days trying to fix this problem.
http://test.fluid-rock.com/

I have some nested divs that use background images and colours to create the 3 column effect. In IE [of course] there's a problem. You can see it in the page above. White bands appearing on the right and flashing different heights on resize. I now have a border [red] around the wrapper div, because I've discovered that a border helps to tlessen the damage. Without it - the white rectangle/void stretches all the way accross blanking/truncating the text in the middle column too! It's completely weird.

Before I post hundreds of lines of code I thought I'd let you just see the page, perhaps the problem looks familiar?
Thanks so much, John

hello all,
i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects.
Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section.
I believe the issue stems from the ids used only for the purpose of mootools.
Here's an html exerpt from the frontpage:
Code:

<div id="h_toggle1"><a href="#">
<h1>Communication</h1>
</a></div>
<div id="horizontal_slide1">
<ul class="bullet_point">

...

and the titre_toggle.css describing the elements used.
Code:

h3.section {
margin-top: 1em;
}

#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}

#h_toggle1, #h_toggle3, #h_toggle2 {
}

div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}

I'll appreciate any insight.

safari 4.0.3 --> KO
IE 6+ --> OK
FF 3.5 --> OK
mootools 1.2.4
joomla 1.5.15

I am listing a number of events from a database on this page

Here's the code:
Code:

<div id='eventblurb'>
                             $Comment
                         </div>
                         <div id='eventdetails'>

                              <p class='countrylist'>
                                 Date: $Date<br>
                                 Time: $Time<br>
                                 Cost: $Cost<br>
                                 City: $City<br>
                                 Contact: <a href='mailto:$Email'>$Contact</a> - $Phone <br>
                                 Address: $Addr1 <br>
                                 Address: $Addr2 <br>
                                 Address: $Addr3 <br>
                                 Address: $Addr4 <br>
                                 Website: $Website <br>
                              </p>
                         </div>

and the css:
Code:

#eventblurb {
    position:relative;

    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;
    height: 200px;
    width: 250px;

    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;

    margin: 0 0 0 10px;
    padding: 10px;
}
#eventdetails  {
    position:relative;
     top: -200px;
    left: 300px;
    width: 250px;


    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;

    margin: 0 0 0 10px;
    padding: 10px;
}

As you can see there is a big gap underneath each event. I know that this is caused by moving the relatively positioned div.

My question is, how can I do this without using tables and still keep the div in content flow?

Thank you

http://64.232.240.200/new.html

This site works well in Mozilla.

There are spacing discrepancies between loads with Mozilla and latest Internet Explorer. The space under headings in the Main section differs between them, and there are gaps in the newsboxes where the background image runs uninterrupted on Mozilla.

Internet Explorer Mac v5 does horrible things as can be seen in <a href="http://64.232.240.200/mac_ie5_screen.jpg">this screenshot</a>. (Colors have been changed slightly since this screenshot was taken, but you get the idea.)

Any help is appreciated.

Sorry I can't be more descriptive about my problems, but I am really not that great at CSS/PHP/coding in general. I barely passed my Matlab/C++ class freshman year of college, lol.

Anyway...my friend and I just started a blog but neither of us know anything about CSS. I followed a tutorial for creating Wordpress Themes using PHP and CSS. I've been working on the blog (hosted locally) for a while now, and finally decided to FTP it to my host server to do the browser snaps on it, etc.

thepennydreadful.com

That's the URL and right now there is a gigantic white gap between the footer and the container....I thought if I adjusted the padding it might fix the problem because that's how I fixed it when there was a gigantic white gap between the header and the container...but yeah. I've heard from my friend that in his browser (latest vers of firefox) that the sidebar doesn't go to the side like it's supposed to either.

I'm using the latest version of Google Chrome, if that matters. Any help or suggestions on how to fix the problem would be greatly appreciated. I've been following the W3 school's pages on CSS too, but I haven't had any formal instruction on CSS so most of what I am doing is pretty much just poking around in the dark. :'(

PS: I did validate my CSS like it says to do in the sticky at the top of the forum page and it validates alright....

Code:

/*  
Theme Name: The Penny Dreadful
Theme URI: http://www.thepennydreadful.com
Description: The layout for the gothic and lolita blog "The Penny Dreadful."
Version: 1.0
Author: Kate Bartlett
Author URI: http://nozomiwhitewolf.livejournal.com/

*/


	body{
	
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0;
		
		font-family: Arial, Helvetica, Georgia, Sans-serif;
		font-size: 12px;
		text-align:left;
		vertical-align: top;
		/* background-color: #29001E; */

	    }



div#content{
	padding:180px;
	width: 400px;
	float:left;
	}



/*Header, Container, Footer*/


div#header{
	background-image: url('Top.png');
	background-repeat:no-repeat;
	height: 519px;
	}


div#container{
	background-image: url('Middle.png');
	background-repeat: repeat;
	margin-right: 639px;
	height: 476px;
	text-align: left;
	padding: 1px;
	}


div#footer{
	background-image: url('Bottom.png');
	background-repeat:no-repeat;
	clear:both;
	float: left;
	width: 1050px;
	text-align: left;
	padding: 160px;
	height: 360px;
	}





/*
End of file.
*/

I have a page with some very large (dynamically populated) tables in an application. Is there a way to prevent these table from being pushed to a new page when printing?

I don't care where the tables break, but what I am trying to avoid is a printed header and then a huge gaping whitespace on the 1st printed page and then the table , that should have been printed just below the header, on a new second page.

Any thoughts?

Thanks, Stephen