SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disappearing Images in IE using span and tables

    Hello,
    I read this article http://www.sitepoint.com/article/top-ten-css-tricks and I have the same problem described in item 6 of this article.
    I tried inserting position:relative but it doesn't work. This is the example:

    <table id="TABLE3" cellpadding="1" cellspacing="2" border="1" ><TBODY>
    <TBODY>
    <TR>
    <TD background=""><input type=BUTTON name="BUTTON4" value="Enter sin redondear" title="Enter" style="" ></TD>
    <TD>
    <span class="ButtonLeft">
    <span class="ButtonRight">
    <input type=BUTTON name="BUTTON3" value="Enter con bordes redondos" title="Enter" class="ButtonBackground">
    </span>
    </span>
    </TD>
    <TD background="" ><input type=BUTTON name="BUTTON4" value="Enter sin redondear" title="Enter" ></TD>
    </TR>
    </TBODY></table>

    and this is the CSS:

    .ButtonLeft
    {
    background-repeat: no-repeat;
    float:left;
    background-position:left top;
    cursor: hand;
    background-image: url(../Modern/btnL.gif);
    padding-left: 7px;
    height: 20px;

    }

    .ButtonRight
    {
    background-repeat: no-repeat;
    float:left;
    background-position:right top;
    cursor: hand;
    background-image: url(../Modern/btnR.gif);
    padding-right: 8px;
    height: 20px;
    }

    .ButtonBackground
    {
    float:left;
    white-space:nowrap;
    cursor: hand;
    background-repeat: repeat-x;
    border-color: #797979 #797979 #797979 #797979 ;
    border-bottom-color: #797979;
    border-left-color: #797979;
    border-right-color: #797979;
    border-top-color: #797979;
    border-style: none;
    border-width: 0px;
    font: "Verdana" 7.8pt normal normal bold none ;
    font-family: "Verdana";
    font-size: 7.8pt;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    height: 20px;

    background-color: Transparent;
    background-image: url(../Modern/btnC.gif);
    cursor: pointer;
    letter-spacing: 1pt;
    text-indent: 0pt;
    vertical-align: bottom;
    }

    You can see the problem when resizing the browser windows (in IE, in Firefox it works fine).
    I noticed that if I remove the letter-spacing: 1pt; from the
    ButtonBackground class, it works ok!! when resizing the browser.

    It seems to be a IE bug, does anyone know if there is any way to fix this problem when having letter-spacing: 1pt;?

    Thanks in advance.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    I'm having a little trouble seeing what the problem is as nothing seems to be disappearing for me (although I don't doubt you as IE is prone to doing things like that).

    What exactly is disappearing and what browser version ie5, 6 or 7?

    Do you have a live link so that I can see it in place with the images working etc.?

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    I'm sending an attachment with the example and two images that show what I see. I have IE version 7.0.

    Unzip the TestSpan.zip and open buttons.html with IE. Then, try to resize the browser window and you should see the effect (there are two files WithLetterSpacing_wrong.PNG and WithoutLetterSpacing_ok.PNG that show what I see when resizing the browser window).

    Also, try commenting the line letter-spacing: 1pt; in ModernButtons.css.

    Tell me if you can see the error.

    Thanks.
    Claudia.
    Attached Files Attached Files

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Claudia,

    I've just approved the attachment but I'm on my way out the door at the moment so I will check the code when I get back in later this evening (unless someone else has beat me to it by then.)

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok Paul.
    I'm interested in knowing if this is a bug or a problem that can be fixed modifying the css.

    Thanks for your prompt response.
    Claudia.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Claudia,

    I've had a look at your zip now and i'm not seeing any disappearing images. What i'm seeing is that the buttons in Ie are bigger and the table cells are overlapping.

    If you want consistent results for those buttons you will have to give them a width otherwise IE makes them grow at a different weight.

    Something like this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Botones</title>
    <style type="text/css">
    
    .ButtonLeft {
        float:left;
        cursor: hand;
        background: url(btnL.gif) no-repeat left top;
        padding-left: 7px;
        height: 20px;
         width:12em;
    }
    
    .ButtonRight {
        float:left;
        cursor: hand;
        background: url(btnR.gif) no-repeat right top;
        padding-right: 8px;
        height: 20px;
    }
    
    .ButtonBackground {
        float:left;
        white-space:nowrap;
        cursor: hand;
        border: 0 none;
        font-family: "Verdana";
        font-size: 10px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        text-decoration: none;
        color: #ffffff;
        padding:3px 0;
        height: 20px;
        background: url(btnC.gif) repeat-x;
        cursor: pointer;
        letter-spacing: 1px; /*If I uncomment this it works fine*/
        text-indent: 0;
    }
    #table3 input{width:10.5em;}
    #table3 .ButtonRight input{width:18.4em;}
    </style>
    </head>
    <body>
    <form action="">
        <table id="table3" cellpadding="1" cellspacing="2" border="1" >
            <tr>
                <td><input type="button" name="button4" title="Enter" value="Enter sin redondear"></td>
                <td><div class="ButtonLeft"><span class="ButtonRight">
                        <input type="button" name="BUTTON3" value="Enter con bordes redondos" title="Enter" class="ButtonBackground">
                        </span></div></td>
                <td><input type="button" name="BUTTON4" value="Enter sin redondear" title="Enter" ></td>
            </tr>
        </table>
    </form>
    </body>
    </html>
    That makes it the same size in Firefox and IE.

    Try to use valid code and keep the page tidy. You must use a doctype or IE6 will revert to quirks mode and use the broken box model among other things.

    That table seems to be making things harder than easier unless of course you wanted all those borders around everything.

  7. #7
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    You are right, the problem is that table cells are overlapping. My explanation of the problem wasn't very good.

    I understand your solution, but the thing is that the html code is generated in runtime, so I don't know the real width for the rounded button when I write the CSS code.
    The real width depends on the text (which is loaded in runtime and is different for each language, in a multi-language application).
    For the text "Enter con bordes redondos" is ok the width width:18.4em; you wrote, but probably not for the same text in other language, or for others buttons (which share the same class).

    Did you notice that there is no overlapping when you remove this line in the .css?: letter-spacing: 1pt;
    or if you write:
    letter-spacing: normal; (which is the default value).

    That is strange, isn't it?. And it only happens in IE.

    Sorry I didn't write the doctype and a tidy HTML. I just tried to write the smallest example. I agree the html code should be improved.

    Thank you very much.
    Claudia.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you notice that there is no overlapping when you remove this line in the .css?: letter-spacing: 1pt;
    or if you write:
    lol - All that does is shorten the length of the words so the scrollbar isn't appearing. You get no overlapping if you have your window open wide enough. It's not strange at all and the differences are because you have not controlled everything as shown in my example.

    It has nothing to do with the letter-spacing but the simple fact that the words are longer when you add more spacing and therefore the button is longer and you obviously have your window very small or have put the table in a confined space. If you look at the image you sent me you can see that there is a horizontal scrollbar on the body which is forcing the cell to overlap.

    There is a bug in IE however and that is it shouldn't collapse the middle cell but tables and floats don't go very well together (who said tables were better for rendering).

    If you can't control the widths of the inputs then you can't control the width of the table because IE adds more padding to the left and right of the inputs and increases it proportionately the longer the words get. This cannot be controlled via css and even removing padding has no effect. The only control you have is to apply a width.

    As you can't control the width the only other option is to give IE some code instead of the floats and then the cell won't collapse and overlap.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Botones</title>
    <style type="text/css">
    
    .ButtonLeft {
        float:left;
        cursor: hand;
        background: url(btnL.gif) no-repeat left top;
        padding-left: 7px;
        height: 20px;
    }
    
    .ButtonRight {
        float:left;
        cursor: hand;
        background: url(btnR.gif) no-repeat right top;
        padding-right: 8px;
        height: 20px;
    }
    .ButtonBackground {
        float:left;
        white-space:nowrap;
        cursor: hand;
        border: 0 none;
        font-family: "Verdana";
        font-size: 10px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        text-decoration: none;
        color: #ffffff;
        padding:3px 0;
        height: 20px;
        background: url(btnC.gif) repeat-x;
        cursor: pointer;
        letter-spacing: 1px; /*If I uncomment this it works fine*/
        text-indent: 0;
    }
    </style>
    <!--[if IE ]>
    <style type="text/css">
    input,.ButtonLeft,.ButtonRight{display:inline-block;float:none!important}
    </style>
    <![endif]-->
    </head>
    <body>
    <form action="">
        <table id="table3" cellpadding="1" cellspacing="2" border="1" >
            <tr>
                <td><input type="button" name="button4" title="Enter" value="Enter sin redondear"></td>
                <td><div class="ButtonLeft"><span class="ButtonRight">
                        <input type="button" name="button3" value="Enter con bordes redondos" title="Enter" class="ButtonBackground">
                        </span></div></td>
                <td><input type="button" name="button4" value="Enter sin redondear" title="Enter" ></td>
            </tr>
        </table>
    </form>
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Paul,
    Your solution is ok for me now, it works fine!. Thank you very much.

    Before closing this thread, I would like to confirm that you tried the same that I with the case of removing the line "letter-spacing:1pt" in ButtonBackground (or setting letter-spacing:normal which is the same).

    I'm sure that with letter-spacing:normal the rendering is different in IE. I tried everything: resizing the browser windows, writing a longer text in the button value. And whatever I do, with letter-spacing:normal the buttons never overlap.

    Can you demonstrate that the example with letter-spacing:normal has the problem of overlapping?.

    Thanks for your time.
    Claudia.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can you demonstrate that the example with letter-spacing:normal has the problem of overlapping?.
    I thought I was a genius but I'm an idiot

    I've been checking in IE7 and it is collapsing the cell with and without the letter-spacing as I said above but I just checked in IE6 and it is giving the behavior you describe. When the letter-spacing is removed then the cell doesn't collapse. It does indeed seem to be a bug in IE6 when letter-spacing and floats are used

    I've done some further testing in iE7 and it seems to be the float that is the main cuplrit because it still collapses when the letter-spacing is removed. However there is still something odd going on because if you refresh the page then the collapse stops!

    The usual "haslayout" fixes don't seem to make any difference so it looks like a weird rendering issue with floats, tables and letter-spacing.

    So you were correct with regards to IE6 but Ie7 was giving me the different results.

    In view of all that its better to use the code I offered to avoid the problem

  11. #11
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    you have been very helpful. I tried with IE 6 too and I saw the difference.

    Definitively, your solution is the best.

    Thanks again.
    Best regards.
    Claudia.


Bookmarks

Posting Permissions

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