473,324 Members | 2,124 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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 6032
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Steve Dorsey | last post by:
Hello I'm creating an unordered list which will be used as a nav element on my page. I am using the following CSS: #nav { position:relative; left:10px;
35
by: Thierry Loiseau | last post by:
Hello all, and Happy end year 2005 ! Well, I would like to obtain a list of all JavaScript var statement, With "for...in" perharps ? That is bellow my recent test here, but the problem is...
5
by: ibiza | last post by:
Hi all, I have a question which I have no ideal of the answer...I am currently working on a web application and at some time, I have a string representing a short text. This could be a simple...
1
by: simplico | last post by:
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>...
4
by: deko | last post by:
There's a pretty good tutorial here: http://www.mediacollege.com/internet/css/ul-list.html but the problem is *none of the directive seem to be doing anything* for me. What I want is a) no...
3
by: User | last post by:
Hi, Is it possible to transform Ordered/Unordered list into navigation dropdown menus? Is this effect achieved by CSS? or via Javascript? PLease advise Thanks.
3
by: laredotornado | last post by:
Hi, On both Firefox and IE, how can I replace the bullets before unordered list items, with double arrows ">>" throughout my site? Thanks, - Dave
2
by: torweb | last post by:
I'm using an image for an unordered list, which works fine. The problem is, the image is also appearing in my numbered "ordered list." Here is my code for the unordered list:...and thanks in...
2
by: asc4john | last post by:
When including an unordered list in an unordered list: Should it be included as a "list" item as in: <ul><liitem</ li><ul.... </ul<liitem</li</ul> or included in the LI element as in:...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.