2 replies [Last post]
patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 44 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

Hi everyone. I have a container that I am using to display a "carousel" of images (basically a mask with a scrollable background that I am using jQuery to scroll).

The images are meant to have little icons in the lower left corner, and so I am applying a border to the LI, so that the icon can be placed in the up against the corner with absolute positioning (bottom 0, left Innocent.

I am using Eric Meyer's reset.css for the webpage, and that sets line-height to 1... I notice that with this set, It causes padding at the bottom of the image, which I don't quite understand why.

This is the webpage with a simplified example (no jquery scrolling, just the photos in the container with 'red' squares in the place of the icon that would appear there):

http://collinatorstudios.com/www/inline_block_test/

My question is, why is this padding appearing from line-height? Is the solution to simply just declare line-height: 0 inside my carousel LI items? Or is this a sign that something else is screwy?

Thank you.

HTML:

<!DOCTYPE html>
 
 <html lang="en">
 
 <head>
 
 <meta charset="utf-8" /> <title>Test</title>
 
 <link rel="stylesheet" href="main.css" />
 <link rel="stylesheet" href="reset.css" />
 
 </head>
 
 <body>
	<div class="media_subcontainer">
 
 		<div class="mask_container not_selectable carousel"> 
			<div class="mask">
				<div class="scroller">
					<ul class="page">
						<li id="photo_1" class="scroller_item">
							<img height="94" width="125" src="1.JPG">
							<div class="lock" style="display: none;"></div>
						</li>
 
						<li id="photo_1" class="scroller_item">
							<img height="94" width="125" src="2.JPG">
							<div class="lock" style=""></div>
						</li>
 
						<li id="photo_1" class="scroller_item">
							<img height="94" width="125" src="3.JPG">
							<div class="lock" style="display: none;"></div>
						</li>
 
						<li id="photo_1" class="scroller_item">
							<img height="94" width="125" src="1.JPG">
							<div class="lock" style=""></div>
						</li>
					</ul> <!-- page -->
				</div> <!-- scroller -->
			</div> <!-- mask -->
		</div> <!-- mask_container -->
	</div> <!-- media subcontainer -->
 
</body>

CSS:

.media_subcontainer {
	padding: 0 10px;
}
 
.mask_container {
	clear: both;
	overflow: hidden;
	width: 100%;
	padding: 20px 0 10px 0;
}
 
.mask {
	width: 670px; 
	overflow: hidden;
	background: #2e2e33 url('images/photo_container_bg.png') repeat-x;
	padding: 10px 0;
	border: none;
	float: left;
	margin: 0px 0 0px 15px;
	border: 1px solid #000;
}
 
.mask .scroller {
	float: left;
	list-style: none; 
	margin: 0; 
	padding: 0; 
	overflow: hidden;
	width: 999999px;
	min-height: 125px;
}
 
.mask .scroller ul.page {
	float: left;
	padding: 0;
	margin: 0px;
	width: 670px;
	text-align: left;
	list-style-type: none;
}
 
.mask .scroller ul.page li.scroller_item {
	margin: 0 2px;
	padding: 0;
	display: inline-block;
	position: relative;
	border: 1px solid #000;
/*	line-height: 0; */
}
 
.mask .scroller ul.page li.scroller_item img {
	margin: 0;
	padding: 0;
	border: none;
}
 
.scroller_item .asset_info {
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: #fff;
	color: #000;
	width: 100%;
	text-align: center;
	font-size: 9px;
	height: 30px;
	z-index: 99;
}
 
.lock {
	height: 14px;
	width: 14px;
	border: none;
	position: absolute;
	bottom: 0;
	left: 0px;
	margin: 0 0 0px 0px;
	padding: 0;
	background: red;
	z-index: 9999;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The space under the image is

The space under the image is the space that browsers reserve for descenders in text (images are inline replaced content). Make the image either vertical-align:bottom or display:block to remove it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

patrickco
patrickco's picture
Offline
Enthusiast
Los Angeles
Last seen: 10 years 44 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2005-04-17
Posts: 157
Points: 12

thank you so much! -patrick

thank you so much!

-patrick