Jump to content
Stef's Coding Community
AdrianMartin

NewBie Need Help with IE 6 7 8 and FF

Recommended Posts

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

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

 

IE7

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

 

IE8

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

 

FF

FFhttp://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

Share this post


Link to post
Share on other sites

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:-

     

  • Share this post


    Link to post
    Share on other sites

    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

    IE6_2.png

     

    IE7

    IE7_2.png

     

    IE8

    IE8_2.png

     

    FF

    FF_2.png

     

    The right layout is: IE7

     

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

    Share this post


    Link to post
    Share on other sites

    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

    Share this post


    Link to post
    Share on other sites

    Hello,

     

    Now i'm on the good way.

     

    2 Problems are Staing.

     

    See the Screenshot:

     

     

    IE6

    IE6_3.png

    * The space between Contact and the Border is to short

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

     

    IE7

    IE7_3.png

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

     

    IE8

    IE8_3.png

    * Layout Perfect

     

     

    FF

    FF_3.png

    * 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.

    Share this post


    Link to post
    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...