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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Location
    Tucson, Arizona
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Horizontal UL - IE Problem

    Hi Guys,

    I am new to these forums but I need some serious QUICK help. I am trying to get my Horizontal Navigation to work in all browsers. As of right now it seems to work just fine in Firefox, but of course not in IE. Below is all of my code as well as some screen shots showing what IE is doing to my horizontal menu.

    View From Firefox



    View from Internet Explorer



    Here is my HTML
    Code:
    <ul class="nav">
            <li><a href="index.shtml">Home</a></li>
            <li>|</li>
            <li><a href="why.shtml">Why Club Pilates</a></li>
            <li>|</li>
            <li><a href="history.shtml">History Of Pilates</a></li>
            <li>|</li>
            <li><a href="approach.shtml">Pilates Approach</a></li>
            <li>|</li>
            <li><a href="pricing.shtml">Pricing Guide</a></li>
            <li>|</li>
            <li><a href="schedule.shtml">Class Schedule</a></li>
            <li>|</li>
            <li><a href="training.shtml">Teacher Training</a></li>
            <li>|</li>
            <li><a href="contact.shtml">Contact</a></li>
            <li>|</li>
            <li><a href="javascript:void(0);">Links</a>
              <ul>
                <li><a href="http://pilates.com">Pilates.com</a></li>
                <li><a href="http://fulgentlight.com">Fulgent Light Designs</a></li>
              </ul>
            </li>
            <li>|</li>
            <li><a href="javascript:void(0);">About Us</a>
              <ul>
                <li><a href="">Allison Beardsley</a></li>
                <li><a href="">Sophie Mahoney</a></li>
                <li><a href="">Sarah Cushman</a></li>
                <li><a href="">Najwa Ahad</a></li>
                <li><a href="">Jill Giddings</a></li>
                <li><a href="">View All</a></li>
              </ul>
            </li>
          </ul>

    Here is my StyleSheet
    Code:
    /* ------------------------------ */
    /** NAVIGATION STRUCTURE & STYLE **/
    /* ------------------------------ */
    
    /* Main Menu */
    ul.nav{
    	float: left;
    	font-family: arial;
    	text-transform:uppercase;
    	font-size: 10px;
    	text-decoration: none;
    	margin: 0;
    	padding: 2px 0px 0px 0px;
    	cursor: default;
    	list-style-type: none;
    	display: inline;
    	width: 900px;
    	height: 21px;
    	background: url(layout/navigation_tile.gif);
    	position: relative;
    }
    
    /* SUB Menu */
    .nav ul {
    	text-transform:uppercase;
    	font-family: arial;
    	font-size: 10px;
    	text-decoration: none;
    	margin: 0px;
    	padding: 8px;
    	cursor: default;
    	list-style-type: none;
    	display: inline;
    	text-align: left;
    	border: 1px solid #79DB35;
    	background: #CAEFBE;
    }
    
    ul.nav{
    	display: table;
    }
    ul.nav>li{
    	display:inline;
    	float: left;
    	margin: 0px;
    	padding: 2px 3px 2px 3px;
    }
    
    ul.nav li>ul{
    /*Make the sub list items invisible*/
    	display: none;
    	position: absolute;
    	max-width: 40ex;
    	margin-left: -6px;
    	margin-top: 2px;
    }
    
    ul.nav li:hover>ul{
    /*When hovered, make them appear*/
    	display : block;
    }
    
    .nav ul li a{
    /*Make the hyperlinks as a block element, sort of a hover effect*/
    	display: block;
    	padding: 2px 2px 2px 2px;
    }
    
    /*** Menu colors (customizable) ***/
    
    ul.nav li a:hover {
    	color: #919191;
    	text-decoration: underline;
    }
    
    ul.nav li:hover, ul.nav li{
    	background: none;
    	color: #919191;
    }
    
    .nav ul li a:hover{
    	background: #99FF99;
    	color: black;
    	text-decoration: none;
    }
    
    .nav a{
    	text-decoration: none;
    	color: black;
    }

  • #2
    New to the CF scene
    Join Date
    Jun 2008
    Location
    Tucson, Arizona
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have also just went ahead and tested it in Opera, Netscape, and Safari and it works just fine. Seems to just be an Internet Explorer issue.

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I am rusty on this but I had the same problem a couple years back. Have you tried putting a width on to your li's?
    or you might like to remove the > child selector. I seem to recall from somewhere deep in my bonce, that IE doesn't like them.

    try this

    Code:
    ul.nav li{
    bazz
    Last edited by bazz; 06-24-2008 at 12:19 AM.

  • #4
    New to the CF scene
    Join Date
    Jun 2008
    Location
    Tucson, Arizona
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    I am rusty on this but I had the same problem a couple years back. Have you tried putting a width on to your li's?

    bazz

    Yeah that didn't help at all, it just made the text "squished" together in the IE version, but did not get all of the links on the same line.

    Another weird thing is I have set a height for my ul (21px) but IE just ignores it.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Have you got the page online? I want to copy it to my desktop, to test my suggestions in IE, before recommending them.

    bazz

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Well IE ignores the height unless you have overflow: hidden set because it treats height as min-height, which means it will stretch to fit any content that overflows it. I had this problem with a site of mine not so long ago and the fix for me was to set a width on the li's, othewwise they just kept filling the space as display block elements would.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • Users who have thanked ahallicks for this post:

    AndTsoREYU (06-24-2008)

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I put this code into the head of the html and it works fine in IE as well as FF3. The key difference was the removal of the child selector.

    Code:
    <style type="text/css">
    ul.nav{
    	float: left;
    	font-family: arial;
    	text-transform:uppercase;
    	font-size: 10px;
    	text-decoration: none;
    	margin: 0;
    	padding: 2px 0px 0px 0px;
    	cursor: default;
    	list-style-type: none;
    	display: inline;
    	width: 900px;
    	height: 21px;
    	background: url(layout/navigation_tile.gif);
    	position: relative;
    }
    
    
    .nav ul {
    	text-transform:uppercase;
    	font-family: arial;
    	font-size: 10px;
    	text-decoration: none;
    	margin: 0px;
    	padding: 8px;
    	cursor: default;
    	list-style-type: none;
    	display: inline;
    	text-align: left;
    	border: 1px solid #79DB35;
    	background: #CAEFBE;
    }
    
    ul.nav{
    	display: table;
    }
    ul.nav li{
    	display:inline;
    	float: left;
    	margin: 0px;
    	padding: 2px 3px 2px 3px;
    }
    
    ul.nav li ul{
    	display: none;
    	position: absolute;
    	max-width: 40ex;
    	margin-left: -6px;
    	margin-top: 2px;
    }
    
    ul.nav li:hover ul{
    /*When hovered, make them appear*/
    	display : block;
    }
    
    .nav ul li a{
    /*Make the hyperlinks as a block element, sort of a hover effect*/
    	display: block;
    	padding: 2px 2px 2px 2px;
    }
    
    /*** Menu colors (customizable) ***/
    
    ul.nav li a:hover {
    	color: #919191;
    	text-decoration: underline;
    }
    
    ul.nav li:hover, ul.nav li{
    	background: none;
    	color: #919191;
    }
    
    .nav ul li a:hover{
    	background: #99FF99;
    	color: black;
    	text-decoration: none;
    }
    
    .nav a{
    	text-decoration: none;
    	color: black;
    }
    
    </style>
    hth

    bazz

  • Users who have thanked bazz for this post:

    AndTsoREYU (06-24-2008)

  • #8
    New to the CF scene
    Join Date
    Jun 2008
    Location
    Tucson, Arizona
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    Well IE ignores the height unless you have overflow: hidden set because it treats height as min-height, which means it will stretch to fit any content that overflows it. I had this problem with a site of mine not so long ago and the fix for me was to set a width on the li's, othewwise they just kept filling the space as display block elements would.
    How exactly did you set the width of your li's? Did you do it through CSS or just inline (and an example would be nice)

    THANKS!

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Did you catch my last post?

    You will notice that IE doesn't do the flyout on the about us link. You'll need a snippet of JS for that

    bazz

  • Users who have thanked bazz for this post:

    AndTsoREYU (06-24-2008)

  • #10
    New to the CF scene
    Join Date
    Jun 2008
    Location
    Tucson, Arizona
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    Did you catch my last post?

    You will notice that IE doesn't do the flyout on the about us link. You'll need a snippet of JS for that

    bazz
    Yeah that was the thing, I am trying to get it so that I could make a pure CSS menu so people who didn't have Javascript enabled see it.

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    check out A List Apart for some ideas, obstacles
    http://www.alistapart.com/articles/hybrid
    bazz

  • Users who have thanked bazz for this post:

    AndTsoREYU (06-24-2008)

  • #12
    New to the CF scene
    Join Date
    Jun 2008
    Location
    Tucson, Arizona
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    check out A List Apart for some ideas, obstacles
    http://www.alistapart.com/articles/hybrid
    bazz
    Thanks for the article link. As of right now I am going without the Child "drop down" menu until i can totally figure it out. It seems like that article might be a big help in getting everything to work in both IE and Other browsers.

    Thanks Again,

    --Matt

  • #13
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    As far as I am aware, you will always have to use a bit of JS for IE<7.

    bazz


  •  

    Posting Permissions

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