13 replies [Last post]
SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

Take 2... I tried to post on this earlier and realized my problem was more complicated than I thought. This time I think I've got all the info.

Two-part problem: I'm working on pages using a custom unordered-list bullet approach, not the usual list-style-image, but a background image approach (via Macworld; see link below) that offers more flexibility with bullet positioning.

http://www.macworld.com/article/48296/2005/12/januarycreate.html

The problem comes when I try to wrap the unordered list around a left floated object. In Firefox this works fine, but IE left-aligns all the bullets to the same left margin, even the ones for the wrapping list items.

Here's all the relevant css and html:

ul {
list-style-type: none;
}

ul li {
list-style-type: none;
background: url(http://www.questdiagnostics.com/images/bullet2.gif) 0 9px no-repeat;
padding: 2px 25px 0px 8px;
}

#photo {float: left; width: 90px; padding: 10px;}

  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here

Any thoughts? Is there a better way to do the custom bullets without using background? I don't want to use list-style-image unless I can position the bullets precisely.

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 6 years 37 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

Sorry

I am not getting it. Maybe it is just too late. But in case I am not the only one you might want to post a link, or a screenshot FF vs. IE might already help. Link prefered though.

SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

Link

Thanks, Caposoft. Try the link below. Bullets wrap properly in Firefox for Mac & PC but left-align to the left text margin, at least for me, in IE 6.0.2.

http://decentfilms.com/stuff/code_test.htm

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah I think this is just IE

Yeah I think this is just IE being dumb.

What does it look like when you trigger Haslayout on the list? (like, by setting a width or something on it)?

If that's new to you, here's the list of triggers: http://haslayout.net/haslayout#get_layout

But pick one that doesn't disturb the page.

I'm no expert, but I fake one on teh Internets

SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

Works!

Hey, excllent! Looks like "display: inline-block" not only clears up my problem, it clears up ANOTHER IE-specific problem I was hacking around in a completely unrelated way.

Thanks!

SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

Aargh!!

Drat drat drat. The lovely IE fix above now apparently breaks in the latest Firefox!

In fact, Firefox now handles the original issue as stupidly as IE. Previously, Firefox didn't need a fix at all -- it handled the original code beautifully. But now without the fix (display: inline-block;), Firefox and IE have the same dumb problem described above.

Worse, while display: inline-block fixes IE, in Firefox it simply creates more problems.

In Firefox, with display: inline-block, if the list items are short enough, they begin wrapping to one another, as if they were floating left like the image. Alternatively, if they're too long to wrap (say they're in a div or a table cell that is too narrow) the whole list simply begins below the image, as if the image weren't floating at all.

Any other ideas how to fix the original problem above in IE AND the latest Firefox? Or how to fix Firefox's response to display: inline-block?

Here is the original code. I've included display: inline-block in comments.

ul {
list-style-type: none;
}

ul li {
list-style-type: none;
background: url(http://www.questdiagnostics.com/images/bullet2.gif) 0 9px no-repeat;
padding: 2px 25px 0px 8px;
/* display: inline-block; */
}

#photo {float: left; width: 90px; padding: 10px;}

  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
  • Unordered list text goes here
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Remember, display:

Remember, display: inline-block is the ONE single Haslayout trigger that you can leave out in the open, and then UNDO. For everyone : ) So if it was a block, set it back to a block.

#menu {
display: inline-block;
}
#menu {
display: block;
}

Now, it's a block, not inline-block, and IE still remembers Haslayout as being true.

(btw I'm setting this on the menu itself, not the li's... Haslayout is needed on the li's if they are floated, at least for showing normal bullets, not sure about bg images...)

The thing originally was that your bullet images were sliding underneath the floated thing, right?
So I thought setting a width (on the menu) for instance or one of those Haslayout things would make it NOT slide underneath the floated thing (which actually isn't the correct behaviour but it does fix your problem I would think). FF and everyone else should actually still let the menu itself slide under the float, while the text and stuff wraps around the float like it normally does.

Um, hmmm... Paul wrote this thing a while back, but it's such good readin': http://www.search-this.com/2007/09/05/lets-be-clear-about-this/
It's specifically about clears but I think explains some important stuff about IE and floats in general.

How latest is the "latest firefox"? 3 or 3.01/whatever little build they just did recently? Cause there could well be a bug in the "newest" release. Remember when FF2.0.0.8 came out? All the negative margins died, due to a huge trunk bug "coming back to life".

Also, which OS are you using? I don't have a Mac to test on, but Firefox is awful on Linux as far as widths and wrapping inappropriately in Linux (Fedora and Ubuntu I've seen it so far, while Opera on these distros is fine and normal). FF on Winblows is normal.

I'm no expert, but I fake one on teh Internets

SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

Haslayout on the ul doesn't

Haslayout on the ul doesn't seem to work. At least, not the methods I've been trying.

Specifying a ul width doesn't fix the problem in IE or Firefox. Firefox seems not to respond at all, while IE responds by wrapping the whole list as a block alongside the image, so that list items below the image don't go to the left margin.

Alternatively, specifying the ul as display: inline-block has a similar effect in IE, while Firefox responds to this one similarly to IE as well. (One difference is that if the list items themselves are in a space that causes the lines to break, Firefox effectively ignores the image float and begins the list below the image.

Adding a second ul specification as display: block seems to have no effect in IE, and in Firefox simply reverts to the status quo (list items wrap but bullets left align, sliding under the image).

Specifying a li width problematic because items wrapping around the image should be shorter than the non-wrapping items below the image. There is no one width that will work for the whole layout.

FWIW, just in the last few minutes, while I was actually writing this post, Firefox released 3.0.3. The problem still exists, and did in whatever version of Firefox I was running immediately before.

I'm on Windows XP. I was seeing the layout correctly in XP before.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:while IE responds by

Quote:

while IE responds by wrapping the whole list as a block alongside the image, so that list items below the image don't go to the left margin.

Yeah that's what it does with haslayout-- the reason modern browser will wrap stuff around a float is because the actual block element is sliding underneath the float while still holding the text inside its boundaries. The problem with Haslayout is it makes the ul (or anytihng) NOT slide under, which sometimes is a problem.

Quote:

Adding a second ul specification as display: block seems to have no effect in IE, and in Firefox simply reverts to the status quo (list items wrap but bullets left align, sliding under the image).

Usually that's what we want. If display: block was the display state you really wanted, but need to trigger Haslayout for IE in as an unobtrusive way, you can first do display: inline-block for IE, and then another statement to set it back to what you really want-- the only person who should look any different in that case IS indeed IE.

I'm trying to get to that link you posted earlier to take a better look at the problem, but my browser is just sitting there and spinning at decentfilms.com... and I'm at my hubby's computer so I can't copy and play with your code now (but tomorrow I could on my lunch break-- rain rain rain.
Your image is 9 by 9 px? I could make a substitute.

It may not be the server there as I've been having problems both here at home AND at work, some pages just never coming up or saying Taking Too Long To Respond.

Recently I just ran across some problems in IE with lists-- I had bullets (the circle) not showing in IE-- but the problem wasn't the usual "floated li's" or background images. I guess it was my margins? I had a set width and auto-margined the list which worked in everyone but IE. Putting the list in a container with the set width and automargins, while giving the ul inside a left margin magically worked. On other pages where I wasn't automargining, a left margin needed to be added to the ul. Damn but IE is a b**** to code for sometimes.

But anyway I hope to figure out what this is. It seem whenever I run into something on a forum I run into it at work too, so it always benefits me : )

I'm no expert, but I fake one on teh Internets

SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

Yes, separate issue, my

Yes, separate issue, my hosting provider for decentfilms.com is having problems. I'm working on development/staging environments now for another website, and can't easily post something for demo purposes. The code above is essentially what I'm working on.

Grr. It shouldn't be this complicated. I just want to have an unordered list with custom bullets, and a float left image alongside the first few items in the list. The list items alongside the ul should wrap, and the rest of the list should fill up the space.

The frustrating thing is the whole problem was originally IE, not Firefox, and display: inline-block solved the problem for IE without breaking Firefox. Now I can't find a solution that works in Firefox at all, even if I ignore IE.

SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

Any help appreciated!

P.S. Neither of the images resides on the down server. The bullet graphic is available at http://www.questdiagnostics.com/images/bullet2.gif and the floating graphic is my avatar on this site, http://csscreator.com/files/pictures/picture-49017.gif.

Any help appreciated!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

K, I'll try a build during

K, I'll try a build during lunch.

btw I should see what the other modern browsers are doing...

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Bad news

The bullets, being background images, are not considered inlines, so they never hugged the text when the text was pushed aside by the float. : (

In fact the only solution I found (which DIDN'T work for FF2 but did for FF3 and all other browsers) is messy and nasty : (

I had to change the background position on the li's who's text was being moved by the floated pic. Which meant adding classes by hand : (

FF2 I think had a bug, because Opera (9.27 and current beta9.6), Saffy for Windows/Chrome, and IE all did the same thing.

This current html shows the issue with FF2:
http://stommepoes.nl/bulletz.html

I'll leave that on the server for a while, but here's the code for posterity:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en" />
    <meta name="description" content="custom bullets not appearing in some browsers">
    <style type="text/css">
* {
  margin: 0;
  padding: 0;
}
 
img {
  border: 0;
  float: left;
  padding-right: 20px;
}
 
ul {
  list-style: none;
}
li {
  background: url(<a href="http://www.questdiagnostics.com/images/bullet2.gif" rel="nofollow">http://www.questdiagnostics.com/images/bullet2.gif</a>) 0 9px no-repeat;
  padding: 2px 25px 0px 8px;
  background-color: #ff0;
  margin-top: 1px;
 /*height: 1.2em;*/ /*uncomment to see Haslayout wreck havoc!*/
}
	li.w {
 	  background-position: 85px 9px;
	}
    </style>
  </head>
<body>
<img id="photo" src="beat*spam*instein.gif" width="80" height="80" alt="beatnik einstein eats teh bulletz">
<ul>
<li class="w">Unordered list text goes here1</li>
<li class="w">Unordered list text goes here2</li>
<li class="w">Unordered list text goes here3</li>
<li class="w">Unordered list text goes here4</li>
<li>Unordered list text goes here5</li>
<li>Unordered list text goes here6</li>
<li>Unordered list text goes here7</li>
</ul>
<body>
</html>

FF2 has the bullets pushed 85px from the image, while FF3 shows the bullets in the same place as everyone else. So I'm thinking FF2 has been wrong all along.

See how in IE7 the yellow goes behind Einstein? If Haslayout is set on the ul or the li's, then IE won't do that (and the bullets get hidden).

I can't think of any way to get that bullets as "text" (other than, a round bullet could be added, • but don't think there's a square one) which would wrap around the float like normal text does, or possibly tags inside each li (not really great semantically, though the alt text could be *). Because the li is sliding under the float, the bullet is staying positioned where you said so-- left: 0 and top: 9px from the left side of the li.

Floating the ul moves the left edge onto the side of the image, but then there's no wrapping.
Floating the li's without a width set on the ul lets them shrink-wrap auto-width and stack alongside each other. Setting a width on the ul here COULD work but as you said, the li's will have different length text so that's out unless you think a class per ul is feasable (and then, the wrapping sin't the same per browser or OS due to text size differences and stuff).

Not sure there's really a way around this. I was wrong originally (though I also misunderstood and thought it was more like my lists, which had real bullets and bullet images sitting over the floated photos in some browsers and ultimately I ended up moving them "inside" which I guess is also another option, using a real square bullet and "inside" however that indents your text). IE has its bug but this was something else.

I'm no expert, but I fake one on teh Internets

SDG
SDG's picture
Offline
newbie
Last seen: 13 years 3 weeks ago
Joined: 2008-08-25
Posts: 8
Points: 0

annoying bullets

Argh. My earlier approach DOES work in IE, with display: inline-block. It USED to work in Firefox, with or without display: inline-block. But now it breaks badly in Firefox, with or without display: inline-block.

WITH display: inline-block; works in IE6, used to work in Firefox
http://decentfilms.com/stuff/code_test/test2.html

WITHOUT display: inline-block; used to work in Firefox; doesn't work in anything:
http://decentfilms.com/stuff/code_test/test2.html

I realize that using a background image rather than the usual custom bullet image property -- list-style-image: url(bullet.gif); -- complicates the issue. But the list-style-image approach doesn't work well either, AFAIK. IE places the bullets too low, Firefox places them too high, and both browsers place the bullets too far away from the text. Is there a method of controlling this across multiple browsers I don't know about?

list-style-image custom bullets; bullet placement not good
http://decentfilms.com/stuff/code_test/test3.html

Any other thoughts? Any possible solutions I'm not seeing?