Page doesn't display as it should in older browsers

HTML & CSS
1

Hey,

I am working on a site which is linked to here: http://www.neiltonge.co.uk/mysite

When viewed in a modern browser it displays fine but when viewed in IE8, IE7 and IE6 -, It all fails apart.

Main issues are things like lists being displayed in traditional list styles instead of being inline and some elements not floating correctly.

I personally, don;t know why these are occuring as I ahve had both of these 2 things working perfectly in IE8 and IE7 in the past.

Help would be most appreciated.

Thanks

Neil

2

You’re using HTML5 elements. For IE support you’ll need to use a javascript such as Modernizr or [URL=“http://code.google.com/p/html5shiv/”]HTML5 shiv

Of course, I shouldn’t really be calling it HTML5 though :slight_smile:

3

Ok, I have just added the HTML5 Shiv code to my site and it still doesn’t alter the display in older IE versions.

4

So the shiv sorted out IE8.

Try replacing the following rules to bring IE6/7 to heel.

body
{
min-height: 100%;
background: #c0c0c0;
text-align: center; /* to center the content of body (was justify) */
font-family: Arial, "Times New Roman", Times, sans-serif;
font-size: 11pt;
color: #ffffff;
}

/* Header */

header h1 /* removed child selector > (not recognised by IE6) */
{

margin-left: 1em;
padding-top: .4em;
margin-bottom: .4em;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: normal;
font-size: 3em;
}

/* Container */

#container
{
width: 940px;
margin-left: auto;
margin-right: auto;
background: #000000;
text-align: left; /* remove the center align set on body */
}

nav
{
height: 44px;
background: url(../images/bar.jpg) no-repeat left top;
line-height: 44px; /* added for vertical alignment of content */
}

nav li
{
display: inline; /* was inline-block;*/
padding: 12px 45px 0 45px;
text-decoration: none;
}
5

Excellent. Thanks

I also looked how it viewed in IE5.5 and it’s awful. I think i’ll leave out IE5.5 support.

Can you just explain how the line-height made the navigation links line up? When i did the navigation bar I got terribly confused about what was going on so an explanation there would be excellent.

Also, Any idea how to remove the thin black line above the navigation bar?

6

line-height and centering text vertically.

To remove the black line add:

header img {display:block;}

img elements, being inline by default, include a space below for text descenders. Set display to block and the gap is gone.

7

Wow, Two things in one post that I did not know about. I’ll add those two to my CSS tips and tricks notepad to make sure I always remember them.

Thanks so much!

8

Just updated the site, not on the live version yet though, one issue, when viewing in older versions of IE, I get at least 4 script error popup boxes which I ahve to accept each time.

Why are these being caused and how can they be prevented?

Neil

9

You’ll need to update the live version so we can see for ourselves what the errors are.:slight_smile:

(You’re not talking about when viewing locally are you (the usual local active control error message).)

10

ok, Live site has been updated:

http://www.neiltonge.co.uk/mysite

An example of 1 of the 4 script errors I am getting in older IE versions is:

For testing in IE6, IE7 and IE8 I use IETester, It’s not that causing the errors is it? Just want to rule it out!

Thanks

Neil

11

IE6 in IETester shows no errors here. In my experience, IETester tends to throw these kind of errors when using a local server.

12

Oh i’m sorry, it’s IE5.5 throwing the script errors. I only just realised this as before, I just used IETester to open the same URL in all browser versions. When checked individually it’s IE5.5 being a pain.

Nto to worry, I’m not bothering with IE5.5