Question

Ok, very simple question this time (though the answer seems elusive for I can’t find it referenced anywhere online).

It has to do with a classic: formatting trouble in IE. I guess it might be part of IE’s failure to work well with the Box Model although I can’t find the reason why IE would be modifying the thickness of DIV borders. Moreover, as I’ll explain a little further down, there’s another variable: the DIV’s content, which conditions whether or not the borders are properly displayed in IE (they’re properly displayed regardless everywhere else).

First thing’s first, it’s a simple DIV and its CSS is as follows:

#menu {
    width:1000px;
    border-top:#0072FF solid 10px;
    border-bottom:#FF0078 solid 20px
}

In IE, however, the top and bottom borders appear about twice as thick.

This is how it looks in one and the other browser (it’s just a section of the DIV and not the entire 1000px-wide):

What does it have inside? It has an embedded Flash menu.

I’ve stripped everything else from the code and just tested the DIV that has the issue with its Flash content in place. Result: the issue remains.

However, if I take out the embedded Flash, the issue is not reproduced. If I insert text content, for example, the issue is, again, not reproduced. So obviously this has to do with the Flash content and/or the way it’s embedded. (Again, this only happens in IE… great surprise!)

I’ve since tried embedding the Flash in a couple of different ways (though I’ve never had trouble before with this). This is the current way I’m working with, which I got off a website that recommended it as “the best way to avoid issues with IE”:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1000" height="30" id="menu" align="middle">
  <param name="movie" value="./swf/menu.swf"/>
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="./swf/menu.swf" width="1000" height="30">
    <param name="movie" value="./swf/menu.swf"/>
    <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

I’ve even tried to see if it’s an AC_RunActiveContent.js issue but it’s not.

I’ve tried a couple of hacks and/or workarounds but to no avail. (Do these still work for IE? When I stumble upon similar issues, I find that * html, for example, is no longer working for me; the trouble with formatting remains.) I would really rather avoid workarounds and, in this case, at least, it doesn’t seem a CSS workaround will do any good (unless, of course, I need to format my <object> tag–though it would be a first).

Anyway, any insight will be VERY MUCH appreciated! Thanks!

Answer 1

I see that your object has id="menu" as well. Is that what you meant when you said div? If not, I think IE is applying the #menu style to the <object> and the <div> whereas other browsers only treat the <div> as #menu.