TalkPHP - Problem with aligning list

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Problem with aligning list (http://www.talkphp.com/xhtml-html-css/2574-problem-aligning-list.html)

Problem with aligning list

I'm trying to display a list that uses my own image for the button and where the list items are on two lines like

HTML Code:

 Line 1

 text



 Line 2

 text

It all looks fine in FireFox but in IE, the second line is flushed left and the space between the button image and the text is too great. The text appears as

HTML Code:

 Line 1

text



 Line 2

text

The css I am using is

HTML Code:

ul { 

 list-style-image: url('images/bullet.jpg');

 font-family: Verdana, Arial, sans-serif;

 font-size: 10px;

 font-weight: normal;

 padding-left: 20px;

 margin-left: 0;

 margin-top: .5em;

}

li {

  margin-left: 0;

  margin-right: 0px;

  margin-top: .5em;

  margin-bottom: .5em;

  font-weight: bold;

  border: solid 1 px;

}

and the list code is

PHP Code:


		
			
<ul>

 <li><a href="somedomain.com">Line 1<br>text</a></li>

 <li><a href="somedomain.com">Line 2<br>text</a></li>

</ul>

Would someone please point out what I am doing wrong?

I wouldn't recommend using a custom image for an LI. Rather, set the background of the LI to your custom image, and set list-style-type to none. Like so:

css Code:

list-style-image: none;
background: transparent url('images/bullet.jpg') center left;

This way it'll be all the same in all the browsers. Well, this way at least you stand a little more chance!

Incidentally, welcome to the community. It's good to have you here :-).

Thank you for the quick response. I tried making the changes you suggested

HTML Code:

ul { 

 list-style-image: none;

 font-family: Verdana, Arial, sans-serif;

 font-size: 10px;

 font-weight: normal;

 padding-left: 20px;

 margin-left: 0;

 margin-top: .5em;

}

li {

 background: transparent url('images/bullet.jpg') center left;

 background-repeat: no-repeat;

 margin-left: 0;

 margin-right: 1px;

 margin-top: .5em;

 margin-bottom: .5em;

 font-weight: bold;

}

Unfortunately, that causes the default bullet to be displayed along with mine and the alignment problem is still there.

Thank you for the welcome. I ran across this site while searching for a solution to a php problem I was having. I was so pleased as I skimmed the various formums since there seemed a wealth of information. I look forward to going through past posts when I have the time.

set list-style: none; instead of list-style-image: none; That will get rid of the default bullets.

Thanks. That took care of the default image. Does anyone have any suggestions on how to align the text? I can force it aligned by adding padding for the line but then FireFox is out of alignment.

To deliver IE specific code, use IE conditionals.

For example:

Code:

<!--[if IE]>

        <link rel="stylesheet" href="..." type="text/css" media="screen, projection" charset="utf-8" />

<![endif]-->



<!--[if lte IE 6]>

        <link rel="stylesheet" href="..." type="text/css" media="screen, projection" charset="utf-8" />

<![endif]-->



<!--[if !IE]>

        <link rel="stylesheet" href="..." type="text/css" media="screen, projection" charset="utf-8" />

<!-- <![endif]-->

I'm not at a point where conditionals would make a difference since none of the code I have tried works in IE.

HTML Code:

ul    {margin:0.5em 0 0 20px; list-style:none; font-family: Verdana, Arial, sans-serif; font-size: 10px;}

ul li {margin:0 1px 1em 5px; background: transparent url('images/bullet.jpg') center left; background-repeat: no-repeat; font-weight: bold;}

Should work fine. Both IE and Firefox maintain the margin, no matter how many breaks you use in your <li> </li> elements.
-m

My problem turned out to be a silly coding problem. The list is in a table but the <td> was missing. I found that while I was setting up a test site to show it here. I do apologize for wasting the members time with such a mistake but I may not have found it without everyone's help.

After fixing that, there is only one problem left. The bullet is not in the same position for lists that have two lines and for one that has one line. I have uploaded an example here New Page 1 The complete code for that example is as follows. I tried playing around with the settings but I don't really know which would control something like that, even if it is controllable. I would appreciate it if someone would take a look at this last problem.

HTML Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>New Page 1</title>

<style type="text/css">

ul    {margin:0.5em 0 0 20px; list-style:none; font-family: Verdana, Arial, sans-serif; font-size: 10px; border: 0px; padding: 0px;}

ul li {

 margin:0 1px 1em 1px;

 background: transparent url('images/bullet.jpg') center left; background-repeat: no-repeat; 

 font-weight: bold;

 padding-left: 20px;

}

</style>

</head>

<body>

 <table border="0" cellpadding="0">

  <tr>

   <td>

    <ul>

     <li><a href="somepage.com">Line One<br>Line Two</a></li>

     <li><a href="somepage.com">Line One<br>Line Two</a></li>

     <li><a href="somepage.com">Line One<br>Line Two</a></li>

    </ul>

   </td>

  </tr>

  

  <tr>

   <td>

    <ul>

     <li><a href="somepage.com">Line One</a></li>

     <li><a href="somepage.com">Line One</a></li>

     <li><a href="somepage.com">Line One</a></li>

    </ul>

   </td>

  </tr>

 </table>

</body>

</html>

You want to change the following,

background: transparent url('images/bullet.jpg') center left;

to

background: transparent url('images/bullet.jpg') no-repeat top left;

Thanks, that made them all consitent. But the bullets are positioned too high now (more so in IE). See example Are there commands that allow specific positioning like margin and padding that will fix this?

You can play with the margin/padding and/or line-height settings, but your best bet honestly is to edit the image and add some whitespace to the top of it. Do you have anything like Jasc PaintShopPro, perhaps lucky enough to run Adobe Photoshop, or perhaps you've got the Gimp? Anything would work.

If you don't, use this copy I edited for you.
-m

Use something like

css Code:

background: transparent url('images/bullet.jpg') no-repeat 5px 0;

Change the 5px until it is centered with the first line.

I didn't realize you could give it a pixel setting... always something new to learn.

Thanks for everyone's help. The display is still not correct but getting closer. I will keep playing around with all of the suggestions.

Using the example site you listed above I edit the CSS and this lined the bullets up with the center of the first line.

css Code:

ul    {margin:0.5em 0 0 20px; list-style:none; font-family: Verdana, Arial, sans-serif; font-size: 10px; 
 border: 0px;
 padding: 0px;
 }
ul li {
 margin:0 1px 1em 1px;
 background: transparent url('images/bullet.jpg') no-repeat 0 2px;
 font-weight: bold;
 padding-left: 20px;
}

Originally I had my numbers backwards. It's x position and then y position.

What browser are you using to view it? I ask because I made the change you suggested but when I view this page in IE 7, the bullet is too high. I've tried all of the suggestions mentioned here and then a lot of trial and error type guesses. But I can never get it looking any better than how it is now. In FireFox, it looks pretty much perfect no matter what changes are made.

make the first number in the ul li background 50% (it might be a little high, move the number around a little if it is.)

This last was enough to make it close enough between the two browsers so I'm all set.

Once again,I appreciate everyone's input on this. I wouldn't have come close without the help found here.