IE 7 & 8 issues after update to 1.6

[djhspawn]

After putting off the updating chameleon I finally sat down to do it. I started by taking the 1.6 files and making the changes so my site looked the same as before. For some reason, IE8 and 7 are not rendering the site correctly. Please first view with any other browser then IE and the view with IE and see what I mean. http://www.planetpinned.com

Anyone have any insight on this? I am stumped.

[sbcjr]

Do you have a backup of your previous file?

[djhspawn]

You have a modified version of the template.  Try backing up your modified version and then install the default version of Chameleon to see if you have the same problem.  If it looks OK, then make your modifications to the new template.

Yeah, i tried to do it the easy way. I think I just need to take the updated files and start modding it one by one. Thanks for the assistance again.

[djhspawn]

OK, I took this one step at a time and am already seeing problems.

I uploaded the updated files (main_1.htm, main.css, inner_index.htm) and was back to a normal when viewing with IE.

I then started to update the main.css file so my top banner would show. I started with the following:

Code: [Select]

#main-header {
 color: #fff;
 width: 920px;
 height: 60px;
 padding: 0px;
 margin: 0px 8px;
 background-color: #000;
}

#top-border {
 width: 656px;
 height: 3px;
 padding: 0px;
 background: #000 url(../images/top-border.gif) repeat-x;
 float: left;
}

#logo {
 width: 228px;
 height: 14px;
 float: left;
}

#greeting {
 float: left;
 padding-left: 320px;
 margin-top: -12px;
}

/*  Nav Bar */
#navbar {
  background-color: #000;
  margin-top: 14px;
  float: left;
  width: 100%;
  padding: 0px;
and edited so it looks like this:

Code: [Select]

#main-header {
 color: #fff;
 width: 920px;
 height: 120px;
 padding: 0px;
 margin: 0px 8px;
 background: #000 url(../images/pinned-header.jpg) no-repeat;
}

#top-border {
 width: 656px;
 height: 3px;
 padding: 0px;
 background: #000 url(../images/top-border.gif) repeat-x;
 float: left;
}

#logo {
 width: 228px;
 height: 14px;
 float: left;
}

#greeting {
 float: left;
 padding-left: 320px;
 margin-top: -12px;
}

/*  Nav Bar */
#navbar {
  background: transparent;
  margin-top: 65px;
  float: left;
  width: 100%;
  padding: 0px;
Now in firefox the NAVBAR is looking normal. But IE is screwing it up just like it was doing with 1.4. Am I missing something?

http://test.planetpinned.com

[djhspawn]

Is there anything else that I could add that may assist with understanding the issue?

[sbcjr]

Do you have a separate css file for IE7?  I haven't used Chameleon.

[djhspawn]

Do you have a separate css file for IE7?  I haven't used Chameleon.

Yes, I have both ie6 and ie7.css, I have loaded both files from the most recent 1.6 (even though I dont think there was a difference between 1.4 & 1.6). Any other ideas?

[sbcjr]

The site looks good to me in IE8- could you adjust it in your IE7 css file until it looks the same?  That way it wouldn't affect what you already have working in the other browsers.

[djhspawn]

The site looks good to me in IE8- could you adjust it in your IE7 css file until it looks the same?  That way it wouldn't affect what you already have working in the other browsers.

I didn't think of that.... Thanks for the suggestion. I will give it a try. Unless Shawn would think of a reason I shouldn't.

[djhspawn]

well, I modified the ie7.css file

It had:

Code: [Select]

#navbar {
  background-color: #000;
  margin-top: 14px;
  float: left;
  width: 100%;
  padding: 0px;
}
and I replaced it with

Code: [Select]

#navbar {
  background: transparent;
  margin-top: 65px;
  float: left;
  width: 100%;
  padding: 0px;
}
from the main.css file. I refreshed using IE7 and no change. Am I not modifying the correct code?

[sbcjr]

Looks like it worked to me- just needs another 8-9 pixels...

[djhspawn]

Looks like it worked to me- just needs another 8-9 pixels...

huh. I will have to check on another PC. Thanks for the help sbcjr