Sometimes my page loads correctly in IE and sometimes it doesn't?

HTML & CSS
1

Hi Guys,

im having trouble with my website www.cotswoldbells.co.uk

I found that sometimes it loads ok in IE and other times it loads incorrectly!

How can I fix this??

2

It loads every time for me and as there is not odvious wrong I assume it has loaded correctly.

I think you need to explain what is or is not happening in more detail.

3

When I load it in IE 7 or 8 if i refresh the page a few times or click on different pages it sometimes, quite frequently doesn’t load correctly and stretches the green contents box over everything else on the page…?

4

although it doesn’t seem to do this on my desktop, only the laptop??

5

Yes, I’ve been trying to “break” IE8 on my desktop and cannot duplicate the problem described.

I do see one problem consistently. The layout of the second social box does not match the top in that the image and “Follow” button are missing. Otherwise, it looks pretty solid.

I posted a note about an issue with the footer text in Firefox. That issue still exists. The Facebook box is empty, too.

6

I think it only does it when compatibility mode is switched on? It starts doing some crazy things?? Also what is wrong with the footer in firefox? it seems fine on mine?

7

The text in the footer overflows the green background if the user chooses to zoom text-only larger. The dark green box has a max-height. Deleting that max-height will allow the box to extend as the text is zoomed larger.

EDIT: found the post. the code is:


#colophon {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    [color=red][s]max-height: 90px;[/s][/color]
    max-width: 962px;
    padding: 0;
    width: 100%;
}

The Facebook box is empty, too.

Never mind about the Facebook box report. That’s my local “problem”… disabled in “NoScript”.

EDIT: on the other hand, disabling it in NoScript shouldn’t leave the box entirely empty, should it?

8

If I zoom text only I still don’t get this problem on my firefox? Also, how do I fix the twitter box so that it doesn’t loose the pics in IE? :(:frowning:
I’m still getting the problem on my IE as well, does it mess up when you try it in compatibility mode? :frowning:

9

This is what I see…

10

That attachment didn’t work? Any idea on the twitter problem also?

11

What do you mean “That attachment didn’t work?” ? The image is fine. The message should indicate that it is “Pending approval”. It will be visible after it has been approved.

I would guess that the twitter image needs a width assigned, but have not looked at the code to verify that suspicion. That’s where I would start, though.

12

ac1986,

Please read the following post by @pantspress for an explanation of the problem with the image to the left of the twitter icon and his solution. Please let us know if you are unable to figure out how to apply the fix to your site.

13

Hi, thanks for the link. Im still unable to correct it though. Any idea on the custom code i need to add to get it working?

14

Add the two following items to your HTML. Hopefully this will fix the twitter box in IE8 without introducing any other bugs anywhere else.

Line 303:


<img src="http://a0.twimg.com/profile_images/3346603943/28987cd069941c8aa6a256606ca3232d_normal.jpeg" width="44" height="44" [color=blue]style="max-width:none"[/color]>

Line 311:


<div style="position:absolute;top:30px;left:59px;[color=blue]width:65px;[/color]">

Test thoroughly.

15

Hi,
This did work but I must have updated the plugin and now cant find the code to edit again?
Any ideas?
Cheers

16

The inline styles that were in the HTML have been replaced with CSS styles within the body of the page. The following CSS styles will replace the styles that were added to the inline HTML that fixed the IE8 problem but seem to be missing now.

These are the lines that appear on the HTML page that I see. If they are being inserted by a php call, you will have to determine where they actually live.

(line 350)


#tlb_follow {
    left: 59px;
    position: absolute;
    top: 30px;
    [color=blue]width:65px;    /* add me */[/color]
}

(add above line 335 or thereabouts)


[color=blue]#tlb_profile_img img {
    max-width:none;
}[/color]

Untested.

17

Thanks man, worked a treat!
Any idea how I can get the buttons to transition smoothly in IE8 now , as they look pretty bad at the moment?
Cheers

18

No, IE8 looks OK to me. I do not see anything that “transitions” in any way.

19

The buttons at the top, don’t work very well in ie8?

20

Your description is a bit “weak”, but I see that in IE8 the buttons do not change from :link to :hover and back consistently. Sometimes the state persists so much that any number of buttons can take on the :hover appearance simultaneously.

I do not have the expertise nor time to make this menu code backward compatible with IE8. Someone else will have to do that for you.