www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 18 of 18

Thread: [RESOLVED] Image links not working right

  1. #16
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by AmazingAnt
    ...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
    Last edited by WebJoel; 03-10-2007 at 12:51 PM.
    I build for: Firefox and tweak for IE

  2. #17
    Join Date
    Sep 2005
    Location
    That shadow behind you? It's not the cat. Mwahaha
    Posts
    386
    Wow. Craziness.

  3. #18
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by AmazingAnt
    ...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... )
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles