Help with a compatibly problem

[James1987]

i have a site i have been designing ( almost finished) that was due to go live next week but my boss has decided tomorrow is the day ! problem i have is i have tested it on all browser types ( ff4, IE9, chrome, Opera12.2) but just sent a demo to my boss and he cam back fuming that it was "far" from finshed checked on the browser he was running(IE8) and non of the styling is showing checked on other older broswers and ff3 and IE 8 and below dont desplay anything other then text!

any help would be great i have attached the CSS if you need the files for the site happy to pm a linkstyles.txt.

[ralph.m]

It's always important to test your site in the major browsers as you go, rather than the day before launch.

We'll need to see a live link to help with this, as the CSS file is unlikely to be the problem.

Make sure your pages have a valid doctype.

[James1987]

I was testing it across browsers and was going to test older version next week but deadline has been brought forward! um new site is here http://peppublishing.co.uk/new/index.html

[ralph.m]

Hm, definitely something wrong there. There is hardly anything on your page at this stage. Is that intentional? You should run your page through the validator, as there are quite a few errors that could be messing this up a bit. The code needs a lot of work in various ways. For example, all those <br> tags are out of place. You should be using margin/padding etc.

You are also using some new HTML5 elements (like <nav> that have no support in older browsers, so you need to help them out in some way, such as with the HTML5 shiv. Also, if you are going to use those elements, you should have an HTML5 doctype, rather than an old HTML4 transitional doctype.

[James1987]

yes its under the click of the images of the magazine ( dont ask its the way boss wants it) "clean" aparently ok heard of "padding" instead of break lines how does that work? can you show me an example.

[ralph.m]

The thing you should focus on first is the validation issues. But anyhow, an example would be that if you want space between the nav and the maincontent, don't use breaks, but put soething like this in the CSS file:

#main-content {
margin-top: 40px;
}

etc.

[Paul O'B]

As Ralph said you will need the html5 shiv to see anything at all in ie8 and under as they don't understand the new html5 elements.

You have also used css3 (linear gradients/border-radius etc) so you won't see those in browsers that don't support them.

[James1987]

dont mind about the gradients its more the fact the nav bar just doesnt exist looking into this html5 shiv does work for the nav bar to a point - none of the drop downs appear? and the images dont show is this todo with css3? fixed the validation errors they were just few "/" missing here and there problem from switching from dreamwever at home to using the free aptana studio ( freelance to employeed and they wont pay for me to get it in the office)

ideas welcome for setting this up for pre IE9 is the main concern as anyone with ff opera will probarly be on the latest but xp users cant get IE9.

[Paul O'B]

Hi,

Where have you uploaded the shiv file to?

It seems you are calling it from here (http://peppublishing.co.uk/new/dist/html5shiv.js) but its not there.

I've tested locally and your menu will work in ie8 if you add the shiv.

[Paul O'B]

You also need to remove the width="auto" from your image as that is not a valid attribute value and will probably stop it showing in some browsers as they may treat auto as zero.

<img src="images/logo.jpg" width="auto" height="65" alt="PEP Logo"/>

[James1987]

add it and tested it on a VM dev box local uploaded it now to that folder and i'v removed the width tag - still cant get the dropdowns to appear no matter how ugly.

[Paul O'B]

Hi,

The dropdowns are appearing in IE8 ok now. You will of course need to supply background colours to the nav itself to make up for the lack of gradients etc otherwise it will just be white.

The three big images are not showing because I think you have saved them as bitmaps instead of jpg (or are corrupted) as each image is a massive 600k+ which is almost 100 times a larger file size than they need be.

I've attached the three images for you to use optimised down to a usable file size.

To be honest you are using advanced techniques when you don't seem to have a grasp on the basics and although we can point you in the right direction you do have a lot of reading/learning to catch up on first We can help you learn how to do it properly but it will take some time and won't be a quick fix as such.

[James1987]

thanks yea there large at the moment as I'm currently working of a local VM so its not been a problem i will be optimising the files before they go live - thanks for the heads upi used to use my coding alot few years ago but been out of the loop a while and so just having to scrub the rust off.

i enjoy the reading and implementing but with so much do need a helping hand to prod in the right direction.