CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   image wrap in IE9 (http://www.codingforums.com/showthread.php?t=268218)

homph 07-18-2012 09:26 PM
image wrap in IE9
 
Hi,

I have an issue that appears in IE9, but not in Firefox. I have an image which is part of a table. It has a onmouseover applied to as well as being a link to a lightbox slideshow. The image appears to wrap itself around the bottom when displayed in IE9

A snippet of the code is shown below:

Code:

<TABLE width="939" height="139" border="0" cellspacing="0" cellpadding="0" vAlign=top align="center">
<TR>
        <TD  background ="1cl.gif" width="61" height="139" BORDER="0" vAlign=top >
        </TD>

        <TD width="141" height="139" background="art.gif"        vAlign=top onclick="dhtmlHistory.add('location1',        {message: 'backbox'});countdown()">

        <P><A onmouseover="filter('e','image5a')"        onmouseout="filter('e','image5')" href="Lady B&W.gif"        rel="lightbox[slide]">
        <IMG        border=0 name=e src="http://www.justin-slater-                photography.com/art.gif" width=141 height=139>        </A>
               
                <a href="Lady B&W.gif" rel="lightbox[slide]"                        title="Dros Ryddid">       
                </a>
                <a href="Colours.gif" rel="lightbox[slide]"                        title="Colours">
                </a>                       
                <a href="Night Oak.gif" rel="lightbox[slide]"                        title="Night Oak">
                </a>       
                <a href="Port.gif" rel="lightbox[slide]"                                title="Port">
                </a>       
                <a href="Pylon.gif" rel="lightbox[slide]"                                title="Pylon">       
                </a>
                <a href="light.gif" rel="lightbox[slide]"                                title="Autumn Rays">
                </a>
                <a href="Curve.gif" rel="lightbox[slide]"                                title="Curve">
                </a>
                <a href="Lady.gif" rel="lightbox[slide]"                                title="Dros Ryddid">
                </a>
                <a href="Hafod Sky.gif" rel="lightbox[slide]"                        title="Hafod Sky">
                </a>
                <a href="Spiral.gif" rel="lightbox[slide]"                                title="Spiral">
                </a>
                <a href="waxone1.gif" rel="lightbox[slide]"                        title="Wax">
                </a>
                <a href="Draig.gif" rel="lightbox[slide]"                                title="Draig">
                </a>
                <a href="Colour Shape.gif" rel="lightbox[slide]"                        title="Colour Shape">
                </a>
                <a href="Cab.gif" rel="lightbox[slide]"                                title="Cab">
                </a>
                <a href="Orange.gif" rel="lightbox[slide]"                                title="Orange">
                </a>
                <a href="Cannon Light.gif" rel="lightbox[slide]" title="Cannon Light">
                </a>
                <a href="Colour Block.gif" rel="lightbox[slide]" title="Pillar">
                </a>
                <a href="Apple.gif" rel="lightbox[slide]"                                title="Afal">
                </a>
        </p>
        </TD>
Sorry if my code is appears all over the shop !

SB65 07-19-2012 10:18 AM
Not very easy without seeing the images and the css.
Can you give a link to your page?

homph 07-19-2012 11:02 PM
HI,

Here's a link to my page :

http://www.justin-slater-photography.com/Galleries.html

Many thanks for your help

SB65 07-20-2012 07:36 AM
I can't immediately see an issue in IE9 - which image is the problem?

Sammy12 07-20-2012 10:01 PM
I believe he is referring to this:

Internet Explorer:
http://i1114.photobucket.com/albums/...Untitled-1.png

I spent 30 minutes trying to understand this using the god awful Internet Explorer inspect element and my head finally exploded.

What I've learned about the problem is that the repeating itself is probably due to JavaScript? but can be fixed using overflow: hidden; and setting the inline elements to display: block;. I personally was unable to find the solution quickly and the tables and inline styles are messing with my head, so I'm going to have to move on.

Sammy12

P.S. The problem is also seen in Firefox

Firefox:
http://i1114.photobucket.com/albums/...titled2-11.png

Chrome:
http://i1114.photobucket.com/albums/...ntitled3-3.png

tempz 07-20-2012 11:00 PM
@Sammy

I fixed the issue for him, via pm.

Issue: Table using body background - margin issue.


All times are GMT +1. The time now is 04:49 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.