Display Bullet Points the Same (IE & FF)

Dysan

Hi, how do I display bullet points exactly the same in the image found at the following URL?
I have attempted this (See Image) but every time I change it in FF it messes things up in FF.

http://www.freewebs.com/ticstacs/Bullets.bmp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body
{
  MARGIN: 18px;
  PADDING: 0px;
}

#container
{
  WIDTH: 727px;
  HEIGHT: 409px;
  BORDER: 4px solid rgb(0,0,0);
  BACKGROUND: rgb(255,255,255);
}
</style>
</head>

<body>
<div id="container">
  <ul id="bullets">
    <li>Bullet Point One</li>
    <li>Bullet Point Two</li>
    <li>Bullet Point Three</li>
    <li>Bullet Point Four</li>
  </ul>
</div>
</body>
</html>

leatherback

I am not sure what you are asking. the code you showed us does not contain any custom formatting for the bullets. And yes. IE and FF are different. If you want things exactly the same, you might be hard pushed, have a look at bullet-style. I think there is an option to use an image as bullet.

Dysan

Sorry, forgot to add code. 🙂

Save the following code and the image found at the URL, and place it them both in the same folder. I'm trying to line up the HTML bullet points, with the ones found on the image. Problem is, it messes up on another browsers upon doing this. Why is this?

http://www.freewebs.com/ticstacs/Bullets.bmp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body
{
  MARGIN: 18px;
  PADDING: 0px;
}

#container
{
  WIDTH: 727px;
  HEIGHT: 409px;
  BORDER: 4px solid rgb(0,0,0);
  BACKGROUND: url(Bullets.bmp) no-repeat;
}

ul
{
  TOP: 130px;
  LEFT: 16px;
  POSITION: relative;
  FONT-FAMILY: arial;
  FONT-SIZE: 75%;
}
</style>
</head>

<body>
<div id="container">
  <ul id="bullets">
    <li>Bullet Point One</li>
    <li>Bullet Point Two</li>
    <li>Bullet Point Three</li>
    <li>Bullet Point Four</li>
  </ul>
</div>
</body>
</html>

leatherback

because different browsers have different interpretations on the css standards, or blatently ignore it. I am sure that with a lot of tweaking you could get really close. But it will not be easy to get this right in all browsers & resolutions

Weedpacket

But as leatherback said earlier, have a look at using the list-style-image property to specify an image for list item bullets; instead of (as far as I can see) one image with all the bullets in it - which requires making HUGE assumptions (which will usually be wrong) about exactly how large the text on the page will be.

NogDog

And of course, probably 99.9999999% of your site's visitors couldn't care less what size the bullets are, so the other question to ask is whether it's even worth thinking about.