Announcement

Collapse
No announcement yet.

Image Alignment Problem - IE only!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • tclifesafety
    replied
    Finally got it! I took the very top row (above the border row that was giving me trouble) out completely. I think this was the problem - I had that table in a colspan across 3 cells.

    I added the removed table back, but on it's own above the bordered frame and it seemed to work in all browsers. Yipee!

    Thanks for your help celebra1 - I really appreciate it!

    Leave a comment:


  • tclifesafety
    replied
    I'll try that - thank you!

    Leave a comment:


  • celebra1
    replied
    Big Gap
    • Create a spacer that is 1px by 20px - it can be a color background or transparent
    • Add a style to your stylesheet with a unique name, image reference, height, width,position, repeat-x
    • Add the class to your tag ex: <span class="spacer">

    Leave a comment:


  • tclifesafety
    replied
    I agree, there must be something before.

    I was able to get the image to align to the right by clearing the cell widths and adding both the float:right and position:relative styles to the image (then div:clear at the end of the table), however when I did that, there was a big gap between the corners. So I had a 20px image on the left corner, a 20px image on the right corner and a big gap in the middle.

    Sigh...

    Leave a comment:


  • celebra1
    replied
    Alignment

    I suspect there is code BEFORE the start of your code that is posted that is causing the problem. Whenever you run into something like this, look at what is before it first. Was another float not closed? Was another tag not closed?

    Leave a comment:


  • tclifesafety
    replied
    @celebra1: thanks for the help, but unfortunately IE wins again. i tried adding the style attribute to the cells, as you wrote, and then tried using it on the images; neither changed the alignment. :(

    Leave a comment:


  • celebra1
    replied
    Possible Solution

    <table width="100%" border="0">
    <tr>
    <td width="20" valign="bottom" style="float:left;">
    <img src="/assets/templates/default/images/shadow-tl.gif" width="20" height="20">
    </td>
    <td background="/assets/templates/default/images/shadow-t.gif">
    <img src="/spacer.gif" width="1" height="20">
    </td>
    <td width="20" valign="bottom" style="float:right;">
    <img src="/assets/templates/default/images/shadow-tr.gif" width="20" height="20">
    </td>
    </tr>
    </table>
    <br style="clear:both;" />

    Make sure to add the "clear" tag.

    Leave a comment:


  • tclifesafety
    started a topic Image Alignment Problem - IE only!

    Image Alignment Problem - IE only!

    I'm having an awful time getting 2 images to align properly in Internet Explorer and was hoping one of the wizards on here could help.

    The top of my frame.html page is supposed to have rounded-corners. In Firefox, Chrome and Safari it displays as intended. Internet Explorer, however, will not align the right-corner to the right no matter what I try. I've tried setting the horizontal align of the cell to right, I've tried doing that plus setting the image align to the right. I've tried clearing the cell alignment and just aligning the image. I've tried using the CSS text-align property. Nothing works.

    IE also isn't honoring (or isn't seeing) the background image in the center cell.

    Does anyone have a trick to get IE to honor either the cell or image alignment properly? Here's the offending code:
    Code:
    			<tr>
    				<td width="20" align="left" valign="bottom"><img src="/assets/templates/default/images/shadow-tl.gif" width="20" height="20"></td>
    				<td background="/assets/templates/default/images/shadow-t.gif"><img src="/spacer.gif" width="1" height="20"></td>
    				<td width="20" align="right"><img src="/assets/templates/default/images/shadow-tr.gif" width="20" height="20"></td>
    			</tr>
Working...
X