Jump to content

** Homepage looks REALLy OFF only in IE **


brysonprice

Recommended Posts

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/

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...