2 Replies - 2718 Views - Last Post: 18 September 2011 - 08:52 AM

#1 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Annoying White Space Under an Image

Posted 18 September 2011 - 07:38 AM

Hey guys, I'm working on a top-secret project (not really lol.) I also tend to not go to you guys for help on my bigger projects. This is one I've just not been talking about a lot. You guys will kind of be able to tell what it is when I show you a snap shot. Basically what I have is an image and a navigation underneath it. In between the image and the navigation there is white space, kind of like there's a margin, but there isn't. I'll just show you guys what I mean first, here is a snap shot of what it looks like:

Attached Image

You guys should be able to see that there's a sliver of white space underneath the image. I've tried to narrow it down. I've removed the image, and then the navigation will be right under the header (not pictured here) without that white space. The picture is also a link, when taking the hyperlink off of the image, the problem still persist. I'm also using max-width to shrink down the image to fit, taking that off didn't help. I've used more than one image, the problem continued to happen. I'm also using using a CSS reset (Eric Meyer's), so be default images have no margin and padding. Here is my HTML for the sidebar:

<aside class="sidebar">
	<a href="" id="name" title="username"><img src="images/image.jpg" alt="username" /></a>
				
	<nav>
	     <ul>
		<a href=""><li id="selected"><span>Feed</span></li></a>
		<a href=""><li><span>Friends</span></li></a>
		<a href=""><li><span>Apps</span></li></a>
		<a href=""><li><span>Edit Info</span></li></a>
		<a href=""><li><span>Settings</span></li></a>
	        <a href=""><li><span>View Profile</span></li></a>
	     </ul>
	</nav>
</aside>



Here's my CSS for the whole sidebar:

.sidebar {
	float: left;
	width: 200px;
}

.sidebar img {
	max-width: 162px;
}

nav li {
	background-color: #111111;	/*	Fall back for gradients, duh! */
	background-image: linear-gradient(top, #333333, #111111);	/*	What this will look like when the CSS3 spec is finished */
	background-image: -webkit-linear-gradient(top, #333333, #111111);	/*	new webkit */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));	/* old webkit, I'm fucking glad for the new way, I hated making them compatible for webkit */
	background-image: -ms-linear-gradient(top, #333333, #111111);	/* new IE, I think IE 10? */
	background-image: -o-linear-gradient(top, #333333, #111111);	/* opera, this is something that I asked Twitter to put on their site, they never did */
	background-image: -moz-linear-gradient(top, #333333, #111111);	/* obviously this is for Firefox XP */
	font-family: OSPDIN;
	font-size: 2em;
	list-style-type: none;
	line-height: 40px;
	width: 162px;
}

nav a {
	color: #ffffff;
	text-decoration: none;
}

nav span {
	margin-left: 20px;
	width: 162px;
}

#selected {
	background-color: #ffffff;
	background-image: url('../images/blue tab.png');
	width: 195px;
}


I hope you guys can help. If you need anymore information, feel free to ask :) Thanks in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: Annoying White Space Under an Image

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 4354
  • View blog
  • Posts: 12,160
  • Joined: 18-April 07

Re: Annoying White Space Under an Image

Posted 18 September 2011 - 08:50 AM

Are you using the strict doctype? If so, this is a quirk that comes up with using the strict doctype. The fix is to put in a style that gives images an image top alignment or better yet, display: block.

The problem is that in the strict doctype images are defined as inline elements. This means it puts a space for descender characters like "p", "q" or "g". Anything that has a "tail" that falls downward. Since images are not text and doesn't have descenders, the space is unused. By making the image elements display as "block" items it will get rid of that spacing.

I hope this helps solve the problem. :)
Was This Post Helpful? 1
  • +
  • -

#3 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Annoying White Space Under an Image

Posted 18 September 2011 - 08:52 AM

Ah thanks man. I'm using the HTML 5 doctype. I do tend to use XHTML 1.0 strict syntax though (I just like how it looks). Making the image block fixed the image. Thanks man. :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1