Weird IE bug?

[spinal007]

This page...
http://www.connect-everyone.com/Vide...m-Business.htm

... displays fine in Firefox and Opera, but in IE it stops after "Product Comparisons"!

Sometime IE even crashes...

Can anyone point me in the right direction?

[spinal007]

Right, in an attempt to solve the problem, I added some float rules...
with:45%; float:left;
...which shows items in two columns...

But the last item still disappears.

Any ideas?

[Legacy_Staff]

THIS is what I see in IE 6.0 m8.

[spinal007]

I know... that's the problem!
The last item (bottom right hand corner) is missing...

If you look at the source, after "Product Comparisons" you should see "Uses".
FF displays it, IE doesn't.

[Legacy_Staff]

Gotcha.
CSS layout issue?

[spinal007]

well, I suppose... but I can't see what's wrong.
It works fine in FF and in theory it should work fine on both.

IE is known to have bugs when dealing with floating elements, perhaps some has dealt with this befor?

[ukgeoff]

For starters I would suggest trimming out the surplus divs such as those with class='C' and class='FWrapper.

The styling code could be applied straight to the footer div for example.

Your basic layout structure is three horizontal divs. These are full width and will naturally flow one after the other.

You then just need the extra layout for the middle section bits and pieces.

You also currently have 13 empty <p></p> tags.

[spinal007]

Thanks for taking your time to check the code ukgeoff. Appreciated!

Removed the extra divs, applyed css rules directly to Head, Body and Foot divs.
I had extra divs because the initial design had rounded edges, I just forgot to remove the divs after the design changed. Thanks for poiting it out to me.

the empty <p> tags are there because my client hasn;t yet filled in the description for the pages.... I added a tweak to exclude them if the description is empty. Again, thanks for pointing that out.

Problem now is, that weird IE behaviour is still there!

[spinal007]

Correction: I had to put the additional divs back...
The 1st makes the border stretch to the edge of the page,
the 2nd keeps the content within 770px in the centre of the page.

[ukgeoff]

Just had another look at you page this morning.

The footer with images is there in both FF and IE now but I notice that the menu is not as complete in FF as in IE. Is this something you are working on?

Also, did you deliberately create the footer logos with anti aliasing OFF when you added the text because they do look a bit rough. They are also large enough such that in IE, when you have the cursor over them, the image toolbar automatically pops up if you don't have it turned off.

Most users won't be aware of how to turn this off and will find it annoying. The way round that is to place the following meta code in you pages:

Code: Select all

<meta http-equiv="imagetoolbar" content="no" />

[spinal007]

That's my client's work. I just code and maintain the Content Management System... However, I do keep him advised so I'll pass the information on. Thanks a lot mate

He wants it that way so

What's bugging me is that IE is hiding the last item in the list: Attached Thumbnails

[ukgeoff]

I dont appear to be seeing the same as you. First IE then FF.

[spinal007]

You were using the firefox extension "IE tab" weren't you?
I use that too... And I get the exact same thing you do...

But there's still a problem:
In IE tab: it repeat "Typical Uses/Examples" onto the next line.
In IE itself: it hides "Typical Uses/Examples" altogether

I know this is some sort of IE box model bug or something, and I've read about it before, but I didn't bother to keep the info, now it's driving me nuts!

I'll just keep searching and I'll post here when I find it (if I do).

Thanks for the help ukgeoff

[spinal007]

GOT IT!!!!!!!!!!!!!!!!!!!!!

Here's a list of bugs in IE: (and some solutions)
http://www.positioniseverything.net/explorer.html

Here's the bug that was driving me crazy: (IE Peek-a-boo bug)
http://www.positioniseverything.net/.../peekaboo.html

Here's the entire fix:

Code: Select all

.Clear{width:100%;display:inline-block;clear:both;}
.Clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* IE \*/ * html .Clear{ height:1%; } /* End IE */

If you ever have similar problems, just apply the Clear tag to the container div.

[ukgeoff]

Actually no, I wasn't using the IE tab. I was right-clicking on the page and selecting 'View this page in IE' which just passes the url to IE proper.

Your original link no longer points to the problem page but is redirected.

[spinal007]

About IE tab:
Ah... ok then, in that case I'd recommend you get it. It's quite usefull. Let's u see pages through the IE engine within Firefox.

About the redirect:
That's because my client changed the name of the page.... the CMS redirects to the new page automatically

Most important thing is, I found a long term solution to the problem, so I'm happy


And thanks for you help ukgeoff...