Bullet spacing difference between FF and IE

EthanCote · #1 (**permalink**) Mar 16th, 2007, 03:31

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.

karinne · #2 (**permalink**) Mar 16th, 2007, 11:49

Remove the <br> and the   in there. The text should wrap automatically and space itself under the start of the text above.

Get a proper DOCTYPE; I suggest an HTML Strict or XHTML Transitional doctype. And add a character encoding ... usually UTF-8

EthanCote · #3 (**permalink**) Mar 16th, 2007, 14:12

Thanks Karinne. By adding in the appropriate DTD it worked like a charm. The bullet points align correctly.

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.

karinne · #4 (**permalink**) Mar 16th, 2007, 14:23

First of all you're going to have to fix a few things.

Change your DOCTYPE to and XHTML Transitional DOCTYPE

Code: Select all

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

Then you're going to have to put all those tags and attributes in lower case, add a closing to empty elements like <br> shuold be <br /> ... basically just read this - 4. Differences with HTML 4

Get rid of those deprecated elements (like <center>) and attributes (like BGCOLOR)

Then ... run it through the validator to make sure you didn't forget anything.

I suggest you ditch the JS for the menu and use CSS to achieve the rollover. See Pure CSS rollovers without Javascript

And to fix your spacing problem with your images add this to your stylesheet

Code: Select all

img {
   display: block;
}

EthanCote · #5 (**permalink**) Mar 16th, 2007, 14:34

Hi Karinne,

Thanks again for your help. I changed the DTD to the one you suggested and this fixed my problem.

I have to admit, there is still alot I need to learn. I'm still attach to using html. I'm in transition from html to pure css. That will take time. As I learned and with the help of people on this and various css forum, I hope to improve my css skills down the road.

Thanks again for your prompt reply. It is much appreciated.

Great forum here!!!!

Cheers,

Chi.

karinne · #6 (**permalink**) Mar 16th, 2007, 14:35

You can't get away from HTML ... you need both.

HTML is the structure of your site.
CSS is the presentational aspects of you site like the backgrounds, the fonts, the colors, margins, etc....

EthanCote · #7 (**permalink**) Mar 16th, 2007, 14:44

Thanks Karinne for clarifying that.

I'm curious when should I use css vs html for presentation? For example, if you look at the blue box (http://www.vertabase.com/test/css_help.html), I used html to create that box. So should I have used css for it and would there be a difference on using one method vs the other?

The only benefit of using css I find is that its better for SEO. Am I correct in that assumption and are there other benefits?

Cheers,

Chi.

karinne · #8 (**permalink**) Mar 16th, 2007, 14:47

There is no such thing as HTML VS CSS for presentation. It's CSS ... that's it.

HTML is used to markup your page, create the section.
CSS is then used to specify where those sections goes and how to style them.

Have a look at the ZenGarden, all those different styles uses the exact same HTML. When you send in a new layout, the only you send them is your CSS and some images. That's it.

Quote:

Originally Posted by EthanCote

The only benefit of using css I find is that its better for SEO. Am I correct in that assumption and are there other benefits?

Have a look at my thread in the Beginners Resources called Resources for learning how to use CSS for layout there are quite a few articles on the subject that might help you understand better.

EthanCote · #9 (**permalink**) Mar 16th, 2007, 14:53

Thanks Karinne,

I'll definitely take a look at the Beginners Resources.

Many thanks again for your patience and explanation.

Cheers,

Chi.

karinne · #10 (**permalink**) Mar 16th, 2007, 15:00

No problem ...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
First website - hit a snag with bullet points	Angreal	Web Page Design	6	May 18th, 2008 14:49
IE6 Whitespace Bug - UL Bullet Lists - Browsers Differences - GRRRRRRR!!!!!	PrettyPrincess19	Web Page Design	11	Jan 12th, 2008 20:29
Text Alignment on second line of Bullet point	adeking	Web Page Design	2	Jul 31st, 2006 20:38
Bullet point images - Problem with text alignment	Andy K	Web Page Design	6	Aug 16th, 2005 15:09
Keeping bullet points when my list items are inline	CherishedSites	Web Page Design	1	Apr 7th, 2005 15:01

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Bullet spacing difference between FF and IE