Solved

Unordered List apacing in IE and Firefox

Posted on 2006-06-25
4
916 Views
Last Modified: 2008-03-28
Hi,

I have a simple ul set up in html as follows :

        <ul>
             <li>Point One</li>
             <li>Point Two</li>
             <li>Point Three</li>
             <li>Point Four</li>
       </ul>


and in my CSS for the ul all I have is :

ul
{
  list-style-image: url(pathtogif/bull.gif);
  list-style-type: circle;
}

In Firefox this shows as nicely indented list using my gif.  In IE it also indents it (which I want), however, the spacing between the bukket points in IE is greatly reduced.

I guess I have a couple of questions :

a) What is the default padding/margin that it is applying

b) What values do I need to set in my CSS so that IE renders the list in the same way as Firefox ie. slightly more space between each li item

Cheers
0
Comment
Question by:JoHarris
  • 2
  • 2
4 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 250 total points
Comment Utility
Note the the "bullet" is called a "marker".

Its location is controlled by the "marker-offset" CSS property:
http://www.blooberry.com/indexdot/css/properties/list/markeroff.htm

Unfortunately, a lot of browsers don't support that property...  If i remember correctly Opera supports it.  I don't know about Safari.

You can try adding some padding-left to the <li>...
Another solution is to use your image as background-image on your <li> and combine that with some margins and padding then you should get consistant behaviour on all browsers.

The default marker offset is completely different in IE and FF.  Seems like one calculates it from the left of the marker, the other from the right of the marker.  No matter what you do, you'll get inconsitant behaviour
0
 

Author Comment

by:JoHarris
Comment Utility
Thanks for that.  How about the vertical spacing - is this a know problem too.

For example in ie the list displays as follows:

Point One
Point Two
Point Three
Point Four

Where as firefox displays it with more vertical space :

Point One

Point Two

Point Three

Point Four
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
Comment Utility
using image markers is known to be inconsistant.
maybe you can use a background-image instead.
if you need to use one browser as a reference, use Opera or Safari... those are the browsers that best respect the standards.  Firefox is pretty good at respecting the standards too, but still has some bugs/mistakes, especially with lists items.
0
 

Author Comment

by:JoHarris
Comment Utility
That's smashing - thanks for the help!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now