Forum Moderators: not2easy
I apologize for the super long 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 :)
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...
Please note that the homepage - <snip> 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 :\...
once i coded the homepage, it all validated, so i got excited and started to test it in multiple browsers...eeek this is where all web designers meet their match huh?
Problem - 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 removed the carriage returns between each <li></li> line, and that "appeared" to solve it when i viewed it on browsershots.org, but when i checked it on my mom's work computer(shes has IE6 still), it was not solved at all. She has a very large screen, so im wondering if the removal of carriage returns was not enough to solve the issue in larger resolution browsers? Or if it really just isn't solved in any IE6...either way, i still need a solution :(
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
thank u!
[edited by: SuzyUK at 12:18 pm (utc) on Jan. 11, 2008]
[edit reason] url snipped [/edit]
i don't see anyway to edit this to remove it....im not spamming i promise, i truly need help solving this before i can continue designing...
also, here is my doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
hope this addition helps?
First off welcome – sorry that it appears your first post/question has lingered for so long with a reply. But if this whitespace bug is still... erm, bugging you, here's how to implement a fairly reliable solution that involves serving a fix to IE6 only.
It would help if you post the affected snippet of your HTML markup as well, but let’s assume your markup looks more or less like this:
<ul>
<li><a href=”#”>apple</a></li>
<li><a href=”#”>orange</a></li>
<li><a href=”#”>banana</a></li>
</ul>
The main ingredients are the list items and their contained anchors. I’ve actually only seen the whitespace bug when those anchors are set to display:block; as well. Removing ALL whitespace between each ‘li’ should have done the trick, actually, since that’s what triggers the bug in IE6. But let’s look at another way -
You’ll want to quarantine this fix and all other hacks or "patches" for IE - do this via conditional comments. This way you keep your IE-only fixes quarantined for easy maintenance, plus if they involve non-valid workarounds your main CSS will still validate. OK, here you go:
1. Target IE6 only with the following conditional comment:
<!--[if IE 6]><style type="text/css">@import url("ie6.css");</style><![endif]-->
2. Create a new CSS file for IE6 only... named ‘ie6.css’ or however you’ve referenced it in the CC above.
3. Add the following to your newly created ie6.css file:
li {height:1em; } /* fix damn whitespace bug */
Giving the list items an explicit height fixes the bug. But depending on your design you probably don’t want the more well-behaved browsers to see it. Thanks to the conditional comments, that height declaration gets served to IE6 only. You can actually use this method to serve IE6 any “corrections” it requires... and it likely could need a few. Just add fixes to your ie6.css file and be happy.
Hopefully that does the trick. If not, here's a couple other solutions - sometimes depending on your other code, you need to try different methods:
You mentioned you searched online for solutions - and if you do a Google search for "ie6 whitespace list bug" you will indeed find LOTS of links to several well-documented solutions (as well as this page ranked near the top of SERP #1 :)
Good luck
[edited by: SuzyUK at 3:00 pm (utc) on Feb. 27, 2008]
[edit reason] no non-authority links, thanks [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
@Sweetpea11: Just curious regarding your DOCTYPE, as it doesn't seem to be quite valid. Where does this come from? The standard HTML 4.01 Transitional DOCTYPE is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
@luispunchy: Your tinyurl links don't seem to work?
[edited by: SuzyUK at 4:24 pm (utc) on Feb. 28, 2008]
[edit reason] tidying [/edit]
- in IE6, not having a valid DOCTYPE will tell IE6 to switch to quirks mode
Actually not true, an invalid DOCTYPE will cause IE6 to render in standards mode! However, having no DOCTYPE or certain DOCTYPEs or something before the DOCTYPE (like an XML prolog) will cause IE6 to render in quirks mode. Something which I found out only recently!
See this other thread on the subject (halfway down), and a discussion on XHTML/HTML:
[webmasterworld.com...]
I misunderstood the posting guidelines on links so my second attempt at sharing those two links was cut again. No biggie - anyone interested can find them easily enough with a quick search.
anyway, I hope Sweetpea11 found some help along the way on the whitespace issue.
You might also try the following:
* html ul li a {
height:1em;
}
This was the solution I found to work for me as shown here:
Good luck.
[edited by: SuzyUK at 12:27 am (utc) on Feb. 29, 2008]
[edit reason] No personal URI's per Charter, thanks [/edit]
