TECH css question

White Stormy · Sep 29, 2008

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

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>

Kevin · Sep 29, 2008

That should probably be a table.

kingtoad · Sep 29, 2008

Add the overflow attribute to your .block element.

Code:

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

White Stormy · Sep 29, 2008

kingtoad said:
Add the overflow attribute to your .block element.

Code:

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

my god, dude. you ARE the internet.

Thanks

Pepsi1975 · Sep 29, 2008

White Stormy said:
my god, dude. you ARE the internet.

Thanks

Kingtoad is :bowdown:

sometimes I hate to bother him, but he is always open to help me when ever I need it

kingtoad · Sep 29, 2008

Pepsi1975 said:
Kingtoad is

sometimes I hate to bother him, but he is always open to help me when ever I need it

Never a bother, man. :hs:

White Stormy · Sep 29, 2008

maybe kingtoad should tell the W3C how html 5 should work and then it would be out sooner than 2020 :bowdown:

kingtoad · Sep 29, 2008

White Stormy said:
maybe kingtoad should tell the W3C how html 5 should work and then it would be out sooner than 2020

I'm actually looking forward to HTML 5. :hs:

Pepsi1975 · Sep 29, 2008

kingtoad said:
Never a bother, man.

thanks again, made about $70 in the last 3 weeks in adsense

kingtoad · Sep 29, 2008

Pepsi1975 said:
thanks again, made about $70 in the last 3 weeks in adsense

congrats

Pepsi1975 · Sep 29, 2008

kingtoad said:
congrats

would not have been able to do it with out your help man

kingtoad · Sep 29, 2008

Pepsi1975 said:
would not have been able to do it with out your help man

Glad I can assist.

pkr · Sep 29, 2008

White Stormy said:
my god, dude. you ARE the internet.

Thanks

Kingtoad is really ftw. Best source of information I have found and an all around great dude.

pkr · Sep 29, 2008

Pepsi1975 said:
thanks again, made about $70 in the last 3 weeks in adsense

biawokauns · Sep 29, 2008

looked at your xhtml and you have a severe case of DIVitus

White Stormy · Sep 29, 2008

biawokauns said:
looked at your xhtml and you have a severe case of DIVitus

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

kingtoad · Sep 29, 2008

White Stormy said:
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.

White Stormy · Sep 29, 2008

kingtoad said:
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 · Sep 29, 2008

White Stormy said:
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.

TECH css question

White Stormy

Take that, subspace!

Kevin

kwyjibo

kingtoad

Well-Known Member

White Stormy

Take that, subspace!

Pepsi1975

Mod of the Year

kingtoad

Well-Known Member

White Stormy

Take that, subspace!

kingtoad

Well-Known Member

Pepsi1975

Mod of the Year

kingtoad

Well-Known Member

Pepsi1975

Mod of the Year

kingtoad

Well-Known Member

pkr

pkr

biawokauns

Active Member

White Stormy

Take that, subspace!

kingtoad

Well-Known Member

White Stormy

Take that, subspace!

kingtoad

Well-Known Member

Users who are viewing this thread