NewBie Need Help with IE 6 7 8 and FF

[AdrianMartin]

Hello,

 

I need help on a Website construction.

 

I have setup a new website and the problem is that i'm not able to adjust the Menu Box for each Browser.

 

On IE 8 and FF no problem. But IE 7 and 6 isn't OK.

IE6

http://adrian.naegeli.org/apg_img/IE6.png[/img]

 

IE7

http://adrian.naegeli.org/apg_img/IE7.png[/img]

 

IE8

http://adrian.naegeli.org/apg_img/IE8.png[/img]

 

FF

http://adrian.naegeli.org/apg_img/FF.png[/img]

 

My CSS Code:

/* blue */
/*a:link, a:visited {
   color: #135cae;
   /* color: #FFFFFF;*/
   /*text-decoration:none;

}*/

/*a:hover {
   color: #0b3768;
}*/

#pillmenu a:hover {
 color: #135cae;
}

#pillmenu a#active_menu-nav {
 background: url(../images/blue/mw_menu_active_bg.png) repeat-x;
 color: #fff;
}

#pillmenu a#active_menu-nav:hover {
 color: #fff;
}

h3, .componentheading, table.moduletable th {
 color: #135cae;
}

div.module_menu {
   background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
}

div.module_menu div {
   background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu div div {
   background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu div div div {
   background:  url(../images/blue/mw_box_tl.png) 0 0 no-repeat;
}


div.module_menu div div div ul {
   /*color: #FFFFFF;*/

   padding-top: 30px;
   padding-left: 10px;
   padding-bottom: -10px;
}
html>body div.module_menu div div ul {
   padding-bottom: 8px;
   padding-top: 30px;
   padding-left: 10px;
}

div.module_menu div div div ul li{
   list-style-position: outside;
   list-style-type: none;
   background-image: url(../images/spacer.png);
 background-repeat: no-repeat;
 background-position: left;
 /*display: inline !important;*/
 margin: 0;
 display:block;
 /*padding-left: 5px;
 padding-right: 5px;*/
}

div.module_menu div div div ul li:first-child {
  /*background-image: none;*/
}


div.module_menu div div div ul li span.separator {

}

div.module_menu div div div ul li span.separator {
   /*border-bottom:solid 0 #333;*/
display:block;
height:12px;
/*margin:0;*/
}







div.module_menu div div div ul li a:link, a:visited {
   color: #0000ff; 
       font-size:20px;
       text-decoration:none;
       line-height:22px;
       padding-bottom:20px;
       margin-top:5px;
       /*border-bottom:1px dotted #fff;*/
       /*width: 180px;*/
       /*display: block;*/
       /*color: #ffffff;*/

}

 

And the HTML Code: (I can't change the html code (CMS))

 
 
 
 

  News  
     
   Bienvenue  
   Restaurant  
   Terrasse  
   H?bergement  
   Mariage  
   Plans  
     
   Contact  
 
 
 
 

 

 

If someone could help me it would be so great.

I don't no how to resolve my problem.

 

Thanks by advance.

 

Adrian

 

PS: Sorry for my english

[Wickham]

You have incorrect span tags in two places. I tested in IE7 and although I don't have your images to surround the text, it changed the lower links from being offset to the right of News to underneath News:-

 

 

and again lower down:-

 

[AdrianMartin]

I understand what you meen.

 

I have change a config for the menu and now i have following HTML Code for the menu:

 
 
 
 

News
 
 Bienvenue
 Restaurant
 Terrasse
 H?bergement
 Mariage
 Plans
 
 Contact
 
 
 
 

 

But now i have the following Layout:

IE6

 

IE7

 

IE8

 

FF

 

The right layout is: IE7

 

How can I change the Layout for IE6 8 and FF?

[jlhaslip]

try setting the padding to 0 for the IE versions

[AdrianMartin]

Can you say me how to do that. Or just send me the correct CSS Code?

 

Thanks

[virtual]

Firefox is showing you the correct layout, so you will need to add padding to make it look like the IE7 layout. Then you will have to set the padding to 0 for IE6 and probably IE7 as they will probably double the padding. You can use conditional comments to do this

 

 

See this site for explanations

http://www.quirksmode.org/css/condcom.html

[AdrianMartin]

Hello,

 

Now i'm on the good way.

 

2 Problems are Staing.

 

See the Screenshot:

 

 

IE6

* The space between Contact and the Border is to short

* The space between the text and the Left Border is to large

 

IE7

* The space between the text and the Left Border is to large

 

IE8

* Layout Perfect

 

 

FF

* Layout Perfect

 

The HTML code doesnt change.

 

The css code is now:

#pillmenu a:hover {
   color: #135cae;
}

#pillmenu a#active_menu-nav {
 background: url(../images/blue/mw_menu_active_bg.png) repeat-x;
 color: #fff;
}

#pillmenu a#active_menu-nav:hover {
 color: #fff;
}

h3, .componentheading, table.moduletable th {
 color: #135cae;
}

div.module_menu {
   background: url(../images/blue/mw_box_br.png) 100% 100% no-repeat;
}

div.module_menu div {
   background: url(../images/blue/mw_box_bl.png) 0 100% no-repeat;
}

div.module_menu div div {
   background: url(../images/blue/mw_box_tr.png) 100% 0 no-repeat;
}

div.module_menu div div div {
   background:  url(../images/blue/mw_box_tl.png) 0 0 no-repeat;
}

div.module_menu div div div ul {
   padding-top: 30px;
   padding-left: 10px;
   padding-bottom: -10px;

}

html>body div.module_menu div div ul {
   padding-bottom: 8px;
   padding-top: 30px;
   padding-left: 10px;
}

div.module_menu div div div ul li{
   list-style-position: outside;
   list-style-type: none;
   background-repeat: no-repeat;
 background-position: left;
 margin: 0;
 display: table;
 line-height: 20px;
}

div.module_menu div div div ul li span {
   display:block;
   height:20px;


}

div.module_menu div div div ul li a:link, a:visited {
   color: #0000ff; 
   font-size:20px;
   text-decoration:none;
   line-height:22px;
   padding-bottom:20px;
   margin-top:5px;
}

 

I just would like to corect these 3 errors. Thanks a lot for all the help.