I Hate IE7, How Do I Fix This?

[brainbuzzmedia]

I am creating a framework for designing websites / themes and I just checked out what it looks like in IE7 and it is just a total mess. The footer is displayed above the main content and there are giant white spaces all over the place where there shouldn't be.

All of the xhtml & css validates.

http://www.brainbuzzmedia.com/!BLUEPRINT/blueprint.html

This is more of a general question; how do designers go about fixing problems in IE when everything is already validated? I have no idea what could possibly be causing all these things to happen and no idea how to fix them.

[bluewalrus]

You could make a specific stylesheet (or just for the elements that are affected) for that specific version, or for all i.e's.
http://raventools.com/blog/2698/appl...ional-comments

You could change around the way you have it coded.

[brainbuzzmedia]

Well I know how to make conditional styles but what I meant was, how do I even figure out what style needs to be changed whenever everything validates and is done (i think) correctly?

[azoomer]

get some firefox add on's if you don't have it already: firebug, measureIt. I recently discovered a program called IEtester that can display the different versions of IE on your local pc, very useful. With these three tools you can line them up and compare. Firebug will give you the ability to find which styles you need to change in the conditional stylesheet, even though it doesn't directly work in IE. I see you have a reset already so it shouldn't be to much work. In spite of everything being correct and valid there is still the old IE box model giving issues that needs to be compensated for. Good luck. It looks nice your site.

edit: I forgot to mention the 'web developer' add on and another one called 'View Source Chart', which I find very useful. Also the ' noscript' add on makes it easy to see how your page looks with javascript disabled. If you are building a framework it should preferably degrade well.

[traq]

Well I know how to make conditional styles but what I meant was, how do I even figure out what style needs to be changed whenever everything validates and is done (i think) correctly?

doing something correctly does not mean it'll work in IE.

you simply have to test it in different browsers. Getting different versions of IE installed alongside each other can be difficult, but there's also the IEtester azoomer mentioned. And you can get a basic idea about what needs to be fixed from browsershots, though that can't help with interactive stuff (:hover, javascript, etc.).

[brainbuzzmedia]

get some firefox add on's if you don't have it already: firebug, measureIt. I recently discovered a program called IEtester that can display the different versions of IE on your local pc, very useful. With these three tools you can line them up and compare. Firebug will give you the ability to find which styles you need to change in the conditional stylesheet, even though it doesn't directly work in IE. I see you have a reset already so it shouldn't be to much work. In spite of everything being correct and valid there is still the old IE box model giving issues that needs to be compensated for. Good luck. It looks nice your site.

edit: I forgot to mention the 'web developer' add on and another one called 'View Source Chart', which I find very useful. Also the ' noscript' add on makes it easy to see how your page looks with javascript disabled. If you are building a framework it should preferably degrade well.

Yeah I have firebug and I'll try out the other ones you mentioned, but my main problem is that everything is working fine in Firefox and there is no way to see what's causing the problem in IE7. If I load the page in IE7 I can see that everything is messed up but I can't inspect it to figure out what is doing it.

[azoomer]

I see what you mean IE8 is throwing a javascript error and that might be the same reason it isn't rendering properly in ie7. I can't see what the error is right now, but it might be a conflict between scripts. if it was my page i would outcomment the javascripts one by one to see if the the error disappears at one point.

[azoomer]

Im not sure about this but maybe you haven't closed the document ready function of the on page colorbox script, so this
});
on line 112 could maybe get the error to go away. Don't kill me if its wrong, it's kind of confusing counting braces.

[brainbuzzmedia]

Im not sure about this but maybe you haven't closed the document ready function of the on page colorbox script, so this
});
on line 112 could maybe get the error to go away. Don't kill me if its wrong, it's kind of confusing counting braces.

Actually there was a closing bracket missing, but it didn't change how it looked after I fixed it. I figured out though that if I removed the code for the content slider that this fixed the spacing problem. I have no idea how this is though because this is a standard content slider that I need to use, which other people use without problems.

Here's the code for the slider that needs to be removed to fix the spacing:

<!-- sliders -->
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- initialize sliders -->
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

[azoomer]

It very nice the nivoslider, a shame that the code is obfuscated though. That makes it harder to see what may be conflicting. A thing you could try, however, is to take the nivoslider part and move it to the bottom of the page just before </body>. I'm talking about this

<!-- sliders -->
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- initialize sliders -->
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

Not sure if that will make any difference but it is worth a try. Sometimes rearranging the load sequence helps.