CSS - Cant Eliminate Empty Space

Thanks for taking the time to read my question

I am starting to make a page, and for some reason I have a white space between two sections of my page.

I don't know why.

I don't have a domain for this page yet, so I've put it under my band domain.

The space is between the Menu and the info portions of the page.

Any ideas?

http://www.pierced.ca/kelly/

css:
Code:

@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
background-image: url(C:/Documents and Settings/McIntyBD.MAPLELEAF/Desktop/Kelly/images/fall-leaves.jpeg)
/*background-color: #d8d8d8;*/
}

#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}

#header {
width: 640px;
height: 100px;
color: #A6A6A6;
background-color: #b12514;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}

#footer {
width: 640px;
height: 20px;
background-color: #b12514;
color: #A6A6A6;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}


#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
height: 400px;
text-align: left;
text-transform: uppercase;
font-size: 20px;
background-color: #FD9800;
/*border-left: medium solid #E0E0E0;
border-right: medium solid #E0E0E0;
border-bottom: medium solid #E0E0E0;*/
padding: 8px;
line-height: 25px;  
}

#menu a:visited {
color:aqua;
font-size: 12px;
width: 84;
}
#menu a:hover {
color:#005c00;
font-weight: bold;
font-size: 12px;
width: 84;
}
#Menu a {
color:yellow;
font-size: 12px;
width: 84;
}


#info {
background-color: #ffc047;
color: #005c00;
height: 400px;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
text-align: left;
font-size: 16px;
}

#info p {
text-indent: 12px;
font-family: ZapfChan MdIt BT;
letter-spacing: 4px;
line-height: 25px
}

a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-size: 12px;
}
a {
color:#A0E5FF;
font-size: 12px;
}

First off, I apologize if my explanation is bad. Also, please refer to the link below. You will have to delete from the spaces from the URL because I was not allowed to post a url since I am a new user :/

http://img240. imageshack. us/my.php?image=forumexplanationje5.jpg

This is what I want to do...

I want to make a "table" in css. I want to make the "table" always be 890px. The css for the orange items would be

.orange
{
margin:0px;
padding:20px;
}

Now, I want the width of the orange items to be the width of the text in them + the padding. So basically the width is going to be dependant on the text in the tag.

My problem is that I don't know how to make the blue part fill up the rest of space without knowing what the width of the orange part is.

Please help, thanks.

Hi there,

Not entirely sure this is a CSS issue, but something tells me it is...

I'm getting a weird space at the top of my pages in IE, which consequently causes the header to not align properly with the header background image. It works just fine with FireFox though.

You can view the issue he http://hsdc.groundedgroup.com/

Does anybody know how to remove this space?

Thanks in advance.

Check it out:
http://www.wdoucette.com/awards/

Look at the part that looks like this:

- link 1
- link 2

You can hover over the empy space after "link 1" and it clicks "link 1"! If I put a space before the "<br>" code after the link, the problem goes away. Know what causes it?

(BTW, this is a site I'm creating for my father. It is unfinished.)

I have tried every suggestion that I can find on the web, and still IE insists on putting spacing between cells in my tables when I don't want it.

Just go to my home page: www dot jamescobban dot net (Why can't I just post my website address?) In the bottom frame I use a table to hilight my contact addresses. On FFox the borders are solid because FFox honors the Code:

border-spacing: 0px

in my styles. But IE ignores it. It also ignores the Code:

padding: 0px

in the style defined for the individual cells. I have tried Code:

border-collapse: collapse

, but that merges the borders so that the cells are only separated by 2px of border when I want to total of 4px. OK I could make this particular table look the same on both by using border-collapse and defining the borders as 4px wide, but that would not address other tables I have where the borders are more complex and I really do need to keep the cell borders and the table border distinct. I just want to get rid of the d....d spacing!

html Code:
Original - html Code <hr> <table class='contacts' > <tr> <td class='contacts'>Phone:</td> <td class='contacts'>E-mail to:</td> </tr> <tr> <td class='contacts'>Phone: +1-613-592-9438 <br>FAX: +1-613-592-9438</td> <td class='contacts'>&nbsp;<a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td> </tr> </table>

  
<hr>
<table class='contacts' >
<tr>

<td class='contacts'>Phone:</td>

<td class='contacts'>E-mail to:</td>
</tr>

<tr>

<td class='contacts'>Phone: +1-613-592-9438
<br>FAX: +1-613-592-9438</td>

<td class='contacts'>&nbsp;<a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td>
</tr>
</table>

css Code:
Original - css Code <style type='text/css'> table.contacts { border: solid 2px #008000; width: 100%; padding: 0px; border-spacing: 0px; background: #99FF99; } td.contacts { border: solid 2px #008000; font-family: sans-serif; padding: 0px; } </style>

  

    <style type='text/css'>


     table.contacts    { border: solid 2px #008000; 


             width: 100%;


             padding: 0px;


             border-spacing: 0px;


             background: #99FF99;


             }


     td.contacts       { border: solid 2px #008000;


             font-family: sans-serif;


             padding: 0px;


             }


     </style> 

Any idea how to make the image to go side-by-side without a whitespace in between them? The code below is ..

Code:

<div>
 <a href="blah blah"><img src="blah blah"></a>
 <a href="blah blah"><img src="blah blah"></a>
 <a href="blah blah"><img src="blah blah"></a>
</div>

Thanks...

I'm a bit confused about how to cause the dive that contains the images to more closely surround, collapse around the images?
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Untitled</title>
	<style>
	.nav_box {	
		width: 95%;
		padding: 1px 1px 1px 2px;
		border: 1px solid #eef7ff;
		background-color: #003366;
		text-align : left;	
	}	
	.bolck_up {
		padding: 0px;
		margin: 0px;
		vertical-align: bottom;
	}
	.bolck_down {
		padding: 0px;
		margin: 0px;
		vertical-align: bottom;
	}
	</style>
</head>
<body>
<div class="nav_box">
	<img class="block_up" src="./images/block_up.gif" width="11" height="11" />
	<img class="block_down" src="./images/block_down.gif" width="11" height="11" />
</div>
</body>
</html>

Any help would be appreciated.

I'm wondering how do I eliminate the space between the image banner and the UL,LI tags?? It worked fine in Mozilla but not in IE... So, I figure an IE hack is needed...

Code:

.amsBannerTop
{
  width: 600px;
  height: 120px;
  margin: 0px;
  padding 0px;
}
#dmenu 
{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 35px;
  margin-top: 0px;
  width: 26em;
  
  font-family: Verdana;
  font-style: normal;
  font-size: 10pt;
  font-weight: normal;
}
#dmenu ul li 
{ 
  /* blank... */
}
#dmenu li:hover ul
{
  /* lists nested under hovered list items */
  display: block;
}
#dmenu li.over ul
{
  display: block;
}

Code:

<div>
 <img class="amsBannerTop" src="image/AMS_Banner_RoughDraft3.jpg" alt="" border="1">

 <ul class="xMenuUl" id="dmenu">
  <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
   <ul class="xSubmenuUl">
    <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
    <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
    <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
    <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
   </ul>
  </li>
  <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
   <ul class="xSubmenuUl">
    <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
    <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
    <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
    <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
   </ul>
  </li>
  <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
   <ul class="xSubmenuUl">
    <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
    <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
    <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
    <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
    <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
   </ul>
  </li>
 </ul>
</div>

Thanks,
FletchSOD

I'm having a proble with body MARGIN / PADDING in Mozilla. I'm using an external style sheet, and both margin and padding have been set to zero:

Code:

body {
	background: #FFFFFF;
        color: #141414;
	margin: 0 0 10px 0;
	padding: 0;
	}

But I'm still getting a huge margin around my pages ONLY IN MOZILLA. I have no idea why, and I've tried everything! The only thing that works, is setting the MARGIN / PADDING directly in the HTML of the pages. But I shouldn't have to do that - it should work fine externally!

Any ideas or suggestions?

I have a test page for an image and it does not display a border. It only changes the cursor to a hand on hoover. Once clicked and subsequently returned to the page, the image does not have the dotted outline of its' border either. This is as it should be. Here is the code:

Code:

<html>
<head>
<style>		
img, fieldset	{
	border: 0;
}
</style>
		<a href="http://validator.w3.org/check?uri=referer" border="0"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</head>
</body>

Next, I have my development pages where I have multiple link styles on each page defined by an external style sheet, prime.css. here is the relavant portion of the code:

Code:

a:link	{
    color: #2F4F4F;
    text-decoration: underline;
}
a:visited	{
    color: #778899;
    text-decoration: underline;
}
a:active	{
    text-decoration: underline
}
a:hover	{
    text-decoration: underline;
	background-color: #2F4F4F; 
    color: #FFFFFF;
}
.intraLink:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.intraLink:visited	{
    color: #778899;
    text-decoration: none;
}

.intraLink:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}

.intraLink:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#D2691E;
}
.back:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.back:visited	{
    color: #778899;
    text-decoration: none;
}
.back:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.back:hover	{
	text-decoration: none;
	background-color: #FFFFFF;
	color:#2E8B57;
}
.image:link	{
	color: #2F4F4F;
	text-decoration: none;
	background-color: #FFFFFF;
}
.image:visited	{
    color: #778899;
    text-decoration: none;
}
.image:active	{
    text-decoration: none;
	background-color: #FFFFFF;
}
.image:hover	{
    text-decoration: none;
	background-color: #FFFFFF; 
	color: none;
}
.pageStyle {
	background-color: none;
	font-family: "Helvetica Neue", Arial, helvetica, sans-serif;
	width: 800px;
	font-size: 62.5%;
	margin: 0 auto;
	padding-top: 50px;
	margin-bottom: 25px;
	line-height: 1.5;
}
#main {
	float: left;
	width: 590px;
	padding-bottom: 25px;
}

Explanation for the multiple styles: the default link style is to change the 'default' hyperlinks to match my color scheme. The .intraLink is for links within the current page. The .back style is for calling the previous page and finally the .image style is for all images with href references.

Even though this scheme works there is a slight problem. Once an image that is used as a link is clicked and user returns to the page then the image has a dotted line as a border! I'd like it to not have that border, i.e., I'd like it to work just as the test page works, nice and clean.

Also, I'm not sure about my linking styles. I'm new with CSS and it just seems like I've done more than I really need too; like it seems like it's a lot to do to simply not have the border appear when the test page is so lean! Is there a better way? Here's the offending page code and thanks for taking the time to read this, I know it's a trivial point but I'd like to understand why:

Code:

<html>
    <head>
		<title>index.html :: home page
		</title>
		<link rel="stylesheet" type="text/css" href="prime.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body class="pageStyle">
	    <b>:: Index.html ::</b><hr>
		<div id="main">
			<ul>
				<li>
				<a href="rs_cv.html">My CV</a>
				</li>
			</ul>
		</div>
		<a href="http://validator.w3.org/check?uri=referer" border="0" class="image"><img
		src="http://www.w3.org/Icons/valid-html401"
		alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
    </body>
</html>

I'm going round and round without getting any head way so hopefully someone can give me a hand...
I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border?

Code:

INPUT.email {
	background-image: url(images/bg_email.jpg);
	width:206px;
	height:21px;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	color: #ffffff;
	border: 1px solid black;
	margin: 0 0 0 10px;
	padding: 0 0 0 6px;
}
 

Thanks in advance!

this will be fun to explain, heres the code:
Code:

<div Id="Panel_contain" style="background-color: #cdcdcd;">
    <div Id="panel2" style="float:left">Blah</div>
    <div id="panel3" style="float:left">Blah</div>
</div>

lets say that the two panels inside amount to 50px of size (just for mental visualization). In firefox, the background color of the outside div is the whole height of its div (itself)

in IE6, the background only goes down, lets say 10 px and stops.

From what i have got out of this, IE6 sees that div as empty? and so renders it wrong? basically i need to get the height of the div to extend.

Advanced:
All of this code is being generated by VB (its a dynamic AJAX program, where all the controls are built from info from a database) so i was thinking that adding some text below the inside divs would make it not 'empty', although i can't figure out how to append to the bottom of the div programmatically, because i dont know when the div is done being filled. If that makes sence

outro:
basically im pretty sure i should be able to fix this with some type of CSS IE6 bug fix.
Thanks!

Is this illegal?

<div id="some_id"></div>


Thank you