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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts

    IE7 eats my menu

    So I was < this > close to calling the "working out the kinks" finished. ONe I can handle. The other one is real bizarre. My right side navigation is getting chewed up in an odd way by IE7. I keep looking at it and can't figure out exactly what it's doing so I'm sure where to even start correcting.

    http://tugbucket.net/index.php

    I've tested on:

    FF 2.0.0.7
    Opera 9.22
    Safari 3.0.3
    IE 6
    IE 7

    All PC.

    They all seem to play along fine except IE7.

    style sheet for ease:
    http://tugbucket.net/wp-content/them...king/style.css

    Any help is appreciated of course. If you've seen something like this before, a little knowledge on the issue would be nice as well.

    Thanks,
    Alan
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hey Alan,

    After futzing with it for awhile I found something of a workaround…if you move the float and clear rules from ".nav li" to ".nav li a" it seems to take care of it.

    It's kind of a conceptual hack—since you would then be setting up the full width of the li and moving the link box around within it (put a border on ".nav li" and you'll see what I mean)—but it works.

    Code:
    	.nav li {
    	margin-bottom: 12px;
    	overflow: hidden;
    	position: relative;
    	}
    
    	.nav li a:link, .nav li a:visited {
    	background: #8C1703;
    	border: 3px solid #F7F7DF;
    	border-right: none;
    	display: block;
    	color: #FCEDE2;
    	text-indent: 12px;
    	text-transform: lowercase;
    	width: 100px;
    	text-decoration: none;
    	padding: 3px 0;
    	font: 600 120% "trebuchet ms", tahoma, arial, sans-serif;
    	float: right;
    	clear: right;
    	}

  • Users who have thanked rmedek for this post:

    harbingerOTV (10-12-2007)

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    yeah Richard, I thanked you. what of it

    The code worked great for FF, Safari and IE7 but Opera ate it ( the nav disappeared completely). IE6 had the nav slide under the "tb" ( i can fix that ).

    so your code became:
    Code:
    .nav li {
    	margin-bottom: 12px;
    	overflow: hidden;
    	position: relative;
    	z-index: 100;
    	}
    
    	.nav li a:link, .nav li a:visited {
    	background: #8C1703;
    	border: 3px solid #F7F7DF;
    	border-right: none;
    	display: block;
    	color: #FCEDE2;
    	text-indent: 12px;
    	text-transform: lowercase;
    	width: 100px;
    	text-decoration: none;
    	padding: 3px 0;
    	font: 600 120% "trebuchet ms", tahoma, arial, sans-serif;
    	float: right;
    	clear: right;
    	position: relative;
    	z-index: 100;
    	}
    /* opera goodness :-) */
    @media all and (min-width: 0px){
    
    .nav li {
    margin-bottom: 12px;
    float: right;
    clear: right;
    overflow: hidden;
    position: relative;
    }
    
    .nav li a:link, .nav li a:visited {
    background: #8C1703;
    border: 3px solid #F7F7DF;
    border-right: none;
    display: block;
    color: #FCEDE2;
    text-indent: 12px;
    text-transform: lowercase;
    width: 100px;
    text-decoration: none;
    padding: 3px 0;
    font: 600 120% "trebuchet ms", tahoma, arial, sans-serif;
    }
    }
    so then i relative positioned everything in the nav and z-indexed the crap out of it and IE6 played nice.

    drum on Richard, drum on
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Woo hoo…glad it worked

    But, instead of adding all the hacks for Opera and IE6, why not just add the alternate rules for IE7 in conditional comments?

    Code:
    <!--[if lte IE 7]>
    	<style type="text/css" media="screen">
    		hr {
    			padding: 30px 0;
    			color: #F7F7DD;
    			height: 2px;
    		}
    	</style>
    <![endif]-->
    
    <!--[if IE 7]>
    	<style type="text/css" media="screen">
    		.nav li {
    			float: none;
    			clear: none;
    		}
    		
    		.nav li a {
    			float: right;
    			clear: right;
    		}
    	</style>
    <![endif]-->
    Or maybe that's what I would have done seeing as how I am too lazy to try and figure out language behind most Opera hacks.


  •  

    Posting Permissions

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