** Homepage looks REALLy OFF only in IE **

[brysonprice]

My homepage looks good on all browsers except IE. Does anyone know why?

 

My link

Edited March 9, 2011 by brysonpice

[Wickham]

Your #wrapper div is closed before the content when I think it should be closed after everything else.

 

<div id="wrapper">
<!--</div> moved down-->

<div class="cartoon"............

................</object></div>

</div>
</div><!--moved down from top-->

<script................

 

Check for errors here:-

http://validator.w3.org/

[brysonprice]

Your #wrapper div is closed before the content when I think it should be closed after everything else.

 

<div id="wrapper">
<!--</div> moved down-->

<div class="cartoon"............

................</object></div>

</div>
</div><!--moved down from top-->

<script................

 

Check for errors here:-

http://validator.w3.org/

 

The reason why I did that is because those were the instructions when applying the sticky footer. In addition to making the footer sticky, I also made the cartoon sticky so that he would always be standing on the line. Is there a way to make the cartoon always stand on the line and also keep the sticky footer?

[Wickham]

The reason why I did that is because those were the instructions when applying the sticky footer. In addition to making the footer sticky, I also made the cartoon sticky so that he would always be standing on the line. Is there a way to make the cartoon always stand on the line and also keep the sticky footer?

 

I didn't notice that. Since you have .cartoon and #footer both position: fixed; they should be "out of the flow" and therefore you can have the #wrapper </div> tag before or after them.

 

Position: fixed items need top or bottom (you have coded bottom) and left or right, which are missing. Try adding left: 0; to the styles of .cartoon and #footer. It made a difference to IE7 in my test.

 

And delete background-repeat:no-repeat in #footer style

 

.cartoon {
text-align: center;
margin: 0px;
padding: 0px;
height: 511px;
width:100%;
margin:0 auto;
position: fixed;
bottom: 200px;       left: 0;
}
#footer	{          
/*background-repeat:no-repeat*/
width:100%;
border-top-width: 3px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #282828;
border-right-color: #282828;
border-bottom-color: #282828;
border-left-color: #282828;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 199px;
background-image: url(img/homefootgrad.png);
background-position:center;
background-repeat: repeat-x;
width:100%;
height:200px;
margin:0 auto;
position: fixed;   left: 0;
bottom: 0px;
}

 

There are a lot of duplicated styles and irrelevant styles, but my IE7 looked like Firefox after adding left: 0; twice.

Edited March 9, 2011 by Wickham

[brysonprice]

Thanks Wickham, this helped the positioning problem : ) EXCEPT, now the MUSIC and CONTACT flash objects don't show in IE. Could this be related to the notice I get saying "To help protect your security, internet explorer has restricted this webpage from running scripts or Active X....". Do I have to type in a code so this message won't pop up?

 

I updated the link in my 1st post to show your changes.

[pb1uk]

IE is right pain, i hate the thing!

 

What i would advise is using a very helpful tool i've found called ie tester (see link below). Basically you can view your site in different versions of ie at the same time. Personally i ignore ie 5 and try and make it look passable in ie 6 and then try and get as close to normality as possible in 7,8 and 9

 

IE Tester

[brysonprice]

IE is right pain, i hate the thing!

 

What i would advise is using a very helpful tool i've found called ie tester (see link below). Basically you can view your site in different versions of ie at the same time. Personally i ignore ie 5 and try and make it look passable in ie 6 and then try and get as close to normality as possible in 7,8 and 9

 

IE Tester

 

thanks for sharing this : ) But how do I know how to fix the problems I see?

[pb1uk]

thanks for sharing this : ) But how do I know how to fix the problems I see?

 

There's a debug bar you can download from the same site that's helpful.

 

Otherwise there's a version of firebug (a firefox extension) that can be run in IE. It is a bit fiddly compared to the firefox version, but it does still mean you can inspect the code and root out problems

[brysonprice]

There's a debug bar you can download from the same site that's helpful.

 

Otherwise there's a version of firebug (a firefox extension) that can be run in IE. It is a bit fiddly compared to the firefox version, but it does still mean you can inspect the code and root out problems

 

whats the difference between the debug bar and validator ?

[pb1uk]

The debug bar allows you to view the code as displayed in the browser and allows you to change it in the browser so you can find out and fix problems

[brysonprice]

The debug bar allows you to view the code as displayed in the browser and allows you to change it in the browser so you can find out and fix problems

 

Ok, I'll check it out in more depth. Do you know of any good tutorials for the debug bar that have helped you ?

[danhodge]

Thanks Wickham, this helped the positioning problem : ) EXCEPT, now the MUSIC and CONTACT flash objects don't show in IE. Could this be related to the notice I get saying "To help protect your security, internet explorer has restricted this webpage from running scripts or Active X....". Do I have to type in a code so this message won't pop up?

 

You can just see the top of them in IE, so the sizing is changing in IE slightly, its not getting rid of the two buttons.

 

Do you have any code that only refers to the firefox and the other browsers?

 

 

I would try fiddling around with the sizing, maybe changing it by one or two pixels could make it right?

[pb1uk]

Ok, I'll check it out in more depth. Do you know of any good tutorials for the debug bar that have helped you ?

 

No, i just played about and explored it