UKC

I am making a website for my friend's business. The pages I have done are temporarily hosted on my other website. I have a problem with the front page when viewed in IE8. It seems to be fine in all the other browsers I have looked at, only IE8 is causing me problems

The page is www.myturkishadventure.com/test2.html

In IE8, one image is moving to the top left corner.
If it cannot be changed, is it possible (and easy) to detect if the browser is IE8 so it can redirect to a different front page?

Thanks

In reply to Big Steve:

have you tried it in ie9? it gets even better. All the images are huge

I use ietester as a quick way to just test against different browser versions.

As for the floating issue. Its tricky to get everything looking correct in ever browser and dont even get me started on mobile devices.

As a start, i would probably put the divs for the 4 images in a container div. Make sure thats positioned correctly, then you can relative position the divs inside.

In reply to Big Steve:

Yes, it is possible. However it's not super easy. I'd say that 50% of your users are going to be using Chrome and Firefox. 30% are going to be using IE. So there won't be many on IE8. So as long as it's not awful, might not be worth fixing.

But yes, you can detect the user agent string with a bit of Javascript and either serve up a different page (or ideally) a different piece of CSS that fixes the issue.

In reply to Big Steve:

"Designed and created by Steve Dockrell using Serif WebPlus x5."

You have got to be kidding...

In reply to Muel: I currently use WebPlus 6, I have been debating whether I should save up and buy Dreamweaver, but Im not sure my abilities and experience warrant it.

In reply to Big Steve:

stick a container div around the 4 and it will sort you out.

http://digital.cabinetoffice.gov.uk/2012/12/12/browser-usage-on-gov-uk/

Only 15% of people in the UK using IE8 (Less in the states) dropping. Don't hack your site for IE8.

In reply to Big Steve:

There are plenty of free code editors out there if you want to learn to code and do the thing properly.

In reply to Milesy:

15% average means nothing. If the site gets 4 visitors a month, then that's only a handful of people a year that can't view it properly. If however the site gets 50k views a months, that's 2250 people every month that can't view it as intended. That's too many people to ignore. That's before you even take into account that browser usages fluctuate massively depending on the individual site and what kind of content it has.

On my personal site, I ignore IE8 and below because I get 2-3% of my traffic from it. 2-3% of 200-500 views a month isn't worth my time fixing it, plus it's just a blog so people aren't relying on it.

In reply to Big Steve:

works ok in the i.e.8 I'm using at work but I have compatibility mode switched on for this very reason. - IE8 is out of date, and many websites now display a banner saying they have withdrawn or are about to withdraw support for IE8

In reply to Big Steve:

Whilst the code isnt technically wrong (as in its valid) you (or the software your using) isn't really using the HTML elements (mainly the div's, ul) in the correct way and is trying to compensate by using css and absolute positioning to make it appear where you expect. Because all browsers render css different this is why you are getting your issue on IE8.

As mentioned by the other posters, IE8 is being used by less and less people, however you'd need to use something like google analytics to decide how many of your viewers its affecting.

Regardless i would change the layout of your page significantly. I dont mind helping you, but can you show what me what your expecting to see (have you sketched it anywhere, or have a mock up).

I would also consider ditching any WYSIWYG editors (such as dreamweaver) until you have a firm understanding of HTML, CSS and JavaScript. Because inevitably without this proper understanding the editor will create a site you find hard to maintain and change, which adds to the cost later on. There are lots of free resources online to help with this.

In reply to Big Steve:

Passing it through the W3C validator - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.myturkisha... gives 6 errors. Actually it looks like failure to close a div is likely to be the main cause.

ALC

In reply to a lakeland climber:

I've had a look at the markup - errmm

At line 102 there's a closing </div> that shouldn't be there.
Each of the links at lines 136, 146, 156 & 166 need closing.

In both Firefox and Chrome on Mac the page looks just weird.

ALC