CODEWITHSUNDEEP
htmlcssinternet-explorerhtml-table
wordpressm
wordpressm

Reputation: 3267

IE doesn't align text and image properly

In Chrome image and the text link is aligned properly. However, when I check it on IE8, I noticed that image and text link is not align properly.

Here is the code I use. this is a code I use in Wordpress wpfilebase templates.

<td style="width:350px;padding-left:20px;">
    <a href="%file_url%"> 
       <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
    </a>
    <span style="width:200px;float:right;vertical-align:text-top;">
    <a href="%file_url%"> %file_display_name%</span></a>
</td>

IE view

Chrome view

Chrome renders properly, but not IE. How to fix this? If I need to use conditional CSS for IE, what is the correct code for IE?

Upvotes: 2

Views: 1327

Answers (3)

wordpressm
wordpressm

Reputation: 3267

Using div tag instead of span, solved my issue.

<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
    <div style="float:left;"><a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
    </a></div>
    <div style="max-width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
     <a href="%file_url%">%file_display_name%</a><!--anchor tag should be closed here-->
    </div>
</td>

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
    <a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
    </a>
    <span style="width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
     <a href="%file_url%">%file_display_name%</a><!--anchor tag should be closed here-->
    </span>
</td>

Use padding-left in span element and remove float property from it.

Upvotes: 1

poodle
poodle

Reputation: 107

Your 'span' tag closes before you close your 'a' tag. Corrected Code:

 <td style="width:350px;padding-left:20px;">
   <a href="%file_url%"> 
     <img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
   </a>
   <span style="width:200px;float:right;vertical-align:text-top;"> 
     <a href="%file_url%">%file_display_name%</a>
  </span>
</td>

Upvotes: 1

Related Questions