Preserved Topic: html: <li> tag ? (Page 1 of 1)

ok, if you use the <li>-tag in an ordered list <OL>, then the items are set to the right some pixels automatically.

is it possible to avoid this?

it's necessary for me because im having a hierarchical tree in a very thin table.

hehe
since im such a genius, i have already found another solution:
with php, i can generate the list dynamically using a simple counter!

but im still interested if it's possible in html only.

GRUMBLE: I have done something similar (I didn't want such big indents in unordered lists - that default is pretty large) - I haven't checked my code but off the top of my head I would do this:

li {

  margin: 0px;

}

As I've not removed the whole indent I'm not sure if this brings you flush up with where all the other elements starts and you will probably have to fiddle with the margin (and pos. the padding) but you may need a slightly negative margin.

As an aside - do you think its worth having a separate CSS forum as quite a few CSS questions are being asked these days (often in DHTML, site reviews and all browsers suck) and it might be a good idea to centralise things. I'll volunteer to be a mod if it becomes reality. Thoughts?

Emps


You're my wife now Dave

thanks for the idea, emps. i havent tried it yet, but i'll do so soon.

for the forum: maybe another one would be useful but i think renaming this one could also help.
it could range from simple html over css to complex javascript and DOM.

There is also &middot; character that might be helpfull in some situations.

· Boo
· Foo

What about if you just use the

&#149

?

Yes it is possible to make a bullet with graphics or special characters but the advantage of LI is that it introduces structural elements to your page. You could if you liked use nothing but P and/or DIV tags for virtually everything on your page but that wouldn't help browser used by the blind and search engine robots so it is best to use HTML elements that give the page structure (like headers and lists) and use CSS to make them look the way you want. Or at least that is my opinion.

Emps


You're my wife now Dave

This is something I had a huge headache with last year. I tried many CSS solutions, but the fact is that Netscape (including Mozilla!) includes a certain amount of indentation that still exists even at margin: 0. 0 in IE on the other hand sets your list flush with the rest of the elements. You can achieve the same effect in NS by setting a NEGATIVE margin, but that will make it go off the edge in IE.

Normally you could use NN4's inability to @import to add a separate margin rule for IE, but NS6 renders lists like NN4 AND supports @import, so you will need some sort of code to load separate stylesheets (i use PHP).

There is an easy solution to all this (although I don't know what it does in Lynx). Replace your <UL> with a <div>. <div>s have standard margins where 0 means 0, and in every browser I've checked it renders lists beautifully (unordered, I haven't tried ordered).

-jiblet

That leads me to a question. Has anyone ever tried aligning an image to the left of a <ul>? My bullets get chopped off by the image. An example is here. Note that the list starts to the top right of the photo (like it should), but that the bullets are chopped off by the photo. I've thought about putting a little intro paragraph before the list, but different resolutions means I'd have to make sure it (paragragh) was long enough for higher resolutions. I hate to specify a specific CSS setting for that list, because the part after the photo won't look right.

And this happens on any page like this that has the photo (who's position I can't really change - template and all....) and a list at the top.

Anyone seen this?

Hmmm looks like there is no easy solution.

jiblet: I use PHP to create the external stylesheet so you can use one stylesheet for all browsers (makes style sheet swapping simpler) and it would help here.

Pugzly: Have you tried adjusting the padding and margins - I had a problem with truncation when using IE filters on lists and fiddling with the two fixed it.

Emps


You're my wife now Dave

Pugzly, as a quick solution you can specify right margin for left aligned table that's containing image...

<table align=left cellpadding=0 cellspacing=0 border=0 width=190 style="margin-right:20px;">other code here...

sash, cprompt, as i already said im using OL-tag - ordered list - and a simple bullet wouldnt do the job.

well, meanwhile i forgot the whole html job and solved everything in php with nbsp; and variables...
better this was.

[This message has been edited by me (edited 11-19-2001).]

Emp, it's really not complicated the way I do it. All my styles go into my main stylesheet which is loaded in every browser (that way the styles also show in Dreamweaver).

PHP then checks your browser. If you are not using < N5, it loads the 2nd stylesheet that contains a handful of slight changes from the NN4 version (mostly margins). Then it checks if you are using Netscape 6 in which case it loads a 3rd stylesheet that contains a single rule.

If anything I find it easier than mixing up logic and code in one file. Best of all I can use a stylesheet editor if I wish.

-jiblet

Y0 pugzly, the stylehseet is designed so the list lines up pretty close in IE.

Unfortunatlely unless you use my trick I mentioned above about replacing your <ul> tag with <div> then there is no way to get the same indentation in NS6 and IE. You can however change the stylesheet so NS6 gives you the flush lists and IE indents them.

-jiblet