IE7 chips the drop down menu

Forum Moderators: mack

Message Too Old, No Replies

IE7 chips the drop down menu

Farahbaig

4:09 pm on Oct 25, 2007 (gmt 0)

Hi the drop down mens work fine in mozilla and other versions of Ie except IE7 it over floats to right a little can any one help?

Marshall

6:25 pm on Oct 25, 2007 (gmt 0)

Welcome to WebmasterWorld, Farahbaig.

Can you post relevant CSS, HTML and doctype for review.

Marshall

Farahbaig

5:16 pm on Oct 29, 2007 (gmt 0)

Hey thnaks
but it seems that most of the stuff which works on firefox has a problem in IE7 how do i make it compatiable mostly css stuff

WhiteWebServices

5:36 pm on Oct 30, 2007 (gmt 0)

Getting IE7 and FireFox to play nicely shouldn't be too much trouble. IE6, on the other hand, is very quirky.

In any case, as Marshall wrote, we need more info before we can help you.

Farahbaig

6:21 pm on Oct 30, 2007 (gmt 0)

the css

/* BEGIN MENU STUFF */
.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:200px;
height:23px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
.menu1_on {
width: 200px;
overflow: hidden;
position:absolute;
top:0px;
left:0px;
cursor:pointer;

}

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

}
.menu2_on {
width: 150px;
position:absolute;
top:0px;
left:131px;
cursor:pointer;
}
.menu3_off {
width:200px;
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:200px;
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:200px;
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:200px;
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:110px;
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: block;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
background-color: #ffffff;
width: 198px;
}
.capbottom {
width: 198px;
display: block;
height: 12px;

}

/* END MENU STUFF */

the html

<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="199px" 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="199px" 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="198" 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="198" 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="199px" 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_shopm_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_shopm.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.com/" target="_blank"> 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=&tag=marvelcom-20&index=blended&linkCode=ur2&camp=1789&creative=9325" target="_blank"> 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="199px" 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/';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/">Company </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>

the pronlem is with the top image 'top_more.gif' in capstome class
and also 'bottom_stuff.gif' image in capbottom class tese images seem to overfloat expand in IE7

Farahbaig

6:21 pm on Oct 30, 2007 (gmt 0)

and if i try to resize them it becomes small im firefox2? dont knw wht to do?