CSS - Layers, Remove Empty Space Below

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;
}

Hello. I have just finished migrating my vbulletin template to XHTML 1.1 strict and it validates just fine. The css shows 2 errors but they are known and have no effect on the display (effective for windows resizing).

My question is why do I have ~500px of white space to the site of my http://forums.xedge.net ?

I did a * { border: 1px solid red; } to see where the space lined up in the scheme of things and it looks like it's part of the main div (siteWrap).

Code:

/* *** This wrapper sizes the appearance of the entire site *** */
div#siteWrap {
 width: 95%;
 min-width: 770px; 
 margin-left: auto;
 margin-right: auto;
 background-color: #606A8C; 
}

siteWrap sets the page to render at 95% of the current window. I also have a div for contents which gives 15px to the left and right to give spacing for all following elements. In researching this problem I have read that percentage widths sometimes can be problematic with static paddings, but it was working at one time. I just can't figure out what I did wrong.

The white space only appears in firefox, in ie and opera the site renders perfectly.

Thanks.

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.)

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.

How can I remove the space between an image bottom and a td in Mozilla?


<!DOCTYPE html
PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head><title></title>
<style type='text/css'>
td,img { padding:0px; border-width:0px; margin:0px; }
</style>
<script type='text/javascript'>

</script>
</head><body>
<table border='1'><tr><td> <img src='http://www.kallery.net/Q_strg/kallery/85_153_1_1155924038.jpg' /> </td></tr></table>
</body></html>

http://users.wpi.edu/~sigep/goron2.html

How would I remove the space around the images in the navbar so that they are all right next to one another and line up properly on the page?

Hi,

I have a list inside a div section. However for some reason there is some space srounding this list. The div has a padding of 5px. I want to remove the space of the list so that the actual list is only 5px away from the div border. Here is some html and CSS code of what I did so far:
Code:

<html>
	<head>
		<style>

			#box {

				width: 200px;
				border: 1px solid #000000;
				padding: 5px;
			}

			#box ul li{

				padding: 0;


			}

		</style>
	</head>
	<body>

		<div id="box">
			<ul>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
			</ul>
		</div>

	</body>
</html>

I also tried margin: 0px, however that was a disaster. And also tried clear:both but did not work either. Does anyone have any sugestions?

thanks and regards,
sim085

The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout.

At the top, I could create the space I want.
Margin-bottom: 30px doesn't do the trick.

I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful!

You can check out the site and css he


I can't post the url because I'm a new user
Can a mod post my url?

EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site.

I'm having a "can't think" day.

How would I get rid of the space(s) between the image icon and the <li> folder or file name on my test website?

On the left-hand side of my test website, there is a directory tree listing.

You'll see that php files are indicated with an php file icon for example.

I don't want that much space between the file name and the file icon.



Test website: www seemyinvestments dot com

Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it.

This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it.

Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other

How many layers or z-indexes can you reasonably use on one page? I'm thinking mostly IE here, since that is the browser I will be working with.

For instance, you design a bunch of tabs - at least 24, and have a a span or div below those tabs that contain checkboxes and text preceeding each check box, for each tab on its own layer. Maybe a maximum of 40 checkboxes/text per layer. Clicking each tab will hide/unhide the appropriate layer of checkboxes/text in the div area. I know this may be better done axaj style, but for the sake of argument, what would you think is a maximum load for this scenario for a browser (latest IE) on a standard pc that may be up to 3 years old?

Hi guys,

I am using the following code on my page but the 'profile-description' div layer is not displaying correctly

Some of the text shown as a result of this <? echo nl2br($row['description']); ?> is being shown outside the blue border created by this code :

<div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;">


PHP Code:
#div-profile {
 position:relative;
}
#profile-data {
 position:absolute;
 top:-15px;
 right:230px;
 width:250px;
 font: 12px/17px  verdana,arial,sans-serif;
 line-height:18px;
 text-align:left;


}
#profile-pic {
 position:absolute;
 top:0;
 left:-10px;
 width:170px;

}


#profile-description {
 position:relative;
 top:150px;
 left:60px;
  width:450px;
   font: 12px/17px  verdana,arial,sans-serif;
 line-height:18px;
 text-align:left;
}






<div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;">




<div id="div-profile">
                <div id="profile-pic">
                <img src="profile-pics/<? echo $pic ;?>" alt="" width="120" height="140" align="left">
                </div>
                

                <div id="profile-data">
                <br />
                <strong>Name:</strong> <? echo("$row2[first_name]"); ?> <? echo("$row2[last_name]"); ?><br />
                <strong>Specialist Area:</strong> <? echo("$row2[specialist_area]"); ?><br />
                <strong>Phone:</strong> <? echo("$row2[phone]"); ?><br />
                <strong>Mobile:</strong> <? echo("$row2[mobile]"); ?><br />
                <strong>Company:</strong> <? echo("$row2[company]"); ?><br />
                <strong>Address:</strong> <? echo("$row2[city]"); ?>, <? echo("$row2[state]"); ?><br />
                <strong>Email:</strong> 
                <a href="contact-agent.php?id=<? echo $_SESSION['member_id'];?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">contact us here</a><br />


    <?
    
    }
    ?>
    

                </div>
                

        <br /><br />


                <div id="profile-description">
                
                <? echo nl2br($row['description']); ?>
                
                <br /><br /><br /><br />
                
                
                    <div align="right">
                        <a href="contact-agent.php?id=<? echo $member_id ;?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">
                        <img src="icon-email.gif" alt="Contact This Agent" width="60" height="60" hspace="10" border="0"></a>
                        
                        <a href="javascript:window.print()" title="Print This Page">
                        <img src="icon-print.gif" alt="Print This Page" width="60" height="60" border="0"></a>
                    </div>
                
                </div>
                
                
            </div> 





Can anyone possibly help?

Ok, I have this:
Code:

#background {
	position:relative;
	width:600px;
	height:480px;
	z-index:1;
	background-image:"/background.jpg";
	border-style:none;
	color:#000000;
	} <div ID="background">Whatever</div>

But it doesn't work.. why?