Sidebar list wrap problems

When list items in the sidebar wrap, they don't inherit their margins.

[alephOne]

On my site, <snip>, there's a sidebar used for navigation. The navigation items are normal unordered lists. When the line wraps for one of the list items (which I've currently artifically induced to be able to reproduce on other browsers that display the font size incredibly small), that wrapped line does not obey the same margin setting that the start of the list item does. If I could get them to at least keep the same margin as the rest of the list, that would be good, but it would be better if I could even tell those wrapped lines to indent a little bit. Does anybody know what's going on, and how I can fix it?

If you go to the page, you should be able to immediately see what I mean in action with the "Day the Earth Stood Still" link, which has "test test test test test" at the end of its name (the aforementioned artifical induction).

It should be noted that there are two style sheets in use: basic1.css and sophisto1.css (not that I've been reading 'Designing with Web Standards' or anything.... ;) ). I've thought that perhaps the problem lies in the interactions between the two, but I'm not certain. Again, any ideas on what's going on?

Thanks,

-ian

[edited by: Woz at 7:24 am (utc) on Nov. 20, 2004]
[edit reason] No self URLs please, see TOS#13 [/edit]

[encyclo]

Welcome to WebmasterWorld [webmasterworld.com], alephOne.

At a guess, I assume you've removed the list marker via CSS and set the margins. If this is the case, then despite the fact that the marker is no longer there, you still need to specify that it is outside rather then inside the list item. Something like:

#menu li {
list-style:none [b]outside[/b];
}

If that doesn't work, could you post a short but relevant snippet (not the whole thing) of both the HTML and CSS so we can get a clearer idea of what might be happening?

[alephOne]

Thanks for your reply!

Well, I thought I saw the problem after you pointed it out. But I modified the CSS to the following, and it didn't work.

ol, ul, li {
list-style: none outside;
font-size: 1.0em;
line-height: 1.8em;
margin: 0.2em 0 0.1em 0;
padding: 0;
}
#sidebar ul li a {
font-weight: normal;
font-size: 0.8em;
line-height: 0.8em;
margin-left: 1.5em;
margin-right: 1em;
}

The list-style-position property only should only specify whether the marker should be hung outside the list paragraphs or flush with the text, right? I think I can see your reasoning, that if it was set to

outside

it would create the desired effect, but it didn't work. Is it because there's no marker?

Thanks for your help!

-ian

[SuzyUK]

ian.. it's not the list it's the margins on the <a> elements

The <a> element is an inline element and the <li> is a flow element [w3.org] that means the <li> is just like any other flow elements in that it can contain both block and inline elements and it controls the document flow.

if you had say a paragraph (flow element) with an inline link inside it with the same properties as your links...

CSS:
p {width: 170px; background: #cfc;}
a {font-weight: normal;
font-size: 0.8em;
line-height: 0.8em;
background: #ffc;
margin-left: 1.5em;
margin-right: 1em;
}

HTML:
<p>this paragraph has a <a href="/">long wrapping link</a> inside it</p>

You probably wouldn't expect the second line of the link to indent the same as the margin... that's exactly all that's happening here.

Solution:
You can either change your link to "display: block;" or instead of margins on the link use padding on the containing block.. the <li>

Suzy

[alephOne]

Cheers Suzy! I completely forgot about inline vs. flow elements. I set the sidebar's <a> elements to "display: block", and that fixed it!

-ian