Annoying Space

**mikemusica** · Apr 8, 2009 09:49

Hi all,

I'm fairly new to CSS (but not to HTML). I've started to work on a site and I've got this annoying

space after an image that is on the page.

The site is "test" dot "adoniswilliams" dot com

Any help would be appreciated.

**RyanReese** · Apr 8, 2009 09:56

http://www.ryanreese.net/articles/mysterious-gap.php

Also add
*{margin:0;padding:0;} to remove default browser margins nad paddings.

Which image?

Also setting overflow:hidden; on the body is not a good idea-I had to remove it to see half the page. I have a low resolution.

**mikemusica** · Apr 8, 2009 10:15

Thank you. I'm going to make those changes and keep you posted.

**mikemusica** · Apr 8, 2009 10:17

Originally Posted by RyanReese

Which image?

I have an image of a video camera on the page. Is it not appearing on your browser?

**RyanReese** · Apr 8, 2009 10:21

You mean the cell that holds the video (the main thing on there)?
You set the <td> to height="364"

Remove the set height.

**mikemusica** · Apr 8, 2009 10:27

hahaha I must be going either crazy or blind because I don't see where I've set a td to 364. lol

**RyanReese** · Apr 8, 2009 10:36

Code:

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-standard.dtd">-->
<html>
<head>
	<title>Coming Soon - Adonis Williams.com</title>
<script language='javascript' src='wasp.js'></script>

<style type="text/css">
<!--

body {
	background-color: #000; 
	margin: 0px; 
	padding: 0px;
	overflow: hidden;
	}

#container {
	border-top: 1px solid rgb(211,23,23); 
	border-bottom: 1px solid rgb(211,23,23); 
	width: 100&#37;; 
	height: 629px; 
	top: 10%;
	position: absolute;
	background-image: url('images/bg.gif'); 
	background-repeat: no-repeat; 
	background-attachment: fixed; 
	background-position: 15%;
	}

#clipContainer {
	width: 602px; 
	height: 338px; 
	background-color: #fff; 
	position: absolute; 
	left: 255px; 
	top: 125px;
	}

#clip {
	position: relative;
	padding: 15px 20px 15 px 20px;
	}

#name
	{
	position: absolute;
	top: 9%;
	right: 29%;
	}

#textLeft {
	position: absolute;
	top: 595px;
	left: 255px;
	border: medium double rgb(250,0,255)
	}

.red {
	color: #d31717;
	font: 11px arial;
	}
.whiteBold {
	color: #ffffff;
	font: 11px arial;
	font-weight: bold;
	}


-->
</style>
</head>
<body bgcolor="#000" style="margin: 0">
	<table border="0" width="100%" cellpadding="0" cellspacing="0" style="background-image: url('images/bg.gif'); background-repeat: no-repeat;" valign="top">
	<tr>

	<td height="50px">dldfkdl</td>
		<tr>
			<td width="735px">
				<table border="0" height="430px" width="735px" cellpadding="0" cellspacing="0">
					<tr>
						<td align="right" valign="top">
							<table border="0" width="648px" cellpadding="0" cellspacing="0">
								<tr>

									<td width="330px" align="right" valign="bottom"><span class="red">Official site coming soon...</span></td>
									<td align="right" height="66px"><img src="images/adon_name.gif" /></td>
								</tr>
									<tr>
										<td height="364px" align="center" bgcolor="#ffffff" colspan="2"><script>waspEmbed('mult/reel_hq_low.flv', 602, 338);</script></td>
									</tr>
							</table>
						</td>

					</tr>
				</table>
			</td>
				<td valign="bottom" style="padding: 0px 0px 0px 5px"><a href="javascript:;" onClick="wasp_loadAndPlay('mult/TRAILER-BS-Matt Settings.flv')"><img src="images/thumb_bs_TRAILER.jpg" border="0" /></a><br /><br /><a href="javascript:;" onClick="wasp_loadAndPlay('mult/lightersite.flv')"><img src="images/thumb_cuteugly.jpg" border="0" /></a><br /><br /><a href="javascript:;" onClick="wasp_loadAndPlay('mult/uniquepromoroughweb.flv')"><img src="images/thumb_uniquepromo.jpg" border="0" /></a><br /><br /><a href="javascript:;" onClick="wasp_loadAndPlay('mult/dynastymattsettingslow.flv')"><img src="images/thumb_dynasty.jpg" border="0" /></a></td>
		</tr>
			<tr>
				<td valign"top" align="right"><span class="whiteBold">Contact information:</span><br /><span class="red">Adonis Williams<br />718.813.1653<br />adonis.direct@gmail.com</span></td>

			</tr>
	</tr>
	</table>
</body>
</html>

I have noooo idea either

**mikemusica** · Apr 8, 2009 10:41

Oh no. That's the wrong site. That's the actual live site.

I entered "test" dot "adoniswilliams" dot com. The test version is what I'm working on.

**RyanReese** · Apr 8, 2009 11:07

I see no space-you set vertical-align to bottom.

**mikemusica** · Apr 8, 2009 11:10

I took your advice and it worked. I JUST uploaded the changes. Man, you're quick.

**RyanReese** · Apr 8, 2009 11:14

Your welcome

. If you have any moer questions just ask.

**mikemusica** · Apr 8, 2009 11:25

Well, since you mentioned it

The menu bar located under the image has an img as the background. I've set the height but when I add the text, it stretches the menu bar. Remove the text and the bar goes back down to the height I've set.

Please bear with me, CSS is confusing me right now. Just started working with it a couple days ago.

**Paul O'B** · Apr 8, 2009 11:59

If you are talking about IE6 then you will need to add overflow:hidden to the menu.

IE6 will always expand an element to contain its content which in this case is the text height and line-height. Set overflow:hidden to stop it expanding the element.

**mikemusica** · Apr 8, 2009 12:02

My God. It worked. You're amazing, man.

User Tag List

Thread: Annoying Space

Thread Tools

Display

Annoying Space

Bookmarks

Bookmarks

Posting Permissions