TECH css question

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
Sparkopolis
http://halefx.com/temp/temp.html

my intention is for all of the text to have the green background color..

I know the problem has something to do with the list.. but is there a property I can add to the ul or li to fix it?

this shit aggravates me even more about CSS than IE stuff :o

Code:
<!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>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background-color: #ffffff;
			}
			.block {
				background-color: #00bb00;
				line-height: 1.5em;
				width: 200px;
			}
			.block-inner {
				padding: 8px;
			}
			.block-contents ul {
				float: left;
				list-style-type: none;
				width: 50%;
			}
			.block-contents ul li a {
				display: block;
			}
		</style>
		<title>Temp</title>
	</head>
	<body>
		<div class="block block-cat" id="block-cat-1">
			<div class="block-inner">
				<div class="block-title">
					Categories
				</div>
				<div class="block-contents">
					<ul>
						<li><a>&raquo; Category 1</a></li>
						<li><a>&raquo; Category 2</a></li>
						<li><a>&raquo; Category 3</a></li>
						<li><a>&raquo; Category 4</a></li>
						<li><a>&raquo; Category 5</a></li>
						<li><a>&raquo; Category 6</a></li>
						<li><a>&raquo; Category 7</a></li>
						<li><a>&raquo; Category 8</a></li>
					</ul>
					<ul>
						<li><a>&raquo; Category 9</a></li>
						<li><a>&raquo; Category 10</a></li>
						<li><a>&raquo; Category 11</a></li>
						<li><a>&raquo; Category 12</a></li>
						<li><a>&raquo; Category 13</a></li>
						<li><a>&raquo; Category 14</a></li>
						<li><a>&raquo; Category 15</a></li>
						<li><a>&raquo; Category 16</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
 

kingtoad

Well-Known Member
Sep 2, 2003
55,790
Los Angeles
Add the overflow attribute to your .block element.

Code:
.block {
  background-color: #00bb00;
  line-height: 1.5em;
  width: 200px;
  overflow: hidden;
}
 

kingtoad

Well-Known Member
Sep 2, 2003
55,790
Los Angeles
isn't really any way around that, though, is there?

only thing I can think to change would be a heading tag for the block title, and I'm not sure that that's appropriate

You can probably completely get rid of block-title and block-inner. I'd keep the outer wrapper for the Drupal identifier, and probably block-contents for any adjustments. If you want to get technical, all you really would need is the block wrapper, and leave any other styling up to the "ul li" markup.
 
TS
TS
White Stormy

White Stormy

Take that, subspace!
Sep 17, 2002
85,544
Sparkopolis
You can probably completely get rid of block-title and block-inner. I'd keep the outer wrapper for the Drupal identifier, and probably block-contents for any adjustments. If you want to get technical, all you really would need is the block wrapper, and leave any other styling up to the "ul li" markup.

I just have block-inner there for padding. if I didn't have it, wouldn't the padding be presented differently by ff, ie, safari, chrome, etc?
 

kingtoad

Well-Known Member
Sep 2, 2003
55,790
Los Angeles
I just have block-inner there for padding. if I didn't have it, wouldn't the padding be presented differently by ff, ie, safari, chrome, etc?

You can set the padding in the ul tag and it'll be the same thing. It'll be the same as long as you have the outer div preventing the padding from bleeding over.
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
402
Guests online
62
Total visitors
464

Forum statistics

Threads
369,442
Messages
16,883,765
Members
86,873
Latest member
vitalesan