View Full Version : IE, swap images show up in the wrong place

09-19-2011, 03:52 PM
Newbie here to the forum, so thanks in advance to all the expertise.

I made some page additions to a fairly simple site, with a HTML structured "slideshow". The pages consist of a grid of icons, each connected to a larger display image as default (when the page loads), then numbered links below each large image to display multiple 'portfolio' images.

After adding 5 new features, and fine tuning all the code, the pages load and function properly in Safari, FireFox and Chrome, but not in IE.

In IE, when you rollover the numbered navigation (to select other large display images), the swap images appear in other random places within the page!

I've checked the page code and CSS, and at this point am at a loss for what to do next.

Here's the link to the "Portfolio" section of the site:

Using IE, rollover the number "2" or "3"... in the bottom nav, and you'll see where those swap images appear on the page!

09-19-2011, 04:48 PM
I personally would suggest doing those a totally different way from the outset. I'd put them all in the same class, a.num or something, make them all block elements {display:block}, and instead of using images, you can just type the numbers into the html, set the width and height in the css, and in a.num:hover, add an appropriate border. to get the circle effect, you have to have the height and width set and use the border-radius property, setting the radius to half of your height and width.

I'm kinda a newbie too, but from what I understand, it's always better to avoid images when you can duplicate the same thing without them.

09-19-2011, 05:12 PM
If you decide you'd rather do that, change out the images for just code, here's how i did it:


<div id="numbers"><a class="num" href="#">1
</a><a class="num" href="#">2</a><a class="num" href="#">3
</a><a class="num" href="#">4
</a><a class="num" href="#">5</a></div>


border:solid 1px black;

you have to have those padding properties right or else your number will go down by the amount of the border width when it's hovered over.

09-20-2011, 02:59 AM
I will consider this. I know this is going to sound like an excuse, but I inherited this site already made from the client, who has either lost contact with or has been estranged from the original producer.

The strange this is, all I did was duplicate table elements, and the DIV numbered nav to add the new pages. Could this be a linking thing?

The other clue would be how it was loaded or set up on the server. The "Assets" where the images were stored, is outside of the "Site" folder where the pages are. (I don't know why they did it this way.) So all the linking in the code has to have the '../../' thing going on...

Did you look at the source code for any red flags?

09-20-2011, 02:13 PM
The only thing I noticed was that the order of the page elements in the html does not really match how it looks like they should be ordered.

the "number box" which is displayed at the bottom is higher up in the html than both the left side tabs for the different portfolios and the middle picture. he must be using some really weird code to be putting everything out of order like that -- some weird code which might be the source of the IE problems.

then again, maybe that's a normal way to do it and I don't know what I'm talking about.

09-20-2011, 03:03 PM
I noticed that too, but since the pages loaded correctly, minus the rollovers, I figured it didn't matter. The pages where the "numberbox" is in the wrong place were the ones I didn't touch.

Maybe I'll take a stab at putting them in the correct place...