AdrianMartin Posted July 14, 2009 Report Share Posted July 14, 2009 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 14, 2009 Report Share Posted July 14, 2009 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:- Quote Link to comment Share on other sites More sharing options...
AdrianMartin Posted July 15, 2009 Author Report Share Posted July 15, 2009 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? Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted July 15, 2009 Report Share Posted July 15, 2009 try setting the padding to 0 for the IE versions Quote Link to comment Share on other sites More sharing options...
AdrianMartin Posted July 17, 2009 Author Report Share Posted July 17, 2009 Can you say me how to do that. Or just send me the correct CSS Code? Thanks Quote Link to comment Share on other sites More sharing options...
virtual Posted July 17, 2009 Report Share Posted July 17, 2009 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 Quote Link to comment Share on other sites More sharing options...
AdrianMartin Posted July 21, 2009 Author Report Share Posted July 21, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.