Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:48

CSS Issue with IE - works fine in FireFox


Poster: MrCknight
Dated: Friday November 17 2006 - 3:23:44 GMT

I have created two versions of a page with a menu structure which works fine in Firefox but has an issue in IE. There should be a 10px margin at the top of the browser, but this is removed when the menus are drawn and a horizontal browser scrollbar is added at the bottom.

We make extensive use of DIVs and two example pages use the DIVs slightly differently, one uses IDs and one uses CLASS.

It appears to be an issue with relative positioning as the problems started when we correctly separated the menu files as outlined in a number of posts in order to fix sub menu positioning (which it did).

The first page (ID):
http://www.avenueroadhockey.on.ca/newsite/test4milonic.htm

The second page (CLASS):-
http://www.avenueroadhockey.on.ca/newsite/test4milonic2.htm

Interestingly, as the menu does not always appear on the test pages in IE, I have included a third link to a live page with more extensive CSS which does display the menus in IE, but still has the horizontal scroll bar and top border issue.

http://www.avenueroadhockey.on.ca/newsite/index.htm

Any help would be appreciated!

Regards
Colin


Poster: Ruth
Dated: Friday November 17 2006 - 7:14:22 GMT

Hi,

The problem is to do the nested divs and the different absolute, relative positions. The actual problem div is the banner div set to relative and the menu div nested in it set to absolute, and that is what I changed though the solution I've found may not be acceptable, for some they have an rabid animosity to tables, even if it's only a minor use of them. :)


Code:
<DIV id=wrapper>
<!--start table to replace the banner div which is the problem div-->
<TABLE CELLPADDING='0' CELLSPACING='0' WIDTH='780' BORDER='0'>
  <TR>
    <TD ROWSPAN=2><a href="http://www.avenueroadhockey.on.ca/newsite/index.htm">
<img src="arhaheader_left.gif" width="235" height="76" border="0"></a></TD>
    <TD><img src="arhaheader_rght.gif" width="545" height="46" border="0"></TD>
  </TR>
  <TR>
    <TD><table cellpadding='0' cellspacing='0' width='100%' border='0'>
<tr>
       <td><SCRIPT src="main_data.js" type=text/javascript></SCRIPT></td>
       <td></td>
      <td><SCRIPT src="map_data.js" type=text/javascript></SCRIPT></td>
</tr>
</table></TD>
  </TR>
</TABLE>
<!--end table for banner-->
<!--MAIN BODY HERE....-->
<!--start divs for left content-->
<DIV id=content-left>
<DIV id=content-inside>

AND SO ON - with the rest of your layout.


The only thing to make this work I had to set up the site map menu as a relative positioned menu, also. The code for your data files would now be

mmenu_data.js which I called main_data.js

Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";

aI("text=Home;url=index.htm;status=Back To Home Page;");
aI("text=Info;url=info.htm;status=Back To Home Page;");
aI("showmenu=Games;text=Games;");
aI("showmenu=Select;text=Select;");
aI("status=Contact Information;text=Contact;url=contact.htm;");
aI("status=Sponsors and those we must thank;text=Sponsors;url=sponsors.htm;");
//aI("status=Go to the Site Map;text=Site Map;url=../pg/sitemap.html;image=../menu/menu_ptr.gif;pageimage=../menu/menu_ptr_over.gif;
overimage=../menu/menu_ptr_over.gif;");
}

drawMenus();


and the map_data.js

Code:
with(milonic=new menuname("Map")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
aI("status=Go to the Site Map;text=Site Map;url=sitemap.html;image=menu_ptr.gif;pageimage=menu_ptr_over.gif;overimage=menu_ptr_over.gif;");
}

drawMenus();


This was done using your first page link. I made the images for the table and I'm glad to post them for you if you find this workable.

Ruth


Poster: MrCknight
Dated: Friday November 17 2006 - 14:37:52 GMT

Hi Ruth

Thanks for the quick reply.

I created a third page with your modifications and the horizontal scroll bar issue went away, but I am still losing my top margin (you will see the difference when viewed in IE versus Firefox).

http://www.avenueroadhockey.on.ca/newsite/test4milonic3.htm

I created a fourth page which uses relative DIVs to create the different elements you created using a table.

http://www.avenueroadhockey.on.ca/newsite/test4milonic4.htm

The offending menu DIV was replaced with DIVs as follows:-
Code:
#menu_left {
   float: left;
   height: 80px;
   width: 235px;
}
#menu_topright {
   float: right;
   height: 46px;
   width: 545px;
}
#menu_bottommiddle {
   float: left;
   height: 34px;
   width: 455px;
}
#menu_bottomright {
   float: right;
   height: 34px;
   width: 90px;
}


The page was changed to:-
Code:
<div id="wrapper">
  <div id="banner">
    <div id="menu_left">
    <img name="arhaheader_left" src="images/arhaheader_left.gif" width="235" height="76" border="0" usemap="#m_arhaheader" alt="">
      <map name="m_arhaheader">
        <area shape="rect" coords="47,0,230,74" href="index.htm" alt="" >
      </map>
    </div>
    <div id="menu_topright"> <img src="images/arhaheader_right.gif" width="545" height="46" border="0">
    </div>
    <div id="menu_bottommiddle">
      <script type="text/javascript" src="menu/main_data.js"></script>
    </div>
    <div id="menu_bottomright">
      <script type="text/javascript" src="menu/map_data.js"></script>
    </div>
  </div>
  <!---
MAIN BODY HERE....
-->

It gives exactly the same results as using your version with tables - but the top margin problem still remains.

When displaying the pages locally, IE initially draws the layout correctly. I have IE set to block “Active content”. When I tell the browser to “allow blocked content”, it draws the menus and during this process my margin is lost.

Further thoughts welcome!

Regards
Colin


Poster: Ruth
Dated: Friday November 17 2006 - 14:47:33 GMT

The top margin problem is how the different browsers are treating the margin. IE is reading the body margin:0px and taking that as the start point and then the wrapper 10px margin, it seems IE is not accepting. I'm not a css person so though I'd think that is supposed to put 10px between the top of the page and the wrapper div it doesn't seem to be happening in IE.

Why not reverse it, that seemed to work and it doesn't change the auto settings, just make the body margin as 10, 0 0 0, and the wrapper as 0 auto? That 10 in the body would make it 10 in all browsers so it should look the same across them. It's only when no body margin is specified that there are problems because the default margins are different in the various browsers.

Ruth


Poster: MrCknight
Dated: Friday November 17 2006 - 15:04:51 GMT

While I try the suggestion, here is a link without any Milonic scripts, top margin is correct...

http://www.avenueroadhockey.on.ca/newsite/test4milonic5.htm

The problem occurs with something that is happening with the scripts.

Regards
Colin


Poster: MrCknight
Dated: Friday November 17 2006 - 15:17:56 GMT

The suggestion works so it must be compatible with what is happening inside the scripts.

http://www.avenueroadhockey.on.ca/newsite/test4milonic6.htm

It would be interesting if someone with a command of CSS could explain why.

But for now, problem solved! Thanks for your help it is very much appreciated.

Regards
Colin


Poster: Ruth
Dated: Friday November 17 2006 - 15:31:51 GMT

Hi Colin,

I understand that it's working without the menu on it. The problem is that Milonic menus include some of their own default css styling and are generated by creating tables, divs etc using the tags for such. This means that in some cases, in particular the generic things like margin, there can be a conflict with regard how some browsers interpret the margin css coding in the css stylesheet and thereby have different 'looks' in different browsers.

This seemed to fix it and it looks the same in IE and FF I have available.

Code:
BODY {
   BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; FONT-SIZE: 100.01%; BACKGROUND: url(../images/bg_pg.gif) #357; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 10px 0px; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: center; min-width: 780px
}
#wrapper {
   BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; MARGIN: 0px auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 780px; BORDER-BOTTOM: #cccccc 1px solid; POSITION: relative; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left; w: 780px
}


Ruth


Poster: Ruth
Dated: Friday November 17 2006 - 15:42:41 GMT

Oops, :oops: I didn't see your post before I posted. But, as you can see it does have an explanation as to why and it is something to do with how the browsers are interpreting that generic coding in the css of the style sheet and the css of the menu programming. I would suggest that you set up the body margin to also include a bottom 10px margin or you lose that in FF and probably any other browser but IE, since the others are using the div margins which gave them the top and bottom 10px, with that set to 0 they have lost the bottom 10px margin.

Ruth


Poster: MrCknight
Dated: Friday November 17 2006 - 16:07:33 GMT

No problem

I guess it is the age old frustration of the "interpretation" of an exact language!

However, the change works beautifully for me, so once again thank you - you have saved me hours of frustration! :D

Regards
Colin


Poster: vikenk
Dated: Friday November 17 2006 - 16:21:01 GMT

Hello,

I'm jumping in late here. Ruth seems to have solved your problem. A quick glance at your code showme that you're only using a partial DocType at the top of your page. Using a partial DocType (without the URL) means that IE will *still* remain in "quirks" mode and not follow the standard box model interpretation, which *could* explain why IE is ignoring your margin.

See the chart at the bottom of this page:
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

So, while Ruth's fix certainly works, it may satisfy your curiousity to go back to your original page and plug in the full DocType (with full URL) and see if that changes anything.

----
Viken K.
http://www.vikenk.com
http://www.sayatnova.com


Poster: MrCknight
Dated: Friday November 17 2006 - 17:11:22 GMT

Thanks for the tip - an interesting link.

On my business site we do use full doc type, so I plugged it into the orginal page and it messed things up completely...

I plugged it into the final test page created and everything still works correctly, so the final solution looks robust.

Thanks again for the link. I will read in detail when I get some time. For now, I must finish this site.

Regards
Colin

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support