PDA

Click to See Complete Forum and Search --> : Display Bullet Points the Same (IE & FF)

Dysan
06-12-2008, 12:24 PM
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>
Declan1991
06-12-2008, 12:45 PM
And how is it looking at the moment? What is the problem?
Dysan
06-12-2008, 12:50 PM
Using the image at the stated URL as a background image, how do you display HTML bullet points on top of the images bullet points.

At the moment, the bullets are to much to the left and the spacing between points is to small.
Dysan
06-12-2008, 01:05 PM
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>
Centauri
06-12-2008, 01:20 PM
For cross-browser uniformity with lists, you need to control both padding and margin of the <ul>. The normal list indent is provided in different ways between browsers, with FF using left padding and IE using left margin.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>bullet test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body
{
margin: 18px;
padding: 0px;
}

#container
{
width: 727px;
height: 409px;
border: 4px solid rgb(0,0,0);
background: rgb(255,255,255);
}
#bullets {
margin: 125px 0 0 40px;
padding: 0 0 0 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
}
</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>