Bullet spacing difference between FF and IE

EthanCote · 16th March 07, 04:28 AM

Hello,

I am using an image for the bullet. I find that when the text wrap, the bottom text does not align properly with the top bullet point.

Is there a way to get the bottom text to align with the top text?

In the meantime, I was using a cheat system by using " " on the bottom text to add the extra spacing.

However, I find that the spacing between the bullet and the text just right of the bullet are different between Firefox (FF) and Internet Explorer (IE) browser.

The spacing is bigger in FF than in IE.

So when I use "&nsp;" I can align the bottom text perfectly either in FF or IE but not in both since the spacing are different between the two browsers.

How do I solve this?

I rather do this the correct way without having to play around with " " if possible.

You can view my problem here:
http://www.vertabase.com/test/css_help.html
(look at the bullets in the blue box)

Can someone shed some light into this situation. That would be greatly appreciated.

Thanks.

Cheers,

Chi.

zak · 16th March 07, 06:48 AM

You changed the default position of each list item's marker in your list_bgblue class (from outside to inside). So to fix the text alignment just get rid of this rule:

Code:

list-style-position: inside;

in .list_bgblue. You may have to futz around with the left margin to get the bullets back to where you wanted.

EthanCote · 16th March 07, 03:15 PM

As usual Kaz you rock!!!!

Sorry for being such a noob but I haven't much experience in coding in css and I appreciate the help that is being given.

Now I ran into another problem with extra vertical spacing. It seems each time I fixed a problem another one crop up and it seems like FF is the browser giving me problem.

Man I have to tell ya this is frustrating.

Again if you go here (and u might need to refresh browser):
http://www.vertabase.com/test/css_help.html

You will see that there is extra white spacing:
a) between green and orange nav on top
b) extra spacing on top of the "easy project management" green text
c) extra spacing on top of the "why vertabase pro" within the blue box

Why is this happening?

Thanks again for those helping me and sheding some insight into my problem.

Cheers,

Chi.

EthanCote · 16th March 07, 03:36 PM

Apparently I changed the dtd to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and this fixed everything. Just thought I updated everyone on this site.

Thanks again for the help. It is greatly appreciated!!!

Cheers,

Chi.

16th March 07, 04:28 AM	#1
EthanCote WLC Member Join Date: Mar 2007 Posts: 5	Bullet spacing difference between FF and IE Hello, I am using an image for the bullet. I find that when the text wrap, the bottom text does not align properly with the top bullet point. Is there a way to get the bottom text to align with the top text? In the meantime, I was using a cheat system by using " " on the bottom text to add the extra spacing. However, I find that the spacing between the bullet and the text just right of the bullet are different between Firefox (FF) and Internet Explorer (IE) browser. The spacing is bigger in FF than in IE. So when I use "&nsp;" I can align the bottom text perfectly either in FF or IE but not in both since the spacing are different between the two browsers. How do I solve this? I rather do this the correct way without having to play around with " " if possible. You can view my problem here: http://www.vertabase.com/test/css_help.html (look at the bullets in the blue box) Can someone shed some light into this situation. That would be greatly appreciated. Thanks. Cheers, Chi.

16th March 07, 06:48 AM	#2
zak WLC Member Join Date: Mar 2007 Location: Troy, NY Posts: 24	Re: Bullet spacing difference between FF and IE You changed the default position of each list item's marker in your list_bgblue class (from outside to inside). So to fix the text alignment just get rid of this rule: Code: list-style-position: inside; in .list_bgblue. You may have to futz around with the left margin to get the bullets back to where you wanted.

16th March 07, 03:15 PM	#3
EthanCote WLC Member Join Date: Mar 2007 Posts: 5	Re: Bullet spacing difference between FF and IE As usual Kaz you rock!!!! Sorry for being such a noob but I haven't much experience in coding in css and I appreciate the help that is being given. Now I ran into another problem with extra vertical spacing. It seems each time I fixed a problem another one crop up and it seems like FF is the browser giving me problem. Man I have to tell ya this is frustrating. Again if you go here (and u might need to refresh browser): http://www.vertabase.com/test/css_help.html You will see that there is extra white spacing: a) between green and orange nav on top b) extra spacing on top of the "easy project management" green text c) extra spacing on top of the "why vertabase pro" within the blue box Why is this happening? Thanks again for those helping me and sheding some insight into my problem. Cheers, Chi.

16th March 07, 03:36 PM	#4
EthanCote WLC Member Join Date: Mar 2007 Posts: 5	Re: Bullet spacing difference between FF and IE Apparently I changed the dtd to: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and this fixed everything. Just thought I updated everyone on this site. Thanks again for the help. It is greatly appreciated!!! Cheers, Chi.

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Spot the difference!	mitcho	CSS	4	25th June 07 12:32 PM
Unwanted Spacing	hniderr	CSS	7	4th May 07 05:10 PM
Si there anyway to indent text within a bullet list?	ianlyy	CSS	2	27th April 07 04:35 PM
DIV spacing problems in IE6 VS IE7	jslims	Browser Compatibility	0	21st February 07 12:55 PM
.html or .htm	Jen	Scripting and Server Side	31	15th August 06 03:07 AM