Space problems

HTML & CSS
1

Nothing to do with the celestial space, but spacing within a <ul> and <li>

I was originally trying to centre the

The Html:

<span class="thumbNail">
<ul id="thumbs">
<li><img class="sizeImg" src="images/007.jpg" /></li>
.
.
repetition of <li> tag
.
</ul>
</span>

The CSS:

span.thumbNail ul{
text-align: left;
width: 96%;
overflow-x: scroll;
overflow-y: no-display;
background: #ccc;
white-space: nowrap
}

I had to insert this css styling in order to get the <li> styling for the list not to cascade vertically

#thumbs li {
display: inline-block;
/* if you need ie7 support */
*display: inline;
zoom: 1
}

If you want me to include a screenshot to explain this, I will be happy to do so

2

Hi,

You didn’t actually ask a question :slight_smile:

If you want to centre elements in a navigation then you can set the list elements to display:inline-block for horizontal alignment (as you have done) but then you will need to use text-align:center on the parent ul in order to centre those inline-block elements. Remember that spaces between elements that are inline-block will be interpreted as a space like the space between words (there are solutions to this)

There is no need to put a width on the ul unless of course that was what you wanted. Don’t forget to negate the default left margin and padding on the ul either as that will upset the spacing.

Not also that is is invalid to wrap a span around a UL as a span is an inline element and can contain only other inline elements. Change the span to a div and you will be ok.

I don’t know any browsers that support the ‘no-display’ value of the overflow property either.

3

Hi there, thanks for that, but negating the margin-left has left the bottom left scrollbar also moving to the left, negating the padding-left has no effect on the <li> tags

4

Hi,

You’ll have to make a working example as we may be talking at cross purposes :slight_smile:

A UL by default has a left margin in some browsers and in others it has a left padding so you need to negate both or your ul will be the 96% width you gave it plus an unknown amount of margin (or padding) which means it may not fit within the containing block.

Usually you would do this when using the list as navigation:

ul{margin:0;padding:0;list-style:none}

Note that the list element has no padding or margin applied by default so you don’t need to do anything to the list element itself only the ul.

However, I still don’t know what problem you are trying to overcome exactly:) You mentioned space in a list but you don’t say where, what and how?

If you want a centred navigation then this example has all the fixes and details in place:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav {
	list-style:none;
	margin:0;
	padding:0;
	overflow:hidden;
	text-align: center;
	width:100%;
	display:table;/* Webkit Fix */
	word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
}
.nav li {
	display:inline-block;
	word-spacing:0; /* reset from parent ul*/
}
* html #nav li { display:inline; } /*IE6*/
*+html #nav li { display:inline; } /*IE7*/
.nav a {
	display:block;
	width:120px;
	font-weight:bold;
	color:#FFF;
	background-color:#98bf21;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
.nav a:visited { color:#FFF; }
.nav a:hover, .nav a:active, nav a:focus { background-color:#7A991A; }
</style>
</head>

<body>
<ul class="nav">
		<li><a href="#home">Home</a></li>
		<li><a href="#news">News</a></li>
		<li><a href="#contact">Contact</a></li>
		<li><a href="#about">About</a></li>
</ul>
</body>
</html>