IE6 and IE7 freak out on Menu

[yorgi63]

Hi all,

I am having a site issue. Here is the site http://www.bushwhackmusic.com/index.php It's not live so you will need to use the index.php.

It looks great in Safari, Opera and Firefox. But IE6 and 7 hate it. It looks horrible. I have not run into this before and have used CMS a few times. The menu goes flush left and the art goes out of position. I racked my brain and have not come up with anything.

Has anyone else had this issue? Or seen this issue? Or better yet fixed it. I looked through the board and found nothing but may have missed a response.

Thank You all for any help in advance

Yorgi

[KO]

Yes. Menu text is fairly large on ie6.

Try locating from your stylesheet style

#primary-nav a {
  display: block;
  margin: 3px;
  padding: 3px 10px;
  font-weight: bold;
  text-decoration: none;
  color: #FFCC00;
font-size:12px;
}

and add red bit or some other size to it. Maybe you start getting some sensible font sizes for menu.

br,

K

[yorgi63]

Thanks! Down side is it didn't work.

In IE6 it still stacks to the left. Also the graphics are out of whack still. The flash banner is missing.

George


George

[KO]

For me the menu font size looks much better now! But yes - content in your page is bit wide. Try finding #pagewrapper set width:830px. That's what you seems to want to have as width for your content. There is some tricks in default CMSms templates to have min-max page with but I believe in your design you are not looking for that.

Flash banner shows fine in IE and Firefox.

[Nullig]

You also have a sidebar div, which you don't appear to use. You could comment it out in the template.

Nullig

[yorgi63]

For me the menu font size looks much better now! But yes - content in your page is bit wide. Try finding #pagewrapper set width:830px. That's what you seems to want to have as width for your content. There is some tricks in default CMSms templates to have min-max page with but I believe in your design you are not looking for that.

Flash banner shows fine in IE and Firefox.

Thanks again. I do have it set to 830. maybe the min-width as well? I try it again.

[yorgi63]

You also have a sidebar div, which you don't appear to use. You could comment it out in the template.

Nullig

In oher words like this


     
     

Would this be the issue?

Thank You

[KO]

Ok. This is what i would do:

look for:

/* center wrapper, min max width */
div#pagewrapper {
  border: 0px solid black;
  margin: 0px auto;    /* this centers wrapper */
  top-margin: -1px auto;
  max-width: 830px; /* IE wont understand these, so we will use javascript magick */
  min-width: 830px;
  background: #cccccc url(images/backmain.jpg);;
  color:#cccccc;
width:830px;
}

In you stylesheet and add red again. You might want to try to remove blue bits or comment them out.

Look your template and remove:

Code: Select all

<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}#container {height: 1%;}
</style>

Sidebar might be causing problems and if it is not doing that now it will when somebody updates the pages and puts some text/images overe there and it's not tested properly.

br,

K

[yorgi63]

What can I say but thank you again. I am not sure if this fixed because I need to get to work and check the site there. If it looks good to you let me know.

Otherwise back to the drawing board.

Yorgi

Ok. This is what i would do:

look for:

/* center wrapper, min max width */
div#pagewrapper {
  border: 0px solid black;
  margin: 0px auto;    /* this centers wrapper */
  top-margin: -1px auto;
  max-width: 830px; /* IE wont understand these, so we will use javascript magick */
  min-width: 830px;
  background: #cccccc url(images/backmain.jpg);;
  color:#cccccc;
width:830px;
}

In you stylesheet and add red again. You might want to try to remove blue bits or comment them out.

Look your template and remove:

Code: Select all

<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}#container {height: 1%;}
</style>

Sidebar might be causing problems and if it is not doing that now it will when somebody updates the pages and puts some text/images overe there and it's not tested properly.

br,

K

[KO]

You are wellcome! Anything for Progressive Metal

Width of the page is now same in both but there seems to be some differencies with margins, lineheights etc. Default templates uses em unit for setting them so page size scales nicely in firefox and other better browsers. In IE6 (maybe 7) only font sizes scale when using em units it seems.  As you probably know em size is relative to their container font sizes. So if you set in body text-size 0.9em everywhere text having em value will be affected by that. So now something has changed in you templates compared to original and firefox and IE seems to get different values for almost everything that has em values.

If i were you i would check those differencies and change lineheights, margins, paddings etc to pixel (px) values. em is nice in font-sizes but it might be very time consuming where things went wrong in this case. Your main navi was very good example from that. Like in paragraph you have

p {
  font-size: 1em;
  margin: 0 0 1.5em 0;  /* some air around p elements */
  line-height:1.4em;
  padding: 0;
}
if you change line-height to 16px then Firefox does not change but IE does. Now it's up to you how close you want things to get. Or maybe you have idea what broke this em unit path.

br,
Keijo

[yorgi63]

So what is your suggestion? Should I do this? Or is it more trouble. Would this set the font to a consistent size for the site?

George

You are wellcome! Anything for Progressive Metal

Width of the page is now same in both but there seems to be some differencies with margins, lineheights etc. Default templates uses em unit for setting them so page size scales nicely in firefox and other better browsers. In IE6 (maybe 7) only font sizes scale when using em units it seems.  As you probably know em size is relative to their container font sizes. So if you set in body text-size 0.9em everywhere text having em value will be affected by that. So now something has changed in you templates compared to original and firefox and IE seems to get different values for almost everything that has em values.

If i were you i would check those differencies and change lineheights, margins, paddings etc to pixel (px) values. em is nice in font-sizes but it might be very time consuming where things went wrong in this case. Your main navi was very good example from that. Like in paragraph you have

p {
  font-size: 1em;
  margin: 0 0 1.5em 0;  /* some air around p elements */
  line-height:1.4em;
  padding: 0;
}
if you change line-height to 16px then Firefox does not change but IE does. Now it's up to you how close you want things to get. Or maybe you have idea what broke this em unit path.

br,
Keijo

[KO]

I would check the differencies between Firefox and IE and make changes accordingly. Whre needed change Margins, paddings and lineheights to pixels.

K