+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / IE6 and IE7 differences

IE6 and IE7 differences

10 posts, 0 answered
  1. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    16 Nov 2007
    Link to this post
    Hi all,

    I've setup my page within Sitefinity. The layout as it should be is okay within IE7 and Firefox. IE6 and Safari is not okay.

    I'm working completely with div's inside my template.

    This is the CSS that layouts my masterpage. Can anybody see why the div's aren't showing correctly inside IE6? I can't add screenshots on the forum, but you can browse to:

    http://test.multiflexx.nl  to see an example. (it's dutch)
    Maybe someone has IE6 and knows why this div (the footer) has such space?

    1 /************************************************************
    2 / CONTAINER
    3 /***********************************************************/
    4 #site-container  
    5 {  
    6     text-align:-moz-center;
    7     #text-align:center;  
    8     position: relative;  
    9 }  
    10  
    11 /************************************************************
    12 / HEADER
    13 /***********************************************************/
    14 #site-header  
    15 {  
    16     width: 746px;    
    17     height: 117px;   
    18 }
    19
    20 #site-header-top  
    21 {  
    22     width: 746px;    
    23     height: 50px;   
    24 }
    25
    26 #site-header-middle  
    27 {  
    28     width: 746px;    
    29     height: 35px;   
    30     text-align:justify;  
    31 }
    32
    33 #site-header-bottom  
    34 {  
    35     width: 746px;    
    36     height: 32px;   
    37 }  
    38  
    39 /************************************************************
    40 / WRAPPER
    41 /***********************************************************/
    42 #site-wrapper  
    43 {  
    44     width: 746px;  
    45     height: 397px;  
    46     background-position: left top;  
    47     background-image: url(Images/homepage.jpg); /* Background image */ 
    48     background-repeat: no-repeat;  
    49     text-align:left;  
    50     position: relative;  
    51 }  
    52  
    53 /************************************************************
    54 / CONTENT
    55 /***********************************************************/
    56 #site-content-header  
    57 {  
    58     width: 519px;  
    59     height: 13px;  
    60     background-position: left top;  
    61     background-image: url(Images/top.gif);  
    62     background-repeat: no-repeat;  
    63     position:absolute;  
    64     top: 80px;  
    65     text-align: center;  
    66 }
    67
    68 #site-content-text  
    69 {  
    70     width: 519px;  
    71     height: 263px;  
    72     background-color: #ffffff;  
    73     position: absolute;  
    74     top: 89px;  
    75     overflow: auto;  
    76 }
    77
    78 #site-content-text .frame  
    79 {  
    80     padding-left: 5px;  
    81     padding-right: 8px;  
    82 }
    83
    84 #site-content-menul2  
    85 {  
    86     position: absolute;  
    87     top: 140px;  
    88     left: 567px;  
    89     visibility:hidden;  
    90 }
    91
    92 #site-content-text p  
    93 {  
    94     vertical-align: top;  
    95 }
    96
    97 #site-content-footer  
    98 {  
    99     width: 519px;  
    100     height: 45px;  
    101     position: absolute;  
    102     top: 352px;  
    103     background-color: white;  
    104     background-position: left top;  
    105     background-image: url(Images/contentfooter.png);  
    106     background-repeat: no-repeat;  
    107     vertical-align: middle;  
    108     text-align: left;  
    109 }  
    110  
    111  
    112  
    113 /************************************************************
    114 / FOOTER
    115 /***********************************************************/
    116 #site-footer  
    117 {  
    118     width: 746px;  
    119     height: 34px;  
    120     line-height: 34px;  
    121     position: relative;  
    122 }
    123
    124 #site-footer .left  
    125 {  
    126     position: absolute;  
    127     left: 0;  
    128     width: 519px;  
    129     text-align: center;  
    130     background-position: left bottom;  
    131     background-image: url(Images/footer.png);  
    132     background-repeat: no-repeat;  
    133 }
    134
    135 #site-footer .right  
    136 {  
    137     float: right;  
    138     width: 227px;  
    139     cursor:pointer;  
    140


    Thanks,
    Daniel
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    16 Nov 2007
    Link to this post
    Hello Daniel,

    The div (the footer) has such space because there is not enough space for all four items to stay on one line. The first three items stay on one line and the fourth (Route) goes to the next line. The links are white therefore it looks like the list items have disappeared.

    You can correct this if you set "width: auto" to the links from MultiflexxBottom menu skin (RadControls > Menu > Skins > MultiflexxBottom > styles.css). 

    .RadMenu_MultiflexxBottom .link {
    color:white;
    cursor:pointer;
    font-weight:bold;
    text-decoration:none;
    width: auto;
    }


    The width that is set now is 120px.

    All the best,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    16 Nov 2007
    Link to this post
    Hello Katia,

    Thanks for the reply. Your tip helped and it is fixed now. Thanks!

    Do you maybe know, why the 3rd r.a.d.menu on this page:

    ONZE DIENSTEN --> BESTURINGSMODEL

    is displaying his items horizontally, while in IE7 it is displayed correct: vertically?

    Strange behaviour...

    Daniel
  4. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    16 Nov 2007
    Link to this post
    and to make it even more fun: the items are also displayed wrong in Firefox?
    They are displayed vertically, which is okay, but the space between them is gone.

    Strange, because it is a r.a.d.menu and I thought they were browser compliant?

    Daniel
  5. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    16 Nov 2007
    Link to this post
    Hi Daniel,

    Open the css file for menu skin MultiflexxL2 (RadControls > Menu > Skins > MultiflexxL2 > styles.css). Then set the display property of the links to block.

    .RadMenu_MultiflexxL2 .link {
    background:transparent url( ) no-repeat scroll 0%;
    color:white;
    cursor:pointer;
    display:block;
    font-weight:bold;
    height:36px;
    margin-top:10px;
    padding-left:5px;
    text-decoration:none;
    vertical-align:middle;
    width:147px;
    }

    That should correct the problem in Firefox. After that add the following css in the same file to correct the other problem when list items are shown horizontally.

    .RadMenu_MultiflexxL2 .item {
        clear: both;
    }

    Greetings,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    16 Nov 2007
    Link to this post
    Hi Katia,

    The firefox solution worked well. Thanks for that...

    Only in IE6 the menu is still appearing horizontally. I did add the code you suggested, but no luck with that...

    Greetings,
    Daniel
  7. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    19 Nov 2007
    Link to this post
    Hi Daniel,

    As far as I can see "clear: both" property for  .RadMenu_MultiflexxL2 .item is not applied. So add !important to that rule like that (RadControls > Menu > Skins > MultiflexxL2 > styles.css):

    .RadMenu_MultiflexxL2 .item {
        clear:both !important;
    }

    Have you installed Firebug for Firefox and IE Developer Toolbar for IE? These are very helpful tools for front-end development and will help you solve css problems quite easily.

    All the best,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    20 Nov 2007
    Link to this post
    Hi Katia,

    Putting in !Important did the trick. So it works okay now.

    One last problem I have with my design is that in Firefox the following function doesn't work:

    1 <script language="javascript" type="text/javascript">  
    2       
    3     function JustifyMenu(menu)    
    4     {    
    5         var menu = <%=menubarbottom.ClientID%>;      
    6         var width = menu.DomElement.offsetWidth;     
    7         var agt = navigator.userAgent.toLowerCase();  
    8         var singleItemLength = null;  
    9           
    10         // Workaround for 'bug' inside Sitefinity view area  
    11         if(width == 0)   
    12             width = 519;   
    13               
    14         singleItemLength = (width/menu.Items.length);  
    15           
    16         for (var i = 0; i < menu.Items.length; i ++)    
    17         {    
    18             var li = menu.Items[i].DomElement;   
    19             var constat = 28;    
    20             var itemWidth = 0;   
    21                
    22             if(i == 0 || i == 1)   
    23                 itemWidth = singleItemLength + constat;    
    24             else   
    25                 itemWidth = singleItemLength - constat;   
    26                    
    27             li.style.width = itemWidth;   
    28         }      
    29     }   
    30        
    31 </script> 

    If you open the site in Firefox you see the botto menu appear wrong. The script worked for IE 5+. (not Firefox and Safari)

    Do you have an idea what could be the problem? Or someone out here on the forum?

    Thanks,
    Daniel
  9. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    20 Nov 2007
    Link to this post
    Hello Daniel,

    I think you should specify  the measurement for each list item width. So add + 'px' on the 27 row of the code you have sent:

    li.style.width = itemWidth + 'px';  

    Kind regards,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    20 Nov 2007
    Link to this post
    Hi Katia,

    Yes, that solved the problem. Thank you!

    Daniel
Register for webinar
10 posts, 0 answered