View Full Version : dern you lists! DERN YOU!

02-09-2004, 06:09 PM

I've gotten a lot mroe comfortable with CSS-P in a short amount of time. Something which makes me happy and confident.

However, you're never all the way there, on the web, of course, so I've still got some weird issues I can't reconcile.

Mainly, the unruly bahavior of lists. This is something that I initially thought was the fault of the default stylesheets for particular browsers overriding my rules, despite my best efforts. But it seems to happen on all browsers, so I'm not sure what I need to do. Here is an example:


This page has extra padding and/or margins that I can't seem to account for. Here is the markup(with only on LI for space in the post here) and style rules for that list:

<ul id="members">
<img src="images/members_dummy_avatar.gif" alt="No picture available." class="member_avatar" />
<p><strong>Thomas Bain</strong><br />
Minneapolis, MN<br />
612.521.1186<br />
<a href="javascript:;">Send me email!</a></p>

#members ul {
margin: 10px 0px;
padding: 0px;
list-style: none inside;
background: #FFF;

#members li {
padding: 0px;
margin: 10px 0px;
font-size: .8em;
list-style: inherit;

.member_avatar {
float: left;
margin: 0px 5px 5px 0px;
border: solid 1px #666;

Willy Duitt
02-09-2004, 06:43 PM
Your subject title is completely inappropriate!
The shouting is bad enough, but your use of profanity... :rolleyes:

Next time, please think about our younger viewers.
Hopefully a MOD will shortly come by and fix your foopah....


02-09-2004, 06:50 PM
Oh please..

You've clearly forgotten how to perceive correctly! Your filters are in need of calibration! You've missed the point in favor of focusing on a completely irrelevant and inconsequential detail!

I am truly sorry that simple synonyms, simple words of the language, can arouse such an infantile reaction in you. Haha, and "think of the children," he says..

I will pray for you.

That aside, are there any reasonable people that can contribute to this?

P.S. The term is "faux pas."

Willy Duitt
02-09-2004, 06:54 PM
While you pray for me, I will pity you. :p


02-09-2004, 07:08 PM
Since this thread gone south already :p .....
My contribution would be :D :D :D "Bad dancer blames his balls for getting in his way" :D :D :D
If your title read "I am having trouble with styling lists", people may be more inclined to help you....

02-09-2004, 07:31 PM
I apologize. I gave you guys the benefit of the doubt, and assumed a certain amount of reason on your parts. My mistake.

Now that these gentlemen have adequately illustrated their relevance to this community, I will ask again.. are there any reasonable folks that can give some productive feedback?

02-09-2004, 07:34 PM
well... I thought it was the funniest post heading I've seen in some time. Come on, guys, have a sense of humor... ;)

Anyway. I'm pretty sure the problem is coming from the "float:left;" you're using for the <img> in the list. It takes the element out of the "flow," so to speak, and that's why the next <li> starts so far to the right. I ran into the same problem on my website on this page (http://richardmedek.com/credits/) and used this to fix it:
#whatever li {

Hope this helps...


02-09-2004, 08:15 PM
Thanks, Rich. I actually did that exact same thing for another list where I was having similar issues and it solved my issue there.

Here however, that doesn't seem to help. There is still what appears to be an extra default margin or padding on the entirely list itself.

Roy Sinclair
02-09-2004, 08:51 PM
If you're not sure where extra space is coming in, add a simple border to the various elements so you can see which element is bringing in the extra space. Then you'll be able to focus on the right element.

02-09-2004, 09:01 PM
Yup, a technique I am familiar with. And actually, us enlightened Firebird users have the added benefits of the INVALUABLE Web Developer Toolbar extension, which can be found here:


At least, it should be, but attempts to bring up the page just now returned "Not Found". Hopefully it's just a temporary server issue.

At any rate, here is a screen capture of my browser window after selecting "Outline Block Level Elements".


As you can see, my UL box appears to fill its container as it should. And the LI content fills the LI box as well. But there remains either some default padding on the UL or margins on the LI that I can't seem to get around for some weird reason.

Roy Sinclair
02-09-2004, 09:08 PM
Looks like a case of bad specs: You have a rule #members ul { } which means any ul inside whatever tag has the id of members. You should have #members { } without the ul since you want that tag to apply to the tag with the id of members and not some additional tag nested inside it.

02-09-2004, 09:11 PM
If you think that this:

#members ul {
margin: 10px 0px;
padding: 0px;
list-style: none inside;

styles this:

<ul id="members">

you are wrong :p

Sometimes it helps to add a line:
background: #f00;
just to see if you got your selectors right...

EDIT: Roy posted the reasons why....

Roy Sinclair
02-09-2004, 09:24 PM
Oh yeah:

Good for you, you're coding valid pages.

Shame on you, you can express frustration without resorting to even mildly off color language. Yes, most people don't think about using such langauge these days but what's the use of having language that can be shocking if everyday usage removes all of it's shock value? We also cater to an international audience which may not even be aware of certain colorful expressions so your title might read as: "object to hold water back" you lists! "OBJECT TO HOLD WATER BACK" YOU!

02-09-2004, 09:31 PM
ah yes! ain't this always the way it goes.. small little oversights. especially persnickity when you're copying and modifying rules from other sites. my lists were in a div with an ID before.

gah! thanks for helping me find the retardedly simple solution to this "problem".

as for the language.. GET OVER IT ALREADY! geezus..

a sincere THANKS to all who HELPED, however.

02-09-2004, 09:40 PM
that last comment about context is just laughable..

for one, because if anybody is going to be reading a site in English, and they don't know English.. well, that's not my problem, regardless of the vocabulary i employ.

but mostly it's funny because you're example is useless since "****" and "***" are two completely different words. homonyms, yes, but you've apparently forgotten that this is the web, where the homonym is meaningless as far as rendered text goes...

02-09-2004, 09:49 PM
haha.. also!

since it was brought up: "everyday" use of "color" words doesn't necessarily strip their meaning. you've confused the word's meaning with it's connotation.

i can use "awesome" a million times over to describe the size of Jupiter, for example, and after a million uses, you wouldn't suddenly find yourself having no context for the size i am describing.

similarly, if i were to say "what's with these ******** lists!?" repeatedly, it doesn't descrease the emphasis implied by "********". what it could do, however, (and this is up to YOU) is decrease how irrational your reaction to a simply SYNONYM is when you realize that i could just as easily said, "what's with these confounded lists?" or "what's with these unruly lists?"

in fact, as a web developer, i find "****" more appropriate, as it is basically a dynamic variable of a word, able to take on variable meanings as context implies.

but the short reply would have simply been: you guys buggin' on my choice of words are way too uptight. fact. :) ooh, i can use emoticons too!

have a nice day, kids!

02-10-2004, 03:07 AM
coder_seth... In the future please watch the language as this is an oft traveled forum of family oriented individuals and children.

Also as a word of advice. Remarking with sarcastic intonations and useing a frank attitude of deal with it this is who I am, is not a good way of seeking help.

For future reference re-read the posting rules: http://www.codingforums.com/rules.htm

1.1) Always be respectful and polite when posting- There is absolutely no excuse to be rude, confrontational, or hostile when posting on CodingForums.com. This is a place where web programmers come together to solve problems, not create them. Flaming can get you banned.

1.5) No objectionable content- Do not post content/subject/links that may not be appropriate to everybody, including minors. Examples include adult links, hateful/ distasteful content, vulgar language etc.

Closing thread, questions asked and answered.