Image and text inside of tag

后端 未结 3 1498
孤城傲影
孤城傲影 2021-02-07 07:51

This is the html asp.net generated (with some client-identifying details removed)

In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes th

相关标签:
3条回答
  • 2021-02-07 08:24

    Because of your floats, the anchor collapses. Also, you can't put block level elements <div/> inside inline elements <a/>.

    Keeping with the non-W3C code you've got there, you'd need to clear your floats with this code right before the closing </a>

    <div style="clear: both"></div>
    

    You'll want to probably create a class called .clear and move the styles to that. Here's an example from my site:

    .clear-fix {
    clear: both !important;
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    }
    

    A better way to do your code which is W3C compliant is the following:

    <div id="hdrXXX">                      
        <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
            <span style="float:left;display: block;"> 
                <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
            </span>
            <span style="float:left; display: block; padding:15px 0 0 0;"> 
                <span id="XXX">Some text right here</span>
            </span>
            <span class="clear-fix"></span>
        </a>  
    </div> 
    
    0 讨论(0)
  • 2021-02-07 08:28

    Try removing the divs, as the img tag and span are naturally display-inline. Add display block, float left if you need margins right to the tags themselves as supposed to adding divs. Also, to the anchor tag, add overflow:hidden (if you use floats), so that it takes up the total space of the two child elements.

    0 讨论(0)
  • 2021-02-07 08:32

    You can only put block-level elements inside anchor elements with HTML5 and browser support is still a bit iffy on it. IE7 obviously does not support this.

    You don't need to use division to do this:

    <div id="hdrXXX">                      
        <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
            <img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" /> 
            <span id="XXX">Some text right here</span>
        </a>  
    </div>
    

    This should work to the same effect...

    0 讨论(0)
提交回复
热议问题