First bullet in list not displaying

[myrrh]

I have a <ul> with ten items in it on a page below some other text. The first bullet in the list is not displaying. (Everything after it is fine.)

It does this in my editor and in IE. A clue might be that in FF something kind of weird happens. I don't know how to decsribe what happens in FF but I was under the impression that specific URLs were not allowed in this forum.

The layout is done with CSS but this particular <ul> is not goverened by styles.

Any suggestions on where to start?

[Ingolemo]

The code, perhaps?

[penders]

Is it possible to paste the HTML? It might offer a bigger clue!

(*snap* - that's happened a few times to me recently!)

[myrrh]

should I post the whole page?

[penders]

If it's not too big... or perhaps you could start with the <ul>...</ul> and the text/elements just before it?

[myrrh]

I hope this is enough and not too much:

<div align="left" id="mainc">
<h1>text</h1>
<ul>
<span style="font-size:10pt;">
<li><a href="http://www.example.com/projects.html">Greeting Card Projects</a> - Step-by-step instructions with lots of photos; stick to the projects or just use them as ideas to launch your own.</li>
<li><a href="http://www.example.com/techniques.html">Card Making Techniques</a> - The basics to get you started.</li>
<li><a href="http://www.example.com/tools.html">Card Making Tools</a> - Here are some things you will need.</li>
</span></ul>
</div>

[edit reason] removed unnecessary markup [/edit]

[edited by: encyclo at 1:08 am (utc) on July 13, 2006]

[choster]

This may or may not be related, but for one thing your code is invalid, and any text-indents or margins may be interfering in the display because the browser does not know how to interpret the markup. Specifically, a <ul> cannot contain <span> and <span> cannot contain <li>. To fix the font size at 10 points, set it in your stylesheet: li {font-size:10pt}.

[penders]

I would certainly agree with choster - lose the <span> tag and perhaps style the <ul> or <li> tags with a class or something. BUT... it doesn't seem to be the direct problem (not rendering the 'first bullet') in this case. The code snippet above displays OK in FF1+ and IE5+.

Correct the <span> tag first and then retest. What styles are set on id="mainc"?

[AWildman]

Do you have a floated element above the maininc div?

[myrrh]

Thanks for your help, everybody. It should be painfully obvious that I know little about CSS, so bear with me.

What styles are set on id="mainc"?

#mainc
{
float:left;
display: inline;
background-color:#FFFFFF;
width:608px;
overflow:hidden;
margin-bottom:0px;
margin-left:0px;
border-left:1px solid #5F6A6D;
}

Do you have a floated element above the maininc div?

I'm not if "above" is meant literally. Directly above the mainc div, no. But all the elements on the left side of the page (navbar, ads, etc.) all have floats and they appear in the markup above the mainc div.

[kaled]

Always, always validate code where mysterious problems exist.

[validator.w3.org...]

A missing bullet sounds like bad markup.

Kaled.

[myrrh]

I validated it and it had 2 errors. I fixed the errors and the problem still exists.

[kaled]

Ok, now that the page validates...

Simplify it. Copy the basic code to a new page and see if the problem still exists. If it does, paste it here (the whole page, exemplified - no site references or lengthy text). Assuming that the simple code displays correctly, add the CSS. If it then fails, you know the CSS is at fault. If it's ok then you know the CSS is OK and the fault lies in some other part of the HTML, so copy chunks to the test page (validating as you go) until the fault appears. When the fault appears, comment out the new code to make sure you're on the right track (the fault should vanish). By adjusting the scope of the comments and retesting, you can find the cause of the problem.

In other words, you attempt to recreate the fault on a simple page and hunt it down logically. You should be able to fix it yourself, but if not, provided you can demonstrate it in simple code, you can paste it here and someone will figure it out.

Kaled.

[penders]

The styles set on the 'mainc' div don't seem to be a problem in themselves, but...

ASIDE (CSS): I am just a bit confused by the use of float:left; and display:inline; in the class definition above. So, I would be grateful if anyone could clear up my understanding a tad. To me, the two properties seem a bit contradictory, how can something be displayed inline when it is floated? Does the display:inline property do anything in this case? How are floated elements displayed?

---
Actually, I think I've just answered my own rambling... the display is 'computed' as block in this case I think.
[w3.org...]

[myrrh]

Thanks for your simple and logical approach, kaled. I found that it is in the css. Here is the relevant html:

<!-- MAIN CONTENT STARTS HERE -->
<div align="left" id="mainc">
<h1>It's All About Widgets</h1>
<!-- START OF RIGHT ALIGNED IMAGES SNIPPET //-->
<div class="snippet">
<p><br>
texttexttext
<br><br>
</p>
</div>
<ul>
<li>black widgets</li>
<li>red widgets</li>
<li>purple widgets</li>
</ul>
<!-- END OF SNIPPET //-->
</div>
<!-- MAIN CONTENT ENDS HERE -->

Here is the part which if emliminated, the first bullet displays correctly:

.snippet
{
float:left;
clear:both;
width:99%;
background-color:#FFFFFF;
margin:0px 0px 0px 0px;
}

Is there any way to work around this?

[monkeythumpa]

I have had the same problem. It is the float. You need to either put float a div around the whole thing and give it a margin or get it outside of the float.

[myrrh]

monkeythumpa, I'm not following that (you're going to have to dumb it down to my level, which is a very rudamentary understanding of css).

[monkeythumpa]

I wish I could draw you a picture, it would be easier to explain but here goes:

The float in your css is trying to put two containers side by side. There will be a little overlap if using margins. If you put a div around the div that the "li"s are in and give it a padding and margin, you may be able to get the "li"s far enough away from the edge so they show up again.

Simple answer, take the float out, does the bullet show up? If it does, then find an alternate way of coding without using the float.

[myrrh]

take the float out, does the bullet show up?

Yes, the bullet does show up. I don't know what the purpose of that float is, but I'm assuming it's there for a reason. Is there some sort of CSS I can use only on the pages that have a <ul> that would negate the effect of that float?

Or do I write a different style sheet for the pages that have a <ul>? That seems like kind of a pain.

[SuzyUK]

try to explicitly ensure the ul clears the floated div,

#mainc ul {clear: left;}

[added]
#mainc ul, will only target ul's that are inside the mainc div, if you want more accuracy you could add a class to the ul(s) concerned and only target them

<ul class="myclass">

ul.myclass {clear: left;}

[edited by: SuzyUK at 11:33 pm (utc) on July 18, 2006]

[kaled]

{ float:left; width:99% } looks like garbage to me.

The purpose of float is to allow text to flow around the object - it's typically used with images to create a newspaper-like appearance. However, by using the value width:99% only 1% of the screen width is available for flowing text.

Kaled.

[jetboy]

Add a new stylesheet called ie.css. In it put this:

li {
height: 0;
}

Link it in with:

<!--[if IE]><style type="text/css">@import ie.css";</style><![endif]-->

after your main stylesheet.

The missing bullet is a hasLayout bug in IE. If this is fixed in IE7, you'll need to change the conditional comment to read:

<!--[if lte IE 6]>

[SuzyUK]

kaled, it's not as much garbage as it looks ;)

floating a containing div is also the natural way to get parent elements to contain their floated children as per the recs. IE doesn't support it BUT as there is a width applied it is triggering "layout" and expanding to contain floats in its own way. Therefore floating a containing div at 100% wide generally solves a lot of x-browser "stretch to fit" problems :)

the reason it's not working as you might expect here (containing and clearing) is because lists have a slightly different canvas, with the list bullet kind of "outside" the <ul> element (even when set to list-style-position: inside;!) therefore the first bullet is actually underneath the preceding element, the first inline text node is floating and clearing but without its bullet ~ hence my suggested solution of explicitly clearing the <ul>, it also fixed the "weirdness" in FF, though I think it might cause futher problems with FF, depending on how many other floats make up the layout so waiting to hear it works in situ..

>>haslayout related,
the hasLayout problem with lists is NOT sorted in IE7 it's different in some places but it's still in lists. However as the height is now respected in IE7 you would need something else, a different layout trigger for it :( -

zoom: 1; or display: inline-block;

works for me as IE5 doesn't seem to be exhibiting this particular problem. ~ In fact the "whitespace in lists" problem that used to affect IE5 is back in IE7 in certain cases ~ usually vertical lists not requiring bullets, and in that case floating the <li>'s too would be a non-hack solution..

edit reason: wanted to clarify that it's only haslayout in relation to lists I'm referring to with the suggestions above

[edited by: SuzyUK at 12:05 pm (utc) on July 19, 2006]

[kaled]

SuzyUK,

I bow to you superior knowledge on this. I've read your comment several times and I still don't understand it. However, next time I'm playing with float, maybe I'll figure it out.

Kaled.