Side Navigation works in Firefox but not in IE7

--------------------------------------------------------------------------------

Why would the side navigation work in FF but not in IE7.

Take a look for yourself: www.torahandisrael.com

The picture and text change daily. Most of the pictures are jpeg, such as
the one that is currently there (on Monday).

I know it has to do with the picture, because I changed the picture to
another picture (also .jpg), and the navigation buttons worked fine. The only
difference was that the picture I changed it to was slightly smaller (12KB as
opposed to 30KB).

Strange.

Anyway, I'll have to keep the photo that causes the problem up until someone
helps me fix it, so please try to help sooner than later.

Define "side navigation work".

That URL looks identical in FF 3 and IE 8.
---
Leonard Grey
Errare humanum est

Pythonista wrote:
> --------------------------------------------------------------------------------
>
> Why would the side navigation work in FF but not in IE7.
>
> Take a look for yourself: www.torahandisrael.com
>
> The picture and text change daily. Most of the pictures are jpeg, such as
> the one that is currently there (on Monday).
>
> I know it has to do with the picture, because I changed the picture to
> another picture (also .jpg), and the navigation buttons worked fine. The only
> difference was that the picture I changed it to was slightly smaller (12KB as
> opposed to 30KB).
>
> Strange.
>
> Anyway, I'll have to keep the photo that causes the problem up until someone
> helps me fix it, so please try to help sooner than later.

By "does not work" I mean that when you move your cursor over the buttons on
the left, only the top three "light up." Also, not surprisingly, the ones
that do not light up do not take you anywhere when you click on them.

Pythonista wrote on Mon, 4 May 2009 19:11:01 -0700:

> ------------------------------------------------------------------------
> --------

> Why would the side navigation work in FF but not in IE7.

> Take a look for yourself: www.torahandisrael.com

> The picture and text change daily. Most of the pictures are jpeg, such
> as the one that is currently there (on Monday).

> I know it has to do with the picture, because I changed the picture to
> another picture (also .jpg), and the navigation buttons worked fine.
> The only difference was that the picture I changed it to was slightly
> smaller (12KB as opposed to 30KB).

> Strange.

> Anyway, I'll have to keep the photo that causes the problem up until
> someone helps me fix it, so please try to help sooner than later.

This page works fine for me with IE8 unless I click the Compatibility View
button, and then I see the issue with the buttons not highlighting.

Using the Developer tools in IE8 I found that turning off the "float: left"
for the class "img.left" allows the menus to work, although then the text no
longer sits to the right of the image. It's possible that there is something
in the JPEG data that is causing this, but it's definitely very odd. Could
you try wrapping the image in a div and setting the float of that div to
left, to see if it's something specific to the img element with that image?

--
Dan

I did this:
<a
href="http://www.amazon.com/Letters-Buddhist-Jew-Akiva-Tatz/dp/1568713568/"><div
style="float:left; margin: 10px 20px 0 0;border: none;"><img
src="Books/Buddhist-Jew.jpg" alt="" width="150px" /></div></a>

Is that what you intended?

Pythonista wrote on Tue, 5 May 2009 07:59:02 -0700:

> I did this:
> ?<a
> href="http://www.amazon.com/Letters-Buddhist-Jew-Akiva-Tatz/dp/
> 1568713568/"><div style="float:left; margin: 10px 20px 0 0;border:
> none;"><img src="Books/Buddhist-Jew.jpg" alt="" width="150px"
> /></div></a>

> Is that what you intended?

Yes. But that doesn't work either.

I made a copy of your HTML and CSS and tinkered, and discovered that
removing the italic tags from the paragraph seems to fix the issue. I found
plenty of references to "IE7 float bug italic" on Google, there are
literally thousands of posts on various sites about this issue. It seems
that the IE7 rendering engine doesn't like italics near floats

--
Dan

Wow! I haven't had something related to code make me brake out laughing for a
while. It's just so random! Anyway, I tried changing the <i> tags to <em>
tags. That (obviously) did not work.

Then I put this in: #main p {overflow: auto;}
and it worked, but now the text doesn't go around the book.

I admit, I'm not a CSS expert, in fact I'm probably still approaching
average, do you have any suggestions for what I could do to get the text
going around the book (like before) without having the problems that existed
previously?
--
Michael

Pythonista wrote on Tue, 5 May 2009 10:39:01 -0700:

> Wow! I haven't had something related to code make me brake out laughing
> for a while. It's just so random! Anyway, I tried changing the <i>
> tags to <em>
> tags. That (obviously) did not work.

> Then I put this in: #main p {overflow: auto;}
> and it worked, but now the text doesn't go around the book.

> I admit, I'm not a CSS expert, in fact I'm probably still approaching
> average, do you have any suggestions for what I could do to get the
> text going around the book (like before) without having the problems
> that existed previously?

I'm no expert either, but from my Googling yesterday the only solution I
could find was to not have italicised text. It doesn't matter how you
italicise it (<i>, <em>, or CSS attributes), it's the font itself that
appears to cause the problem - what appears to happen is that the area
occupied by the text and extended down to the bottom of the browser has a
hidden overlay across the entire page, so your hovers and links are rendered
useless because they are under this invisible layer.

Using tables instead of divs would solve the issue but that's hardly a great
idea, or possibly reordering the divs so that the menus come after the
paragraph but are still floated left might work. Unfortunately I don't have
time to experiment with this any more, sorry.

--
Dan