IE6 Whitespace Bug - UL Bullet Lists - Browsers Differences - GRRRRRRR!!!!!

Hi,

I apologize for the super long posting, but i figured i'd ask my two questions in one posting....and Thank You ahead of time to anyone who offers me help on here i truly appreciate it!

I am a self-taught web designer - completely self-taught so please bear with my newness haha

- i have a website - www.prettyprincess.us

I have been learning alot the past couple weeks, so i decided to attempt converting my site to css and as much of it as i can into liquid layout - if you're learning - you might as well do it correctly right?

Please note that the homepage - www.prettyprincess.us/index.html is the only page redone so far, so it's the only page i really need anyone to take time to look at if they can :\...

so what is going well is my css and my html are validating - im very excited about that

once i coded the homepage, i got all excited and started to test it in multiple browsers...eeek this is where all web designers meet their match huh?

Problem #1....i have been attacked by the "IE 6 UL BULLET LIST WHITESPACE BUG" arrrgghhh!!!

on my site, i have a <div> based column on the left in liquid layout & css, it is the pink background column with yellow border - and in it, i have several UL Bullet lists - i love them for the layout im using, and intend to use them on every page of the site...

...but in IE 6, the whitespace bug is creating extra space between each <li></li> lines of content - now i don't mean the margin above and below each <ul> list group, i have those top and bottom margins set at 20px intentionally to separate the lists from the graphics in the column.

...again, i am referring to the extra space between each single row of the list...the huge problem it causes is that it totally destroys the alignment of my left and right columns in IE 6 ...the extra space between each row makes the left column of content so long, that it no longer aligns with the content in the right, and the right is then left with a huge amount of blank space below it's content...

i have looked it up online and i have found suggested fixes for it, but i don't really understand them, or know how to apply the fixes to my specific code...if anyone has time to look at my code and suggest a fix - that validates - that i can apply - and where i can apply it in my code - i would be sooooo happy!!!

here is my css for my lists:

ul {margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
font-family: Arial;
color: #000000;
text-align: left; }

li {font-size: 15px;
font-family: Arial;
color: #000000;
text-align: left; }

...please help my squash the bug!!! haha


....the other problem i am having is this - it may be related to the ul list bug and may fix when i clean that up, - but maybe not? i code in dreamweaver...and where my alignment of the two columns of content hits in dreamweaver - is exactly how it displays in IE 7 - but in firefox - the right column is now longer - only by about half of an inch - but regardless, something is not correct...from what my eye cathces - it appears that IE holds its text pixels closer together, so the text takes up just a little less space...and then in firefox, it appears that the same text family is "looser" so it spreads out just a little bit more? I am using Arial, so it is compliant but it still appears different in the two browsers, and after an entire page of content...it adds up, and maybe it pushes the content down farther? I could be waaaayyyy off on that, but if anyone has any ideas on that too, i would truly appreciate it :\


thank u!!!!!

Wow! what a post -- moving this thread to the CSS forum.

Okay, to get rid of the extra white space that IE6 is giving between the lists, you need to remove th carriage returns between them.. you currently have

[html]
<li>Hello</li>
<li>Goodbye</li>
[html]

Change to

HTML: Select all

<li>Hello</li><li>Goodbye</li>

That has helped fix it for me in the past... IE6 doesn't like whitespace between <LI> elements.

I am not sure what your second question relates to.. There isn't any noticable difference between IE7 and FF2.

yay! for the first part - that totally worked - i checked out IE 6 at browsershots.org and its fixed!

i had read all these complex code fixes and i was freaking out - you're answer worked and was so simple - i appreciate it soooo much!!!

...as for the second part....i just can't figure out where the spacing is coming from, it appears to be coming from the way the text displays, ...but in Firefox, in windows vista, the way it lines up has the content in the right column down farther than it should be...

for example - the link "Body Candy" should be above the bottom of the pink column to its left - but in firefox the content is so far down that it is below it - therfore, creating about 1/2 inch chunk of white space below the left pink column that shouldn't be there ....at browsershots, it appears fine in some of the firefox browsers, but not in the actual firefox i put on my computer....im stumped!

Have you tried setting a line-height for the text elements in the column?

yeah....well first, i actually set the line-height for all the other text, and it actually did help quite a bit - but it didn't close the gap between the two browsers completely.

So then i tried setting the line-height for the UL list text, and it didn't close the difference in placement any more at all, and it smooshed the text together to where it doesn't look is good visually. So i just kept the line-height on the rest of the text and left the UL lists without it.

It is almost the same now, but still not perfect. Im probably the only that notices it now the way ive aligned it, but still, it means i have to jimmy alignment for the rest of the site build which is kind of a bummer.

And I was checking the the page in the two browsers side by side, and i think it's actually internet explorer whose text display slightly more vertical, so it pushes the left column down farther in that browser, and firefox's text is wider and shorter, so it creates less height in the left column causing there to be space under it in comparison to the right which has more image content and less text.

I wish i could get it exact, but im not sure how much i want to struggle with it :\

***UPDATE***

Ok - Ive got to update the first part of this

Removing the carriage returns actually didn't solve it - My mother has IE6 and the "Whitespace Bug" still causes my UL lists to have extra space between each row

It looked fixed when i viewed it at browsershots, but she has a large computer screen, so im thinking that maybe it doesn't fix it for higher resolution IE6?

im not sure, but i guess its not fixed, so i still need a solution for the UL Bullet List Extra Space in IE6

Any Ideas Anyone???


thank you!

The returns would have fixed this but if you then went and added a line height other than normal, it will bring this bug back.

If you have line height for the rest of the page you need to set it to normal for your UL's

i did try switching the line-height, for a second, but i removed when it looked haywire- this is still the css for my UL Bullet lists and I dont have any line-height set:

ul {margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
font-family: Arial;
color: #000000;
text-align: left; }

li {font-size: 15px;
font-family: Arial;
color: #000000;
text-align: left; }

...but the bug is still there

Well you said in your earlier post that you changed the line height for the whole page.. If you did that, this will cascade down to the lists as well so you have to set their line heights to normal.

I don't see a problem in IE6. Do you think you need to clear the cache on your mom's computer?

yeah - cleared the cache - restarted - tried it all

im not sure why her IE 6 displays so diferent, but if hers does it, im pretty sure some other IE 6 out there will too...

i have looked far and wide for another solution to this that works, and i think im just going to cancel out UL lists all together. Other people who have had the same problem just said forget it and went back to some sort of faux-list with a table, or <br> returns. I know the UL lists are considered better web design - but it's not better if it doesn't work and if it makes my site look incredibly off to some important browsers...

thank you so much for your help though

pages look identical in ff and ie6 to me also.

try checking in. http://browsershots.org/