Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Don't you just love Internet Explorer 7

    If you go here 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.



    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:

    Code:
    <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...

    Code:
    	<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.

    Code:
    <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>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this for size.

    It works for me.

    Frank

    Code:
    #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
    }
    Last edited by effpeetee; 01-13-2008 at 09:18 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If that doesn't work use this for the CSS
    Code:
    #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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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.


  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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?
    Last edited by Apostropartheid; 01-13-2008 at 09:45 PM.

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    I was waiting for a sarcastic response like that. 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.

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    (check edit)
    And I was being serious. I don't like Ffx or Opera's looks.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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.
    Last edited by AoR Zeta; 01-13-2008 at 10:01 PM.

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Ok then, does it really matter though? I solved the issue anyway.

  • #12
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I did tell you to check the edit mate (I asked you a question there.)

    Then tell us how! Je suis curieux.

  • #13
    New Coder
    Join Date
    Jan 2008
    Posts
    42
    Thanks
    4
    Thanked 4 Times in 4 Posts
    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?

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by AoR Zeta View Post
    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?
    http://litmusapp.com/labs

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

    Also see the useful url's in my signature.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •