My site looks perfectly fine in all the new browsers including IE 8 however in IE 7 6 and 5 (if you still make your website compliant in 5) the layout just goes all over the place.

 

I don't actually have a website for it at the moment so I'm hosting it on a different site just so i can show you guys. It can be seen at www.jasongold.org/estatenew

 

The problem is, the only thing i know how to do is make the site. If it doesn't work in other browsers I don't know what to do because I don't know anything about hacks. If anyone could help or point me in the right direction it will be much appreciated.

 

Thanks Josh

There are sites which will show you how your page looks (but not how it works, like dropdown menus). Have a look at http://browsershots.org/

 

Generally, design for Firefox first and Safari, Google, Opera and IE8 will probably be similar; then use conditional comments with different styles for IE7 and/or IE6 if necessary.

 

See http://www.javascriptkit.com/howto/cc2.shtml and http://www.wickham43.net/generaladvice.php#conditionalcomments regarding conditional comments.

For IE6 sometimes the only thing you can do is create a style sheet just for IE6 fixes, its a pain, but can save time.

 

This code:

 

<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" href="IE6CSS.css" />

<![endif]-->

 

will only be read by IE6 and below, so you can link to a new stylesheet with rules for IE6 only. If you place this underneath your existing CSS link then the IE6 sheet will override rules in the original sheet in IE6

 

How I hate IE6.

 

Stevo

Lol yeah don't we all hate IE? Thanks for both of your replies. Only question is, is there a one that will overise IE 7 to as that has come out looking not right to but probably could be changed with a few adjustments as it's not as bad as IE 6.

I think IE7 can usually be fixed, have you got an example of what's going wrong?

You can look at it at www.jasongold.org/estatenew If you can't view it on different version of IE let me know and i'll post screenshots if you want? It might be something to do with with using a faux column as I've never had to make fixes before but I'm not entirely sure.

i think you need to add a height to the sidebar that will be tall enough for the content to float against. it's setting automatically in FF and all good browsers...but might not be in IE

 

Not sure tho as I can't test in Firebug.

Would i do that as a comment in my header in the html or in the css?

in the css, for the #sidebar properties try adding height:600px;

Ah i thought you meant like an additional IE hack. Hmm it made the layout right, but the faux column doesn't work with it. It just cuts off after 600px. I've uploaded it to the same url so you can see the difference.

you could always add the sidebar background to the #pagewrap

Can you view it on 7 or 6? It's not that it won't go down. It's that the content is linked to the sidebar so if the sidebar will only go down 600px the content will do the same and cuts off after 600px. I can obviously make it bigger but every page will have different size content in.

right I gotcha

 

I think its working the wrong way round, I think you need the content to define its own height, but with a min-height that will be at least as big as the sidebar. (about 600px)

 

that way you can include the background for the sidebar in the page and let it run all the way down.

 

The one problem you'll get with that is that IE6 doesnt recognise min-height, it does however recognise 'height' as min-height, so you need to include a conditional rule either in a stylesheet for IE6 or in a conditional comment in the HTML like:

 

<!--[if lt IE 7]>

<style type="text/css">

#content {height:600px;}

</style>

<![endif]-->

A professional did it that way round and it works perfectly in all the new browsers. The background image for the sidebar goes behind all the content and then when the sidebar has come to the bottom of the div. The image that's behind everything (the sidebar background) will carry on going to the end of the content. Oh I'm just so confused on how this can be done

Although the #pagewrap does run all the way down, the header and footer overlay it so you won't see the column image anywhere except in the column.

 

I think the alternative is to wrap the content and sidebar in a new div and give that div the sidebar image background, that way you can leave everything else as is.