Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: mack

Message Too Old, No Replies

IE7 chips the drop down menu

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

New User

10+ Year Member

joined:Oct 25, 2007
posts: 6
votes: 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?
6:25 pm on Oct 25, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2297
votes: 100


Welcome to WebmasterWorld, Farahbaig.

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

Marshall

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

New User

10+ Year Member

joined:Oct 25, 2007
posts: 6
votes: 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
5:36 pm on Oct 30, 2007 (gmt 0)

New User

10+ Year Member

joined:Mar 11, 2007
posts:26
votes: 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.

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

New User

10+ Year Member

joined:Oct 25, 2007
posts: 6
votes: 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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<a href="/movies/">Movies</a></div>
<!-- <div id="menu1item3" onclick="window.location='/animation/';urchinTracker('/clicks/new_nav/movies/')" onMouseOver="this.className='item_on';" onMouseOut="this.className='item_off';" class="item_off">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<a href="/animation/">Animation</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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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">&nbsp;&nbsp;<span class="ro">&raquo;</span>&nbsp;<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

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

New User

10+ Year Member

joined:Oct 25, 2007
posts: 6
votes: 0


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