469,575 Members | 1,680 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,575 developers. It's quick & easy.

unordered list indentation bug in IE?

I'm creating an unordered list that fits in a defined width on the left
side of the page. It works fine in FF but IE is another story.

Here is a watered-down version of the code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
* {margin: 0px; padding: 0px; border: 0px; border: 1px solid
red;}
</style>
</head>

<body>

<div id="links_rail" style="margin-left: 50px;">

<ul id="links" style="width: 100px; list-style: none inside
url(image.gif);">
<li>-the quick brown fox jumped</li>
<li>-over the lazy dog.</li>
<li>-the quick brown fox</li>
<li>-jumped over <brthe lazy dog.</li>
<li>the quick</li>
<li>brown fox</li>
</ul>

</div>

</body>
</html>

Basically, is there a way to get the list items to indent at the same
position of the first list item after the image.

It should look like so (like it does in FF):

-----------------------------
* the quick brown
fox jumped
* over the lazy
dog
* the quick brown
fox
* jumped over
the lazy
* the quick
* brown fox
-----------------------------

But it looks like this in IE:
-----------------------------
* the quick brown
fox jumped
* over the lazy
dog
* the quick brown
fox
* jumped over
the lazy
* the quick
* brown fox
-----------------------------

Thanks. Let me know if you need any more information. I've been
searching for weeks to find an answer but maybe I'm not searching for
the right things.

Aug 3 '06 #1
5 5857
si******@gmail.com wrote:
I'm creating an unordered list that fits in a defined width on the left
side of the page. It works fine in FF but IE is another story.

Here is a watered-down version of the code:
What happens if you increase the width, from 100px to something more
reasonable? From your pseudo-code, it is hard to tell your actual
intent. How about posting a URL to a real-world example of what you are
trying to do. Since we don't have "image.gif" we can guess no further.

IE has always treated margins and paddings differently than the
standards (hence, everyone else).

--
-bts
-Warning: I brake for lawn deer
Aug 3 '06 #2

Beauregard T. Shagnasty wrote:
What happens if you increase the width, from 100px to something more
reasonable? From your pseudo-code, it is hard to tell your actual
intent. How about posting a URL to a real-world example of what you are
trying to do. Since we don't have "image.gif" we can guess no further.

IE has always treated margins and paddings differently than the
standards (hence, everyone else).

--
-bts
-Warning: I brake for lawn deer
Forgive me for "cross-posting." I didn't know each listserv has the
same users.
What happens if you increase the width, from 100px to something more
reasonable?
That's the problem. I cannot increase the width because I have items
on the left and right side of the page (so if I increase the width of
this then I will have to decrease the width of everything else and
let's not get started with the IE 3px bug). Image.gif is just a small
image (15 x 15 or smaller) of a plus sign. The page is password
protected so that is why I posted a waterd-down version. Not much
difference from that code. Is there any way to achieve this though?

I tried adding display: inline but the list bullets "disappeared" and
tried just about everything else but nothing works.

Thanks

Aug 3 '06 #3
si******@gmail.com wrote:
Beauregard T. Shagnasty wrote:
>What happens if you increase the width, from 100px to something more
reasonable? From your pseudo-code, it is hard to tell your actual
intent. How about posting a URL to a real-world example of what you
are trying to do. Since we don't have "image.gif" we can guess no
further.

IE has always treated margins and paddings differently than the
standards (hence, everyone else).

Forgive me for "cross-posting." I didn't know each listserv has the
same users.
Ok. This is not a "listserv", this is Usenet. Google Groups is merely an
archive of Usenet, and a poor interface to it. Perhaps you would
consider getting a newsreader and subscribing to your ISP's news
service?
http://en.wikipedia.org/wiki/Usenet
>What happens if you increase the width, from 100px to something more
reasonable?

That's the problem. I cannot increase the width because I have items
on the left and right side of the page (so if I increase the width of
this then I will have to decrease the width of everything else and
let's not get started with the IE 3px bug). Image.gif is just a
small image (15 x 15 or smaller) of a plus sign.
What happens if you leave off the image, and allow the <lito use its
own bullet/circle/square ... same problems?
The page is password protected so that is why I posted a waterd-down
version. Not much difference from that code. Is there any way to
achieve this though?
Can you make up a dummy page, with all the rest except your secret
content (greek something instead), and post it in an accessible spot?
I tried adding display: inline but the list bullets "disappeared"
and tried just about everything else but nothing works.
inline would be horizontal, rather than the vertical you are looking
for.

--
-bts
-Warning: I brake for lawn deer
Aug 3 '06 #4
Rik
si******@gmail.com wrote:
<ul id="links" style="width: 100px; list-style: none inside
url(image.gif);">

Basically, is there a way to get the list items to indent at the same
position of the first list item after the image.

It should look like so (like it does in FF):

-----------------------------
* the quick brown
fox jumped
* over the lazy
dog
But it looks like this in IE:
-----------------------------
* the quick brown
fox jumped
* over the lazy
dog

Thanks. Let me know if you need any more information. I've been
searching for weeks to find an answer but maybe I'm not searching for
the right things.
Euhm, set a margin-left on the list and list-style-position: outside instead
of inside? Further, when styling list, it's usually a goo idea to force
margins/paddings to you wishes, as browsers treat them very differently

Taking you code:
#links{
margin: 0 0 0 20px;
padding: 0;
width: 80px;
list-style-type: bullet; /* always a good choice to give a backup if the
image doesn't work */
list-style-position: outside;
list-style-image: url(image.gif);
}

Works generally the same here in FF, MSIE, Opera & Netscape.

Grtz,
--
Rik Wasmus
Aug 5 '06 #5

Rik wrote:
>
Euhm, set a margin-left on the list and list-style-position: outside instead
of inside? Further, when styling list, it's usually a goo idea to force
margins/paddings to you wishes, as browsers treat them very differently

Taking you code:
#links{
margin: 0 0 0 20px;
padding: 0;
width: 80px;
list-style-type: bullet; /* always a good choice to give a backup if the
image doesn't work */
list-style-position: outside;
list-style-image: url(image.gif);
}

Works generally the same here in FF, MSIE, Opera & Netscape.

Grtz,
--
Rik Wasmus
Rik,
Your post and another post helped me solve the problem. And
thanks for the pointers, too! Sorry I couldn't post a sample URL but I
don't have a personal website and at work the URLs are IP protected
(among other things).

Thanks again!

Aug 7 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Steve Dorsey | last post: by
35 posts views Thread by Thierry Loiseau | last post: by
1 post views Thread by simplico | last post: by
4 posts views Thread by deko | last post: by
3 posts views Thread by laredotornado | last post: by
2 posts views Thread by asc4john | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.