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/applying-ie-7-layout-fixes-using-conditional-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 (http://browsershots.org/), 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.

[brainbuzzmedia]

Unfortunately it didn't make a difference. This is what is in the .js file (It is also attached, in case that isn't showing up right):


/*
* jQuery Nivo Slider v2.0
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* May 2010 - Pick random effect from specified set of effects by toronegro
* May 2010 - controlNavThumbsFromRel option added by nerd-sh
* May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
* April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
* March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
*/

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1f.1q=9(1X){b 3=$.2i({},$.1f.1q.2c,1X);I g.E(9(){b 4={f:0,t:\'\',U:0,o:\'\',N:m,1k:m,1N:m};b 5=$(g);5.1S(\'7:4\',4);5.e(\'2h\',\'2g\');5.1n(\'1q\');b d=5.2j();d.E(9(){b j=$(g);b 1p=\'\';6(!j.K(\'B\')){6(j.K(\'a\')){j.1n(\'7-2k\');1p=j}j=j.1g(\'B:1s\')}b 1c=j.w();6(1c==0)1c=j.s(\'w\');b 1d=j.x();6(1d==0)1d=j.s(\'x\');6(1c>5.w()){5.w(1c)}6(1d>5.x()){5.x(1d)}6(1p!=\'\'){1p.e(\'P\',\'1h\')}j.e(\'P\',\'1h\');4.U++});6(3.1a>0){6(3.1a>=4.U)3.1a=4.U-1;4.f=3.1a}6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');2b(b i=0;i<3.h;i++){b G=X.27(5.w()/3.h);6(i==3.h-1){5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:(5.w()-(G*i))+\'13\'}))}n{5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:G+\'13\'}))}}5.J($(\'<C z="7-H"><p></p></C>\').e({P:\'1h\',y:3.1Y}));6(4.t.s(\'16\')!=\'\'){$(\'.7-H p\',5).1y(4.t.s(\'16\'));$(\'.7-H\',5).1x(3.q)}b l=0;6(!3.1i&&d.1j>1){l=1v(9(){F(5,d,3,m)},3.1m)}6(3.T){5.J(\'<C z="7-T"><a z="7-2a">2f</a><a z="7-29">2m</a></C>\');6(3.2d){$(\'.7-T\',5).24();5.25(9(){$(\'.7-T\',5).2l()},9(){$(\'.7-T\',5).24()})}$(\'a.7-2a\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')});$(\'a.7-29\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')})}6(3.M){b 1b=$(\'<C z="7-M"></C>\');5.J(1b);2b(b i=0;i<d.1j;i++){6(3.20){b j=d.1B(i);6(!j.K(\'B\')){j=j.1g(\'B:1s\')}6(3.1Q){1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'11\')+\'" 28="" /></a>\')}n{1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'D\').2n(3.1R,3.1P)+\'" 28="" /></a>\')}}n{1b.J(\'<a z="7-1l" 11="\'+i+\'">\'+i+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\');$(\'.7-M a\',5).1J(\'1I\',9(){6(4.N)I m;6($(g).2e(\'1o\'))I m;S(l);l=\'\';5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');4.f=$(g).s(\'11\')-1;F(5,d,3,\'1l\')})}6(3.1M){$(2q).2A(9(1L){6(1L.1Z==\'2C\'){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')}6(1L.1Z==\'2D\'){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')}})}6(3.1T){5.25(9(){4.1k=Q;S(l);l=\'\'},9(){4.1k=m;6(l==\'\'&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}})}5.2E(\'7:Z\',9(){4.N=m;$(d).E(9(){6($(g).K(\'a\')){$(g).e(\'P\',\'1h\')}});6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}6(l==\'\'&&!4.1k&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}3.1U.1z(g)})});9 F(5,d,3,19){b 4=5.1S(\'7:4\');6((!4||4.1N)&&!19)I m;3.1W.1z(g);6(!19){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}n{6(19==\'1C\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}6(19==\'1A\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}}4.f++;6(4.f==4.U){4.f=0;3.1V.1z(g)}6(4.f<0)4.f=(4.U-1);6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6(3.M){$(\'.7-M a\',5).2F(\'1o\');$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\')}6(4.t.s(\'16\')!=\'\'){6($(\'.7-H\',5).e(\'P\')==\'1w\'){$(\'.7-H p\',5).22(3.q,9(){$(g).1y(4.t.s(\'16\'));$(g).1x(3.q)})}n{$(\'.7-H p\',5).1y(4.t.s(\'16\'))}$(\'.7-H\',5).1x(3.q)}n{$(\'.7-H\',5).22(3.q)}b i=0;$(\'.7-c\',5).E(9(){b G=X.27(5.w()/3.h);$(g).e({x:\'O\',y:\'0\',W:\'V(\'+4.t.s(\'D\')+\') R-Y -\'+((G+(i*G))-G)+\'13 0%\'});i++});6(3.k==\'1t\'){b 10=2G 2B("1K","14","1F","17","1E","12","1D","1r");4.o=10[X.26(X.1t()*(10.1j+1))];6(4.o==2y)4.o=\'1r\'}6(3.k.2o(\',\')!=-1){b 10=3.k.2r(\',\');4.o=$.2z(10[X.26(X.1t()*10.1j)])}4.N=Q;6(3.k==\'2p\'||3.k==\'1K\'||4.o==\'1K\'||3.k==\'14\'||4.o==\'14\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'14\'||4.o==\'14\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'1G\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'2t\'||3.k==\'1F\'||4.o==\'1F\'||3.k==\'17\'||4.o==\'17\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'17\'||4.o==\'17\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'23\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1E\'||3.k==\'2u\'||4.o==\'1E\'||3.k==\'12\'||4.o==\'12\'){b u=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.k==\'12\'||4.o==\'12\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);6(i==0){c.e(\'1G\',\'O\');i++}n{c.e(\'23\',\'O\');i=0}6(v==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;v++})}n 6(3.k==\'1D\'||4.o==\'1D\'){b u=0;b i=0;$(\'.7-c\',5).E(9(){b c=$(g);b 1H=c.w();c.e({1G:\'O\',x:\'r%\',w:\'O\'});6(i==3.h-1){L(9(){c.A({w:1H,y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({w:1H,y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1r\'||4.o==\'1r\'){b i=0;$(\'.7-c\',5).E(9(){$(g).e(\'x\',\'r%\');6(i==3.h-1){$(g).A({y:\'1.0\'},(3.q*2),\'\',9(){5.18(\'7:Z\')})}n{$(g).A({y:\'1.0\'},(3.q*2))}i++})}}};$.1f.1q.2c={k:\'1t\',h:15,q:2x,1m:2w,1a:0,T:Q,2d:Q,M:Q,20:m,1Q:m,1 R:\'.1O\',1P:\'2v.1O\',1M:Q,1T:Q,1i:m,1Y:0.8,1W:9(){},1U:9(){},1V:9(){}};$.1f.1e=[].1e})(2s);',62,167,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||child|effect|timer|false|else|randAnim||animSpeed|10 0|attr|currentImage|timeBuff||width|height|opacity|class|animate|img|div|src|each|nivoRun|sliceWidth|caption|return|append|is|setTimeout|controlNav|running|0px| display|true|no|clearInterval|directionNav|totalSlides|url|background|Math|repeat|animFinished|anims|rel|sliceUpDownLeft|px|sliceDownLeft||title|sliceUpLeft|tri gger|nudge|startSlide|nivoControl|childWidth|childHeight|reverse|fn|find|none|manualAdvance|length|paused|control|pauseTime|addClass|active|link|nivoSlider|fade |first|random|50|setInterval|block|fadeIn|html|call|next|eq|prev|fold|sliceUpDown|sliceUpRight|top|origWidth|click|live|sliceDownRight|event|keyboardNav|stop|jp g|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbsSearch|data|pauseOnHover|afterChange|slideshowEnd|beforeChange|options|captionOpacity|keyCode| controlNavThumbs|left|fadeOut|bottom|hide|hover|floor|round|alt|nextNav|prevNav|for|defaults|directionNavHide|hasClass|Prev|relative|position|extend|children|im ageLink|show|Next|replace|indexOf|sliceDown|window|split|jQuery|sliceUp|sliceUpDownRight|_thumb|3000|500|undefined|trim|keypress|Array|37|39|bind|removeClass|ne w'.split('|'),0,{}))

[brainbuzzmedia]

I figured something else out. All of the content on the post and sidebar is wrapped in their own divs, then a 1000px wide div#main, then that is wrapped in a 100% wide div#main_container.

If I remove the css:

width:1000px;
min-height:100%;

from div#main, the page realigns correctly vertically. Then, of course the content gets spread to the sides of the screen because there is no fixed width on either of the containers.

This is so screwy and frustrating. I have 10 wordpress themes to code any I completely need this framework to display correctly and validate and this problem has me clueless.

(Oh and I fixed the dropdown problem in the other thread. I just found a different drop down script that worked with the jquery.)

[azoomer]

I like to use the thematic framework for wordpress. Very easy to customize and it has a lot of nice features. I customize it through a child theme. You can check thematic out at themeshaper.com ( it's free). Well maybe you know it already. I have the nivoslider on one wordpress site with a thematic template and it works fine. on that site i have this initiation


jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'fade',
slices:15,
animSpeed:800,
pauseTime:7000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
with the $ replaced by jQuery, but that's because of the jquery noconflict mode. You could try the same as it could prevent conflicts. But other than that I am running dry on good ideas on how to get you template fixed. Not really sure now if it's a css or a javascript problem. It would be helpful with some fresh eyes on it.