16 replies [Last post]
bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

I'm trying to clean up some coding that someone else did and I cannot figure out what controls the list properties. I just want to decrease the number of spaces of indenting. http://www.spiritofvolunteerism.com/contribute.html is the page I'm reformatting. Can anyone help with this?

The style sheet reads:

* html #contenido .contribute-list{
	margin:16px 0;
	padding:0 0 10px 0;
	list-style:none;
}
 
* html #contenido .contribute-list li{
	float:left;
	display:block;
	width:18%;
	padding:0 4px;
	border-left:1px solid #CED1C8;
	height:600px;
}
 
#contenido .contribute-list li{
	float:left;
	display:block;
	width:18%;
	padding:0 6px;
	border-left:1px solid #CED1C8;
	height:600px;
}
 
#contenido .contribute-list li.first{
	border-left:none;
}
 
#contenido .contribute-list li ul{
	padding-top:8px;
}
 
#contenido .contribute-list li ul li{
	border-left:none;
	float:none;
	width:90%;
	background:url(../images/bullet.gif) no-repeat 0 11px;
	padding:6px 8px;
	line-height:1.1em;
	height:auto;
}
 
.price{
	color:#CC0000;
	font-family:Georgia;
	font-size:1.4em;
}
 
.level{
	color:#786754;
	font-family:Georgia;
	font-size:1.1em;
	font-weight:bold;

The html reads:

 <div id="contenido" class="contribute">
			<h2>Contributor levels and benefits Packages:</h2>
			<ul class="contribute-list">
				<li class="first">
					<p class="price">$ 7500</p>
 
					<p class="level">&quot;Advocate&quot;</p>
					<ul>
						<li>Listing in Credits.</li>
						<li>Invite to Screening at Sundance for up to 8 people.</li>
						<li>Listing in Program Guide.</li>
						<li>Invite to Reception during Volunteer Week w/ goodie bag for up to 8 People.</li>
 
						<li>Tag on Radio/TV Champaign.</li>
						<li>Underwriting in TV Broadcast.</li>
						<li>Copies of DVD.</li>
						<li>Tag on website with voice over recommendation.</li>
					</ul>
				</li>				
				<li>
 
					<p class="price">$ 5000</p>
					<p class="level">&quot;Benefactor&quot;</p>
					<ul>
						<li>Listing in Credits.</li>
						<li>Invite to Screening at Sundance for up to 6 people.</li>
						<li>Listing in Program Guide.</li>
 
						<li>Invite to Reception during Volunteer Week w/ goodie bag for up to 6 People.</li>
						<li>Tag on Radio/TV Champaign.</li>
						<li>Tag on website with voice over recommendation.</li>
					</ul>
				</li>				
				<li>
					<p class="price">$ 2500</p>
 
					<p class="level">&quot;Supporter&quot;</p>
					<ul>
						<li>Listing in Credits.</li>
						<li>Invite to Screening at Sundance for up to 4 people.</li>
						<li>Listing in Program Guide.</li>
						<li>Invite to Reception during Volunteer Week w/ goodie bag for up to 4 People.</li>
 
						<li>Copies of DVD.</li>
						<li>Tag on website with voice over recommendation.</li>
					</ul>
				</li>				
				<li>
					<p class="price">$ 500</p>
					<p class="level">&quot;Contributor&quot;</p>
 
					<ul>
						<li>Listing in Credits.</li>
						<li>Invite to Screening at Sundance for up to 2 people.</li>
						<li>Copies of DVD.</li>
						<li>Tag on website with voice over recommendation.</li>
					</ul>
				</li>				
				<li>
 
					<p class="price">$ 15</p>
					<p class="level">&quot;Fan&quot;</p>
					<ul>
						<li>Copies of DVD.</li>
					</ul>
				</li>
			</ul>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Change #contenido

Change

#contenido .contribute-list li ul {
padding-top:8px;
}

to

#contenido .contribute-list li ul {
padding:8px 0 0;
}

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

More information

I tried your suggestion and it didn't work. I think that I didn't include enough of the stylesheet for you though so I'm trying again to give more information. Let me know if I should include the whole sheet. Thanks for helping me.

/*** contribute ***/
 
.contribute{
	height:auto;
	padding:10px 4px;
}
 
#contenido h2{ 
	font-size:1.4em; 
	font-weight:normal; 
	color:#2C2B26; 
	font-family:Georgia;
	border-bottom:1px solid #CED1C8;
}
 
#contenido .contribute-list{
	margin:16px 0;
	padding:0 0 15px 0;
	list-style:none;
	height:600px;
}
 
/*** Hack IE6 ***/
 
* html #contenido .contribute-list{
	margin:16px 0;
	padding:0 0 10px 0;
	list-style:none;
}
 
* html #contenido .contribute-list li{
	float:left;
	display:block;
	width:18%;
	padding:0 4px;
	border-left:1px solid #CED1C8;
	height:600px;
}
 
#contenido .contribute-list li{
	float:left;
	display:block;
	width:18%;
	padding:0 6px;
	border-left:1px solid #CED1C8;
	height:600px;
}
 
#contenido .contribute-list li.first{
	border-left:none;
}
 
#contenido .contribute-list li ul {
padding:8px 0 0;
}
 
#contenido .contribute-list li ul li{
	border-left:none;
	float:none;
	width:90%;
	background:url(../images/bullet.gif) no-repeat 0 11px;
	padding:6px 8px;
	line-height:1.1em;
	height:auto;
}
 
.price{
	color:#CC0000;
	font-family:Georgia;
	font-size:1.4em;
}
 
.level{
	color:#786754;
	font-family:Georgia;
	font-size:1.1em;
	font-weight:bold;
}

kilavasun
Offline
Regular
Brasil
Last seen: 11 years 4 weeks ago
Brasil
Timezone: GMT-3
Joined: 2009-03-23
Posts: 17
Points: 0

My solution :)

Hello bluewaves!

By default, lists (both orderly and disorderly) have a margin (indentation) on the left side. So, if you want to use li itens as content, you'll need to cut off that margin. Very simple. See:
ul { margin: Xpx Ypx Zpx -40px; } or ul { margin-left: -40px; }
Both methods worked perfectly with me, and I tested it with firebug.

In your case, it'll be like this:

#contenido .contribute-list li ul{
	padding-top:8px;
	margin-left: -40px;
}

I hope the code works. In any case, give me a feedback! I would like to know if I am helping someone Smile

Best regards,
kilavasun

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No you shouldn't use a

No you shouldn't use a negative margin it's completely unnecessary. Both padding-left and margin-left are used to control ul indent depending on browser being used so both need to be zeroed i.e all you need to do is express a value of '0' for those properties.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

Worked in IE, not Firefox

I tried this:

#contenido .contribute-list li ul{
	padding-top:8px;
	margin-left: -5px;
}

It looks great in IE, but not in Firefox.

Any ideas?

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

Didn't work

I tried your solution as well, but it didn't work. I wish I understood this a little better. Smile

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 48 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Deuce

Deuce wrote:

Change

#contenido .contribute-list li ul {
padding-top:8px;
}

to

#contenido .contribute-list li ul {
padding:8px 0 0;
}

This should work..

I barely skimmed Deuce's example before trying to fix the issue, and this is exactly what I came up with (ie: I changed this using Firebug, and everything popped into place).

When you say that this didn't work.. what browser doesn't this work in?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

IE uses margin as the

IE uses margin as the default where as Firefox uses padding
Use my original example, just add
margin: 0;
to it.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

Thank you for your help!

I so appreciate everyone's help. This is what finally made it
look good in Firefox and IE. So this problem is solved, however, I do have another question.

Sorry.

#contenido .contribute-list li ul{
	padding:8px 0 0;
	margin-left: -5px;
}

Perhaps someone can enlighten me about why Firefox shows my form at: [url]http://www.spiritofvolunteerism.com/forms.html
[/url] off centered while IE shows it perfectly aligned.

This is the html coding on the page that prefaces the table.

#<div id="contenido" class="contribute">
			<h2>Forms</h2>
			<p style="padding:50px 0 50px 0; text-align:center;">
 
			<form method="post" action="formssecure.php">

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

Thank you for your help!

I so appreciate everyone's help. This is what finally made it
look good in Firefox and IE. So this problem is solved, however, I do have another question.

Sorry.

#contenido .contribute-list li ul{
	padding:8px 0 0;
	margin-left: -5px;
}

Perhaps someone can enlighten me about why Firefox shows my form at: [url]http://www.spiritofvolunteerism.com/forms.html
[/url] off centered while IE shows it perfectly aligned.

This is the html coding on the page that prefaces the table.

#<div id="contenido" class="contribute">
			<h2>Forms</h2>
			<p style="padding:50px 0 50px 0; text-align:center;">
 
 

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I'm going to guess that it

I'm going to guess that it may be one of your 71 errors

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 14 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Deuce's answer is correct.

Deuce's answer is correct. IE7, and probably 6 (I didn't check) are likely responding to this:

<p style="padding:50px 0 50px 0; text-align:center;">
 
			<form method="post" action="formssecure.php">
They're likely treating the form as an inline element, since

is not allowed to contain a block element.

IE8 gets it right, as does Firefox. Get the form out of the

, and set table's margin to {:0 auto;}. I have to ask why you'd use a table, though. Once you've fixed the structure, IE6, and maybe 7 will require that you set the table's width to some small value, but do it only for them. IE<8 does not properly shrink-wrap tables.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

Error messages

I wonder why this service pulls up errors that aren't really there? I have a hard time with that one. They listed many things that just weren't even on my page. Many were, but they certainly were enough that weren't there that made me wonder. Why does that happen?

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

Removing that tag did work

I removed that tag and replaced it with a center tag and it worked fine.

I used a table because I don't know how to use anything else. Could I have done it another way?

I obviously don't know what I'm doing to make it right.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 14 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Those errors are, indeed,

Those errors are, indeed, there. For example the first error:

Quote:
# Error Line 42, Column 36: NET-enabling start-tag not immediately followed by null end-tag

type="text" name="first_name" / size="20">

This error may occur when there is a mistake in how a self-closing tag is closed, e.g '.../ >'. The proper syntax is '... />' (note the position of the space).
# Error Line 42, Column 36: end tag for "input" omitted, but OMITTAG NO was specified

type="text" name="first_name" / size="20">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 41, Column 92: start tag was here

…quired">First Name: ".

Go through the errors one by one; they even tell you where error error is. Fix what they say is wrong. Some are difficult to figure out, because an error may have occurred earlier and not manifested itself immediately. When you've fixed what you can, revalidate and start over. Some of the fixes may have taken care of a later error also. When you've got rid of all you can, and you're right down to "I have no clue", ask us. We can probably explain it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bluewaves
Offline
newbie
USA
Last seen: 11 years 30 weeks ago
USA
Joined: 2009-03-24
Posts: 9
Points: 0

Wow -

The problem is I don't understand their error messages. Even the first error I am stuck on:

Line 42, Column 53: end tag for "input" omitted, but OMITTAG NO was specified

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

What does that mean? I tried both endings and they were both flagged.
or

Neither one worked.