...

View Full Version : Don't you just love Internet Explorer 7



AoR Zeta
01-13-2008, 09:41 PM
If you go here (http://www.veraci7y.net/index.vnet) and look at the drop-down menus (where it says Community, Game Finder etc.) in any Browser that isn't Internet Explorer.

Then take a look in Internet Explorer 7.

Whether you looked there or not, I don't know. Regardless, here's an image that illustrates my problem anyway.

http://img412.imageshack.us/img412/6090/ihateieql7.png

Excuse the messy text, when I try to add text using Adobe Dreamweaver CS3 I get a "Could not complete your request because something prevented the text engine from being initiated" message. That's another problem for another Day...

So, any ideas?

The HTML/CSS in question is here:



<style type="text/css">
#nav{background-color:#000000;list-style:none;height:30px;width:990px;padding:0px 0px 0px 10px;margin:0;border-bottom:2px solid #437D9C;}
#nav ul{margin:0;padding:0;}

#nav li{background:#000000;height:26px;line-height:26px;width:auto;padding:0px 7px 0px 7px;margin:2px 12px 2px 0px;float:left;}
#nav li:hover{background:#2E6E98;height:26px;line-height:26px;width:auto;padding:0px 7px 0px 7px;margin:2px 12px 2px 0px;float:left;}

#nav li#current{background:#2E6E98;height:26px;line-height:26px;width:auto;padding:0px 7px 0px 7px;margin:2px 12px 2px 0px;float:left;}
#nav li#current:hover{background:#000000;height:26px;line-height:26px;width:auto;padding:0px 7px 0px 7px;margin:2px 12px 2px 0px;float:left;}

#nav li ul{background:transparent url(http://www.veraci7y.net/img/pixel.png) repeat;list-style:none;width:250px;padding:0;margin:0;border:1px solid #437d9c;position:absolute;display:none;z-index:100;float:left;}

#nav li:hover ul{display:block;}


#nav li:hover ul li{background:transparent;height:26px;line-height:26px;width:245px;padding:0 0 0 5px;margin:0;float:left;}
#nav li:hover ul li:hover{background:#2E6E98;height:26px;line-height:26px;width:245px;padding:0 0 0 5px;margin:0;float:left;}

#nav li a:link{color:#FFFFFF;font-size:1.00em;text-decoration:none;display:block;height:100&#37;;}
#nav li a:visited{color:#FFFFFF;font-size:1.00em;text-decoration:none;display:block;height:100%;}
#nav li a:hover{color:#FFFFFF;font-size:1.00em;text-decoration:underline;display:block;height:100%;}
</style>


...and here...



<ul id="nav">
<li id="current"><a href="http://www.veraci7y.net/index.vnet" title="Go to the Homepage.">Home</a></li>
<li><a href="#">Community</a>
<ul>
<li><a href="#">Lorem</a></li>

<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
<li><a href="#">Amet</a></li>
</ul>
</li>

<li><a href="#">Game Finder</a>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>

<li><a href="#">Amet</a></li>
</ul>
</li>

<li><a href="#">Statistics</a>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>

<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
<li><a href="#">Amet</a></li>
</ul>
</li>
<li><a href="#">Management</a>
<ul>

<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
<li><a href="#">Amet</a></li>
</ul>

</li>
</ul>


...there's also some Javascript on the page, maybe that's interfering? I doubt it though.



<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('#menu, .menu_nopad, #content, #content_thin').equalizeCols();
$('a').focus(function() { this.blur(); } );
$("#nav li:not('#current')").hover(function() { $('#current').css('background-color', '#000000') }, function() { $('#current').css('background-color', '#2E6E98') } );

$('#my_menu').hide(0);
$('#toggle_my_menu').click(function() {
$('#my_menu').toggle(500);
return false;
});
$('.sub_menu_item').hover(function() {
$(this).addClass('sub_menu_item_hover');
}, function() {
$(this).removeClass('sub_menu_item_hover');
});
var options = {newsList:"#halostats",startDelay:100,tickerRate:90,loopDelay:5000,placeHolder1:"|",placeHolder2:" "}
$().newsTicker(options);
});
/* ]]> */
</script>

effpeetee
01-13-2008, 10:03 PM
Try this for size.

It works for me.

Frank


#nav LI:hover {
PADDING-RIGHT: 7px;
PADDING-LEFT: 7px;
BACKGROUND: #2e6e98;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 2px 2px 2px 0px;
WIDTH: auto;
LINE-HEIGHT: 26px;
PADDING-TOP: 0px;
HEIGHT: 26px
}

_Aerospace_Eng_
01-13-2008, 10:08 PM
If that doesn't work use this for the CSS

#nav {
background-color:#000000;
list-style:none;
height:30px;
width:990px;
padding:0px 0px 0px 10px;
margin:0;
border-bottom:2px solid #437D9C;
}
#nav ul {
margin:0;
padding:0;
}
#nav li {
background:#000000;
height:26px;
line-height:26px;
width:auto;
padding:0px 7px 0px 7px;
margin:2px 12px 2px 0px;
float:left;
position:relative;
}
#nav li:hover {
background:#2E6E98;
height:26px;
line-height:26px;
width:auto;
padding:0px 7px 0px 7px;
margin:2px 12px 2px 0px;
float:left;
}
#nav li#current {
background:#2E6E98;
height:26px;
line-height:26px;
width:auto;
padding:0px 7px 0px 7px;
margin:2px 12px 2px 0px;
float:left;
}
#nav li#current:hover {
background:#000000;
height:26px;
line-height:26px;
width:auto;
padding:0px 7px 0px 7px;
margin:2px 12px 2px 0px;
float:left;
}
#nav li ul {
background:transparent url(http://www.veraci7y.net/img/pixel.png) repeat;
list-style:none;
width:250px;
padding:0;
margin:0;
border:1px solid #437d9c;
position:absolute;
display:none;
left:0;
top:26px;
}
#nav li:hover ul {
display:block;
}
#nav li:hover ul li {
background:transparent;
height:26px;
line-height:26px;
width:245px;
padding:0 0 0 5px;
margin:0;
float:none;
}
#nav li:hover ul li:hover {
background:#2E6E98;
height:26px;
line-height:26px;
width:245px;
padding:0 0 0 5px;
margin:0;
}
#nav li a:link {
color:#FFFFFF;
font-size:1.00em;
text-decoration:none;
display:block;
height:100&#37;;
}
#nav li a:visited {
color:#FFFFFF;
font-size:1.00em;
text-decoration:none;
display:block;
height:100%;
}
#nav li a:hover {
color:#FFFFFF;
font-size:1.00em;
text-decoration:underline;
display:block;
height:100%;
}
which does seem to work.

AoR Zeta
01-13-2008, 10:27 PM
That worked perfectly Aerospace (the other solution wouldn't work), though it created another problem. The hover menu is now showing below my breadcrumb navigation. I changed the z-index but it still won't work.

http://img181.imageshack.us/img181/6802/screenshot054cq3.th.png (http://img181.imageshack.us/my.php?image=screenshot054cq3.png)

Apostropartheid
01-13-2008, 10:42 PM
Yeah, I do love IE7, actually: it's my favorite browser.

Just a word of warning about your CSS: it's a lot less readable in uppercase (style is everything ;))

I'm sorry if I make you sound like a moron, but did you change the z-index of both?

AoR Zeta
01-13-2008, 10:44 PM
I was waiting for a sarcastic response like that. :D Just so you know, I write CSS properties in lower-case, it was the person who responded that wrote them in upper-case. ;) Thanks anyway.

Apostropartheid
01-13-2008, 10:46 PM
(check edit)
And I was being serious. I don't like Ffx or Opera's looks.

Excavator
01-13-2008, 10:52 PM
I'm with you CyanLight, I use IE7 for my normal day to day browsing. It's my default browser.
I only fire up FF when I'm working on a page.

AoR Zeta
01-13-2008, 10:59 PM
I'm sorry but if I wanted to talk about Internet Explorer then I'd go make a thread called "Let's talk about how awesome IE is and send love letters to Microsoft <3" in the General Discussion Forum. But I posted it here because this is where you post to get help with HTML and CSS.

Basically, what I'm trying to say is: This is getting way off topic.

effpeetee
01-13-2008, 11:22 PM
Just so you know, I write CSS properties in lower-case, it was the person who responded that wrote them in upper-case.

Actually, I cut and pasted from CSSVista. It was that that put them in U/C.

Frank

AoR Zeta
01-13-2008, 11:39 PM
Ok then, does it really matter though? I solved the issue anyway.

Apostropartheid
01-13-2008, 11:44 PM
I did tell you to check the edit mate (I asked you a question there.)

Then tell us how! Je suis curieux.

AoR Zeta
01-13-2008, 11:54 PM
It was something to do with my breadcrumbs, there were relatively positioned elements and they would show above the suckerfish menu no matter what. I just took away the relative positioning and it's ok now.

Is CSS Vista a Website or something? :D

effpeetee
01-14-2008, 12:06 AM
It was something to do with my breadcrumbs, there were relatively positioned elements and they would show above the suckerfish menu no matter what. I just took away the relative positioning and it's ok now.

Is CSS Vista a Website or something? :D
http://litmusapp.com/labs

It's a very useful tool. And it's FREE!

Also see the useful url's in my signature.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum