15 replies [Last post]
MrBig
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-01-30
Posts: 7
Points: 0

The below code works fine in FireFox, any ideas why it won't work right in IE? No indents or graphic bullet are showing. Thanks!

ul.body {
margin-left: -10px;
padding-left: -12px;
text-indent: 1px;
list-style-image: url(content/Services/Images/bull.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
margin-top:0px;
}

I'm quite good at CSS; however, bulleted lists seem to always pose a problem for me and colleagues. We're always on the hunt for good solutions!

Thanks.

MrBig
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-01-30
Posts: 7
Points: 0

trouble with bulleted list

Just to let you all know I fixed the problem. It was actually Dreamweaver that was screwing me up, which prompted me to put in negative values for margins. I ignored how it was displayed in dreamweaver and went with positive values for the margins and it works great now.

The only problem still is how IE positions the graphic bullet as apposed to Firefox. I'm going to work on the positioning now.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

trouble with bulleted list

list-style-image is badly supported, and IE & Firefox use different ways of indenting the text.

The best way to do it is zero the margins and padding of the <ul>, and use a background-image on the list-item instead of list-style-image.

Then, play around with paddings to position the text.

Verschwindende wrote:
  • CSS doesn't make pies

MrBig
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-01-30
Posts: 7
Points: 0

trouble with bulleted list

Thanks, I will try this.

MrBig
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-01-30
Posts: 7
Points: 0

trouble with bulleted list

This worked great. Thanks! One thing I found was that in the ul styles, you have to have both padding AND margin ... ie seems to use the padding; firefox the margin.

I'm off to check on a Mac :-/

Here's the code for all you interested:

ul.body
{
list-style-type: none;
padding: 8px;
margin-top: 0px;
margin-left:8px;
margin-bottom: 8px;
}

li.square
{
background-image: url(content/Services/Images/medguide_square_bull.gif);
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

trouble with bulleted list

MrBig wrote:
This worked great. Thanks! One thing I found was that in the ul styles, you have to have both padding AND margin ... ie seems to use the padding; firefox the margin.

Correct Laughing out loud Which is why so many people have issues positioning lists.

I've condensed your code down a bit, if you're interested:

ul.body
{
list-style-type: none;
padding: 8px;
margin: 0 auto 8px 8px;
}

li.square
{
background: url(content/Services/Images/medguide_square_bull.gif) no-repeat 0px 3px;
padding-left: 5px;
font: 11px/14px Arial, Helvetica, sans-serif;
}

Verschwindende wrote:
  • CSS doesn't make pies

MrBig
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-01-30
Posts: 7
Points: 0

trouble with bulleted list

And here I thought I was a CSS master. I'm good, but I bow to your greatness. Thanks. I guess it's why I call myself a designer, even though I do more code than anything else!

MrBig
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-01-30
Posts: 7
Points: 0

trouble with bulleted list

just thought you'd want to know ... when I plopped your condensed code in it reduced the space between the bullet and the text ... I'll play around with it though.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

trouble with bulleted list

MrBig wrote:
ie seems to use the padding; firefox the margin.

Except it's the other way around.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

trouble with bulleted list

MrBig wrote:
just thought you'd want to know ... when I plopped your condensed code in it reduced the space between the bullet and the text ... I'll play around with it though.

Probably because of:

margin: 0 auto 8px 8px;

You didn't specify a right margin, so I left it as auto. Play around with these valuse - it goes top right bottom left, like a clock.

Quote:
And here I thought I was a CSS master. I'm good, but I bow to your greatness. Thanks. I guess it's why I call myself a designer, even though I do more code than anything else!

Aw shucks! :oops: I'm not great, I just like condensed CSS Laughing out loud Let us know if you have any more trouble.

Verschwindende wrote:
  • CSS doesn't make pies

MrBig
Offline
newbie
Last seen: 14 years 38 weeks ago
Joined: 2006-01-30
Posts: 7
Points: 0

trouble with bulleted list

Gotcha ... that's an aspect I'm trying to bring in more is shortcuts. When I consult though, I generally have to spell each one out so that if someone else who's not CSS savvy has to change it, they know what the numbers mean. And you know how it goes ... unless you do it consistently, you don't know it!

Thanks for your help.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

trouble with bulleted list

Any time Laughing out loud Need any more help, you know where to find us!

Verschwindende wrote:
  • CSS doesn't make pies

coalduststar
coalduststar's picture
Offline
newbie
Coleraine
Last seen: 14 years 7 weeks ago
Coleraine
Timezone: GMT+1
Joined: 2006-09-04
Posts: 7
Points: 0

disappearing bullets

I appear to have done the same sort of thing- using background images for bullets in a list of links but IE is not displaying them until the links in the list are rolled over?!

The CSS is pretty straight forward and I've been ussing it for some time but this has only started happening recently.

this is what i had originally:

#contentlist ul, #contentlist li{ list-style-type:none; background:url(bullet1.gif) no-repeat top left; margin-left:0px; padding-left:15px; padding-bottom:5px; }

and now I have this:

ul{ list-style-type:none; padding:0; margin:0; } #contentlist li{ background-image:url(bullet1.gif); background-repeat:no-repeat; background-position:top left; margin-left:0px; padding-left:15px; padding-bottom:5px; } I expanded some of the rules to se if it wasn't something stupid i'd done- it likely is regardless but if anyone knows the answer- i'm dying to hear it! thanks!

coalduststar
coalduststar's picture
Offline
newbie
Coleraine
Last seen: 14 years 7 weeks ago
Coleraine
Timezone: GMT+1
Joined: 2006-09-04
Posts: 7
Points: 0

one thing i just tried - i

one thing i just tried - i have an externally linked javascript file that is a hack for internet explorer to display .png filetypes correctly.

I commented out the link to the javascript file and more of the bullets appeared when the page was reloaded but not all of them- the rest had to be rolled over with the mouse in order to appear.

rguy84
Offline
Enthusiast
Seattle, Wa
Last seen: 13 years 51 weeks ago
Seattle, Wa
Timezone: GMT-7
Joined: 2004-07-18
Posts: 60
Points: 0

Coal do you have a link?

Coal do you have a link? This kind of seems like another issue.

Ryan
my blog

never say goodbye
never say goodbye's picture
Offline
newbie
Brighton, UK
Last seen: 14 years 6 weeks ago
Brighton, UK
Joined: 2006-09-12
Posts: 1
Points: 0

dreamweaver...

A quick note to MrBig... I hated dreamweaver, and would suggest moving to something like TextPad - its like the most souped up NotePad, supporting html etc. and doesnt add any junky code Smile