Incompatibility IE7 and firefox

Forum Moderators: not2easy

Message Too Old, No Replies

Incompatibility IE7 and firefox

CSS issues IE7 behaves strange

Farahbaig

6:05 pm on Oct 29, 2007 (gmt 0)

Hi All my Css works fine in firefox 2 and IE6 but is behaving strange in IE7 can anyone help me here how to make it compatible?

Marshall

6:24 pm on Oct 29, 2007 (gmt 0)

Can you post the relevant CSS, HTML and doctype.

Marshall

Farahbaig

7:07 pm on Oct 29, 2007 (gmt 0)

the CSS
.main_links {
position:absolute;
top:8px;
left:272px;
height:23px;
width:705px;
z-index:890;
text-align:left;
/*background-color:#ff0000; */
}
.mnu_wrap {
position:absolute;
top:0px;
left:230px;
width:710px;
height:23px;
/*border:1px solid #505050; */
}

.menu1_off {
width:131px;
height:23px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
.menu1_on {
width:200px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;

}

.menu2_off {
width:102px;
height:23px;
position:absolute;
top:0px;
left:131px;
cursor:pointer;

}
.menu2_on {
width:200px;
position:absolute;
top:0px;
left:131px;
cursor:pointer;
}
.menu3_off {
width:102px;
height:23px;
position:absolute;
top:0px;
left:237px;
cursor:pointer;
}
.menu3_on {
width:200px;
position:absolute;
top:0px;
left:237px;
cursor:pointer;
}
.menu4_off {
width:55px;
height:23px;
position:absolute;
top:0px;
left:343px;
cursor:pointer;
}
.menu4_on {
width:200px;
position:absolute;
top:0px;
left:343px;
cursor:pointer;
}
.menu5_off {
width:109px;
height:23px;
position:absolute;
top:0px;
left:402px;
cursor:pointer;
}
.menu5_on {
width:200px;
position:absolute;
top:0px;
left:402px;
cursor:pointer;
}
.menu6_off {
width:54px;
height:23px;
position:absolute;
top:0px;
left:515px;
cursor:pointer;
}
.menu6_on {
width:200px;
position:absolute;
top:0px;
left:515px;
cursor:pointer;
}
.menu7_off {
width:111px;
height:23px;
position:absolute;
top:0px;
left:573px;
cursor:pointer;
}
.menu7_on {
width:115px;
height:25px;
position:absolute;
top:0px;
left:573px;
cursor:pointer;
}
.item_on {
width:200px;
height:25px;
background-color: #909090;
vertical-align:middle;
line-height:22px;
}
.item_on a {
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
.item_on a:hover {
color:#ffffff;
font-weight:bold;
text-decoration:none;
}
.item_off {
width:200px;
height:25px;
vertical-align:middle;
display:none;
line-height:22px;
background-color: #ffffff;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.item_off a {
font-weight:bold;
}
.item_wrap_off {
width:200px;
text-align:left;
}
.item_wrap_on {
width:200px;
text-align:left;
padding-bottom:10px;
}
.capstone {
height: 14px;
display: none;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
background-color: #ffffff;
width:200px;
}
.capbottom {
vertical-align: top;
width: 200px;
display: none;
height: 14px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}

THE JAVASCRIPT

// Browser Detect Lite v2.1
function BrowserDetectLite() {
var ua = navigator.userAgent.toLowerCase();
this.ua = ua;

// browser name
this.isGecko = (ua.indexOf('gecko')!= -1);
this.isMozilla = (this.isGecko && ua.indexOf("gecko/") + 14 == ua.length);
this.isNS = ( (this.isGecko)? (ua.indexOf('netscape')!= -1) : ( (ua.indexOf('mozilla')!= -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );
this.isIE = ( (ua.indexOf("msie")!= -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) );
this.isOpera = (ua.indexOf("opera")!= -1);
this.isKonqueror = (ua.indexOf("konqueror")!= -1);
this.isIcab = (ua.indexOf("icab")!= -1);
this.isAol = (ua.indexOf("aol")!= -1);
this.isWebtv = (ua.indexOf("webtv")!= -1);
this.isOmniweb = (ua.indexOf("omniweb")!= -1);
this.isDreamcast = (ua.indexOf("dreamcast")!= -1);

// spoofing and compatible browsers
this.isIECompatible = ( (ua.indexOf("msie")!= -1) &&!this.isIE);
this.isNSCompatible = ( (ua.indexOf("mozilla")!= -1) &&!this.isNS &&!this.isMozilla);

// browser version
this.versionMinor = parseFloat(navigator.appVersion);

// correct version number for NS6+
if (this.isNS && this.isGecko) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
}

// correct version number for IE4+
else if (this.isIE && this.versionMinor >= 4) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
}

// correct version number for Opera
else if (this.isOpera) {
if (ua.indexOf('opera/')!= -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
}
}

// correct version number for Konqueror
else if (this.isKonqueror) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
}

// correct version number for iCab
else if (this.isIcab) {
if (ua.indexOf('icab/')!= -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) );
}
}

// correct version number for WebTV
else if (this.isWebtv) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('webtv/') + 6 ) );
}

this.versionMajor = parseInt(this.versionMinor);
this.geckoVersion = ( (this.isGecko)? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );

// platform
this.isWin = (ua.indexOf('win')!= -1);
this.isWin32 = (this.isWin && ( ua.indexOf('95')!= -1 �� ua.indexOf('98')!= -1 �� ua.indexOf('nt')!= -1 �� ua.indexOf('win32')!= -1 �� ua.indexOf('32bit')!= -1) );
this.isMac = (ua.indexOf('mac')!= -1);
this.isUnix = (ua.indexOf('unix')!= -1 �� ua.indexOf('linux')!= -1 �� ua.indexOf('sunos')!= -1 �� ua.indexOf('bsd')!= -1 �� ua.indexOf('x11')!= -1)

// specific browser shortcuts
this.isNS4x = (this.isNS && this.versionMajor == 4);
this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
this.isNS4up = (this.isNS && this.versionMinor >= 4);
this.isNS6x = (this.isNS && this.versionMajor == 6);
this.isNS6up = (this.isNS && this.versionMajor >= 6);

this.isIE4x = (this.isIE && this.versionMajor == 4);
this.isIE4up = (this.isIE && this.versionMajor >= 4);
this.isIE5x = (this.isIE && this.versionMajor == 5);
this.isIE55 = (this.isIE && this.versionMinor == 5.5);
this.isIE5up = (this.isIE && this.versionMajor >= 5);
this.isIE6x = (this.isIE && this.versionMajor == 6);
this.isIE6up = (this.isIE && this.versionMajor >= 6);

this.isIE4xMac = (this.isIE4x && this.isMac);
}
var browser = new BrowserDetectLite();

THE HTML

/ if IE5.5+ on Win32, then display PNGs with AlphaImageLoader
if ((browser.isIE55 �� browser.isIE6x) && browser.isWin32) {
var pngAlpha = true;
// else, if the browser can display PNGs normally, then do that
} else if ((browser.isGecko) �� (browser.isIE5up && browser.isMac) �� (browser.isOpera && browser.isWin && browser.versionMajor >= 6) �� (browser.isOpera && browser.isUnix && browser.versionMajor >= 6) �� (browser.isOpera && browser.isMac && browser.versionMajor >= 5) �� (browser.isOmniweb && browser.versionMinor >= 3.1) �� (browser.isIcab && browser.versionMinor >= 1.9) �� (browser.isWebtv) �� (browser.isDreamcast)) {
var pngNormal = true;
}

</div>

<div class="main_links">
{{ if!$nav_hide.main_links }}
<div id="menu1" onmouseover="xpand(1);" onmouseout="xclose(1);" class="menu1_off">
<a href="/comics/"><img src="/i/2007/nav/btn_entertainment_bg.gif" width="133" height="23" border="0" name="1button"></a>
<div id="menu1_wrap" class="item_wrap_off">
<div id="capp1" class="capstone"><img src="/i/2007/nav/top_entertainment.gif" width="199" height="14" border="0" hspace="0" vspace="0"></div>
<div id="menu1item1" onclick="window.location='/comics/';urchinTracker('/clicks/new_nav/comics/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/comics/">Comics</a></div>
<div id="menu1item2" onclick="window.location='/movies/';urchinTracker('/clicks/new_nav/movies/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/movies/">Movies</a></div>

<div id="menu1item3" onclick="window.location='/videogames/';urchinTracker('/clicks/new_nav/videogames/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/videogames/">Video Games</a></div>
<div id="menu1item4" onclick="window.location='/toys/';urchinTracker('/clicks/new_nav/toys/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/toys/">Toys</a></div>
<div id="menu1item5" onclick="window.location='/movies/';urchinTracker('/clicks/new_nav/movies/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/movies/">TV</a></div>
<div id="menu1item6" onclick="window.location='/';urchinTracker('/clicks/new_nav/home/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/">Home</a></div>
<div id='bottom1' class="capbottom"><img src="/i/2007/nav/bottom_stuff.gif" width="200" height="14" hspace="0" vspace="0" border="0"></div>
</div>
</div>
<div id="menu2" onmouseover="xpand(2);" onmouseout="xclose(2);" class="menu2_off">
<a href="/universe"><img src="/i/2007/nav/btn_characters_bg.gif" alt="characters" name="2button" width="107" height="23" border="0"></a>
<div id="menu2_wrap" class="item_wrap_off">
<div id="capp2" class="capstone"><img src="/i/2007/nav/top_characters.gif" alt="characters" width="199" height="14" hspace="0" vspace="0" border="0"></div>
<div id="menu2item1" onclick="window.location='/universe/';urchinTracker('/clicks/new_nav/universe/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/universe/">Character Bios</a></div>
<div id="menu2item2" onclick="window.location='/universe3zx/utility/network.htm';urchinTracker('/clicks/new_nav/connections/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/universe3zx/utility/network.htm">Universe Connections</a></div>
<div id='bottom3' class="capbottom"><img src="/i/2007/nav/bottom_stuff.gif" width="200" height="14" border="0"></div>
</div>
</div>
<div id="menu3" onmouseover="xpand(3);" onmouseout="xclose(3);" class="menu3_off">
<a href="/news"><img src="/i/2007/nav/btn_newsninfo_bg.gif" alt="marvel news" name="3button" width="108" height="22" border="0"></a>
<div id="menu3_wrap" class="item_wrap_off">
<div id="capp3" class="capstone"><img src="/i/2007/nav/top_newsandinfo.gif" width="199" height="14" border="0" hspace="0" vspace="0"></div>
<div id="menu3item1" onclick="window.location='/news/';urchinTracker('/clicks/new_nav/news/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/news/">News</a></div>
<div id="menu3item2" onclick="window.location='/news/comics/';urchinTracker('/clicks/new_nav/news/comics/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/news/comics/">Comic News</a></div>
<div id="menu3item3" onclick="window.location='/news/movies/';urchinTracker('/clicks/new_nav/news/movies/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/news/movies/">Movies & TV News</a></div>
<div id="menu3item4" onclick="window.location='/catalog/';urchinTracker('/clicks/new_nav/catalog/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/catalog/">Comic Catalog</a></div>
<div id="menu3item5" onclick="window.location='/news/comicstories.1622.Marvel_Podcast_Central';urchinTracker('/clicks/new_nav/podcasts/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/news/comicstories.1622.Marvel_Podcast_Central">Podcasts</a></div>
<div id='bottom2' class="capbottom"><img src="/i/2007/nav/bottom_stuff.gif" width="200" height="14" border="0"></div>
</div>
</div>
<div id="menu4" onmouseover="xpand(4);" onmouseout="xclose(4);" class="menu4_off">
<a href="/video"><img src="/i/2007/nav/btn_video_bg.gif" alt="video" name="4button" width="60" height="22" border="0"></a>
<div id="menu4_wrap" class="item_wrap_off">
<div id="capp4" class="capstone"><img src="/i/2007/nav/top_video.gif" width="199" height="14" border="0" hspace="0" vspace="0"></div>
<div id="menu4item1" onclick="window.location='/videos/channel/bu/movies';urchinTracker('/clicks/new_nav/movie_videos/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/videos/channel/bu/movies">Movie Videos</a></div>
<div id="menu4item2" onclick="window.location='/videos/channel/bu/comics';urchinTracker('/clicks/new_nav/comic_videos/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/videos/channel/bu/comics">Comic Videos</a></div>
<div id="menu4item3" onclick="window.location='/videos/channel/bu/video_games';urchinTracker('/clicks/new_nav/video_game_videos/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/videos/channel/bu/video_games">Video Game Videos</a></div>
<div id="menu4item4" onclick="window.location='/videos/';urchinTracker('/clicks/new_nav/all_videos/')" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/videos/">All Videos</a></div>
<div id='bottom4' class="capbottom"><img src="/i/2007/nav/bottom_stuff.gif" width="200" height="14" border="0"></div>
</div>
</div>
<div id="menu5" onmouseover="xpand(5);" onmouseout="xclose(5);" class="menu5_off">
<img src="/i/2007/nav/btn_shopmarvel_bg.gif" alt="shop marvel" name="5button" width="114" height="23" border="0">
<div id="menu5_wrap" class="item_wrap_off">
<div id="capp5" class="capstone"><img src="/i/2007/nav/top_shopmarvel.gif" width="199" height="14" border="0" hspace="0" vspace="0"></div>
<div id="menu5item1" onclick="urchinTracker('/clicks/new_nav/csls/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="http://csls.diamondcomics.com/" target="_blank">Comic Store Locator</a></div>
<div id="menu5item2" onclick="urchinTracker('/clicks/new_nav/subs/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="http://subscriptions.marvel.com/" target="_blank">Comic Subscriptions</a></div>
<div id="menu5item3" onclick="urchinTracker('/clicks/new_nav/amazon/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="http://www.amazon.com/gp/search?ie=UTF8&keywords=marvel&tag=marvelcom-20&index=blended&linkCode=ur2&camp=1789&creative=9325" target="_blank">Marvel Products</a></div>
<div id='bottom5' class="capbottom"><img src="/i/2007/nav/bottom_stuff.gif" width="200" height="14" border="0"></div>
</div>
</div>
<div id="menu6" onmouseover="xpand(6);" onmouseout="xclose(6);" class="menu6_off">
<img src="/i/2007/nav/btn_more_bg.gif" width="59" height="23" border="0" name="6button">
<div id="menu6_wrap" class="item_wrap_off">
<div id="capp6" class="capstone"><img src="/i/2007/nav/top_more.gif" width="199" height="14" border="0" hspace="0" vspace="0"></div>
<div id="menu6item1" onclick="window.location='/users/register/';urchinTracker('/clicks/new_nav/register/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/users/register/">Newsletter</a></div>
<div id="menu6item2" onclick="window.location='/wallpaper/';urchinTracker('/clicks/new_nav/wallpaper/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/wallpaper/">Wallpaper</a></div>
<div id="menu6item3" onclick="window.location='/boards/';urchinTracker('/clicks/new_nav/boards/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/boards/">MessageBoards</a></div>
<div id="menu6item4" onclick="window.location='/blogs/';urchinTracker('/clicks/new_nav/blogs/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/blogs/">Blogs</a></div>
<div id="menu6item5" onclick="window.location='/company/index.htm';urchinTracker('/clicks/new_nav/company/');" onmouseover="this.className='item_on';" onmouseout="this.className='item_off';" class="item_off">  <span class="ro">»</span> <a href="/company/index.htm">Company Info</a></div>
<div id='bottom6' class="capbottom"><img src="/i/2007/nav/bottom_stuff.gif" width="200" height="14" border="0" align="top"></div>
</div>
</div>
<div id="menu7" onclick="window.location='/digitalcomics';urchinTracker('/clicks/new_nav/digitalcomics/');" onmouseover="xpand(7);" onmouseout="xclose(7);" class="menu7_off"><img src="/i/2007/nav/btn_digitalcomics_bg.gif" width="115" height="24" border="0" name="7button"></div>
{{ /if }}

rocknbil

5:37 am on Oct 31, 2007 (gmt 0)

Welcome aboard Farahbaig, that's quite a code dump there. :-) You have many multiple things going on, including probably some stuff arising out of your browser identifying - I suggest five ideas to lead you to a solution:

1. Simplify the problem, both for yourself and others here helping you. Create a version of the page that displays just one instance of the specific problem at hand. Once you have that,

2. Use a valid document type. A valid document type causes the browsers to render in Standards Compliance Mode as opposed to Quirks mode. Standards mode allows many of the functions of CSS to work properly where they won't work properly in Quirks mode. Since IE 7 is the most compliant version of IE yet (though it's still a train wreck,) I would say if you are seeing significant differences between FF and IE7, this is very likely the root of it (though it possibly may not be.)

3. Validate your code. Invalid code in Standards mode can cause all sorts of oddities, you may have already done this but in case you haven't,

[validator.w3.org...]

4. Approach one problem at a time. Those of us that know IE (a little too WELL!) can testify, "behaving a little strangely" covers a LOT of ground. Approach each problem specifically, starting with the greatest to least . . . so we know what to look for.

5. Never rely on a browser ID script. This last is a recommendation only, you may have specific reasons for requiring this, so if you do, ignore it. But there is almost always another way to do what you are doing without needing to ID the browser. At first glance, it looks to me like most of your browser ID'ing is for outdated browsers anyway.

One thing I spot off that will have nothing to do with display (generally) but may give you some functional issues,

<div id="menu1item5" onclick=...onmouseover=....onmouseout=...> ....</div>

This is likely to give you all sorts of troubles in IE (and am guessing, is this one of the oddities you are asking about?) For page events, use the natural object for this, the anchor. You can set the display of the anchor to block to "fill out" the div - or possibly use it instead, or use a list item instead of a div.

better

Better yet, what is a menu but a list of links?

Best of luck . . .