Frustrating IE8 inconstancies going on - OH PLEASE HELP!

HTML & CSS
1

So most things are done here and all looks good on mac browsers and windows ie9

but tests in windows ie8 are proving frustrating and time consuming!

here’s the site:

you’ll notice if you go here:
http://onfarmsolutions.com/products.html

in ie8

that the button graphics appear randomly on the page. It’s taken me some time to work out that this is somehow
duplicating the current page from the navigation and randomly placing it on the page.

I’m going backwards and forward trying to work out what’s happening here and would REALLY appreciate anyones viewpoint as to why this is happening…

Thanks very much!

2

You have a few errors. http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fonfarmsolutions.com%2Fproducts.html

I am also not seeing any difference between IE9, Chrome, and IE8…

3

thanks, I should go through and check all things like that. I have updated that page now but this doesn’t solve the issue in ie8.

Thanks

4

its all about the current page…

in ie8

if you are on the products page then the top navigation looses the link and shows on the page, and the footer links does the same.

what the hell is that!!??

5

I think we need some screenshot of what you are seeing because I’m not seeing anything out of place.

6

ok heres a link to some screen shots

1: About us page with missing link in navigation plus buttons appearing

2: is home where you can see the site logo is odd and look under the animated banner

3: products page, same sort of thing

Thanks!

http://onfarmsolutions.com/snaps.html

7

any ideas Mr. Earth?

8

No ideas…because I’m not see anything wrong even in full quirks mode. How are you testing IE8?

9

first of all i saw the funny stuff on a friends laptop using ie

and have since been testing with https://browserlab.adobe.com/en-us/index.html

10

On the products page, there seem to be some tags unaccounted for:

Line 27: Needs a close tag:
<li class=“ofs-mastitis-control”><a href=“mastitis.html” title=“About Mastitis Control”>Mastitis Control</a>

Line 34: Likewise, there is no closing tag for this <li>

Line 50: <div id=“ofs-page-container”>
May be missing a close tag.
It is presently closing on Line 99, the tag assigned to </div><!-- /#siteContain –>

11

Thanks Ronpat

I see the tags you mention that needed closing and have closed these. Unfortunately it doesn’t seem to solve the issue!!!

I can illustrate here that this is something to do with the navigation, one in the header and one in the footer - when on current page the link to the page disappears and appears oddly on the page as an image.

MUST VIEW IN IE8 OR BELOW:
http://onfarmsolutions.com/ie/products.html

  1. notice at bottom of the page to right, an image replacing the link from the top
    <li class=“ofs-products”><a href=“products.html” title=“Products”>Products</a>
    <ul>
    <li><a href=“products-ofs-teatwand.html”>Teatwand 400</a></li>
    <li><a href=“products-ofs-spread-eagle.html”>Spreadeagle</a></li>
    </ul>
    </li>

  2. notice at the bottom of page above footer, an image replacing the link from the footer <li class=“navproducts”><a href=“products.html”>Products</a></li>

And this happens on each page. Every time the current page is replaced by an image.

12

I see the problem clearly when accessing your page over the internet. Unfortunately, IE8 renders it perfectly when it is run locally.

In the spirit of cleaning up strays, lets try one more…

in the css, lines 299 and 301 have an unneeded close curly braces. Try deleting those braces and see if that helps.

13

Thats DONE IT Ronpat you beautiful person!

Now that is the sort of thing that all browsers should fail on

In solving that we have developed another but I won’t push my luck with that one yet!

Thanks very much, that is a good start to the day!

Cheers

14

You are very welcome. Glad to help. Gives my day a boost, too <smile>.

15

well check out the odd things going on with all pages now apart from the product page!

the footer is coming up over them main content…

just looking at it now myself

cheers

16

Actually, this is a “pre-existing condition”.

It looks like an excess of height has been allocated for the footer stuff.

Try the following changes in css and see if they work:

Line 1357 (in #ofs-footer)
FROM: height:380px;
TO: height:240px;

Line 1432 (in #footer-base)
and
Line 1440 (in #ofs-footer-base-content)
FROM: height:180px;
TO: height: 40px;

A question?:
Line 179 or thereabouts
#ofs-page-container applies a min-height:900px; to the container. It was 600px.
I’m not sure why it’s needed but it’s a bit tall for the shorter pages. It causes a white bar to appear beneath the footer.

PS: there are still some random “strays” amongst the html:

index.html
Line 4 should not have </html> tag.

about.html
Line 5 should not have </html> tag.

mastitis.html
Line 77 should not have a </div> tag.

products.html is clean!!!

products-ofs-teatwand.html
Line 3 requires a “greater-than” symbol at the end of the line. (The tag is incomplete.)
Line 67 contains a duplicate id=“home”.
Line 231 style code should not exist within the body of the page.

products-ofs-spread-eagle.html
Line 3 requires a “greater-than” symbol at the end of the line. (The tag is incomplete.)
Line 67 contains a duplicate id=“home”.
Line 91 contains a stray </a> at the end.
Line 222 style code should not exist within the body of the page.

testimonials.html
Line 3 requires a “greater-than” symbol at the end of the line. (The tag is incomplete.)

contact.html
Line 5 should not have </html> tag.

The usual caviats and disclaimers apply <grin>.

17

Thanks for all that ronpat!

so products.html is now performing beautifully which is great

your question:
#ofs-page-container applies a min-height:900px; to the container. It was 600px.

I was just seeing if this could help me, I think I put it in there early on, maybe I’ll go back and get rid of it
Thanks.

So I think the last thing (bloody hope so) that I need to change (and I think it’s best seen in Safari) is to sort something odd
going on with the body or the main black background.

probably best seen on about.html the body isn’t pushing the main content down to the footer
or on every other page apart from products.html the black background is falling short.

I’ll keep looking - thinking if products.html is working well it must be an html thing on other pages…

18

I got that one before you ronpat!

deleted class=“ofs-breakout”
from
<div id=“ofs-siteBurst” class=“ofs-breakout”>

19

Good show! Best of skill and luck going forward.

Ron.P

20

The initial problem has returned!!!

HA!