[RESOLVED] Image links not working right

[WebJoel]

...But, what may I ask is this "white-space bug"?

If you've ever created an <ul> and have a number of <li>s in it, and the last one either is cut-off, shows up in two places, spaced rather big vertically or is somehow 'messed up' and adding another <li> makes the previous one 'okay' and the last one added messed up..., -'white-space bug'.

In a nutshell, in an <ul>, IE sometime incorrectly sees a 'line break' in your HTML code as a "virtual carriage return" (to borrow the typing expression), and it inserts a 'virtual <br />' there... totally messin' up your code.

So:

<ul><li><a href="#">One</a></li><li><a href="#">Two</li><li><a href="#">Three</a></li></ul>

and the output is a list like:

One
Two
Three


above is 'white-space bug-free', whereas:
................................
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

triggers the 'white-space bug' and the output is:

One

Two

Three

......................
Ways to combat this are to declare "display:inline-block;", set a default width for the <li>, use "<--" after <"/li>" and "-->" before "<li>", -there are other methods but either of these is sufficient.

This will explain it further and probably better:

http://www.csscreator.com/node/6745

[AmazingAnt]

Wow. Craziness.

[WebJoel]

...Now how that broke the whole thing I'll never know, but when I remove that line, all the buttons work....

Oh yeah (-was in a a hurry to take my son out for a walk and didn't finish the reply properly), -my example worked and when you changed it, it stopped? -I bet you were looking at the file from my template, -with the " * {margin:0; padding:0} " in <STYLE>. If you merely cut & pasted the <ul> and the stuff for the <ul>-proper without the "margin:0;" from the first line of my STYLE, -it just might bust apart.

You would have to insert "margin:0;" in the <ul> somewhere, -probably on the " ~ul li {margin:0; foo:etc.}. That might be how to solve the whole thing...

The <ul> I did is fairly simple but if we're using different CSS in <style>, the results would probably be quite different. I really should create a more 'generic' or transitional template to use for returning my often verbose explanations and not just assume that everyone uses the same uber-STYLE that I do. (and, this is probably why when I test others' code I often fail to see their complaint in my template the first time or two and I have to ask for clarification... )