ul and li weird behaviour

[alekone]

hello!
I have a strange problem, the whole website I'm writing is working well, except for a single page, that uses more UL than the others -
this is the problem:
a white line appears in the background, both in firefox and IE, and it seems to be proportional to the number and height of the unordered lists that I used.
I tried to reduce the ul's, and the whiteline disappears in firefox but not in IE.

any help is appreciated, I'm going out of my mind on this issue.
the relevant selectors in my css are #story ul and #story li, in case you need them.

thank you in advance!
ale.

[edited by: alekone at 9:15 pm (utc) on June 19, 2006]

[4css]

Hi, Welcome to WebmasterWorld, Please read the charter [webmasterworld.com] for rules on posting, if you can still remove your URL, please do so.

Then I suggest that you validate your page for
(x)html and css if you have not done so yet. (your css has numerous errors in it, the validator is an excellent learning tool, if you don't understand the errors, post them and someone will help you out)

Once you do this, then post the relevant code that you feel is causing the problem.

I would also suggest reading the WebmasterWorld TOS.

[alekone]

ok thank you, I'm validating the CSS and the only real errors are caused by an hack needed because of IE box model.
I removed the URL.
I will try to understand better what is the problem and post again.
thank you
ale.

[alekone]

I half-way fixed the issue by setting margin:0; for the unordered lists. anyway that doesn't solve the problem in IE.

here's the relevant CSS (I read the forum guidelines :P )

#content ul {
margin-left: 0;
padding-left: 15px;
list-style-type: none;
margin:0;
padding-bottom:15px;
}
#content li {
background: url('img/bullet.png') no-repeat 0 7px;
padding-left: 1.5em;
text-align:justify;
display:block;
}

I had to use padding-bottom to separate each ul from the other, but it causes the whiteline to appear on the background in IE.
any clue?

[4css]

Try reading This thread [webmasterworld.com] to see if it helps you out a bit with the white line. Sounds like an IE bug.

You can post a bit more of your css and your (x)html so that we can see how you have your page done, as well as what css is before and after what you have now.

sometimes it isn't what we think it is that is causing the problem. If that makes any sense.

Also, a great site for learning how to style lists is called List a matic, fabulous site. tons of tutorials on it. Best way to learn is to work through some of them.

[alekone]

thank you.
I noticed that the white line appears when I use more than 4-5 <ul> in my page.
it is horizontal, at the top of the page, behind my main div (which is a fixed width, centered).
with less than 5 ul nothing appears.
I don't think that posting my html would be useful, since it's only an UL with h2 headers before each list.
here's the CSS, modifying margins and padding has effects on the line, but it is impossible to completely remove it.

#content ul, #listchild ul {
padding-left: 15px;
list-style-type: none;
margin:0;
padding-bottom:15px;
}
#content li, #listchild li {
background: url('img/bullet.png') no-repeat 0 7px;
padding-left: 1.5em;
text-align:justify;
display:block;
}

[alekone]

ok, it seems to be fixed.

I changed the font-size in the body selector from 0.9em to 75%
don't know why but it worked -
now the text is a little bit smaller, but no whteline.
the line appears again if I manually enlarge the text from the browser (CTRL++).

[alekone]

I found the solution, my
background:url(img/sfum.gif) 50% repeat-x;

was not fixed at the top!

I corrected it:
background:url(img/sfum.gif) 50% 0 repeat-x;

and now everything works.
thank you for your help

[4css]

Glad you found the fix. You might want to set the font sizing in the html, body: {100.01%}
This takes care of any browser differences, then further down, you can set the fonts in different sizes.