SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mac ie5.1 and "sliding doors" causing woe :(

    I'm hoping some one with mac ie5.1 can help me find out what I'm doing wrong. I have a navigation bar based on Doug Bowman's article "Sliding doors of css" from A List Apart.
    http://alistapart.com/articles/slidingdoors/
    http://alistapart.com/articles/slidingdoors2/
    But it's not working on mac ie 5.1. Since I don't have a mac myself, I can't figure what's happening.
    There are two main problems.
    • The tabs are floating left.
    • The mouse over effect isn't working


    I've replaced all the image urls below to absolute urls for your ease but otherwise it's the same as what I have locally. If you think you can help but would rather it presented differently just shout and I'll do what I can.

    This really has me stumped so any help would be great. Thanks in advance!
    John

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style media="screen" type="text/css">
    body{
    	color:#2E7DAA;
    	background:#fff url(http://www.nayd.ellison9.com/template/lib/gfx/leftBg.jpg) no-repeat top left;
    	margin:0;
    	padding:0;
    	font:90% "Trebuchet MS", sans-serif;
    }
    #warning{display:none; }
    .hide{width:0;height:0;overflow:hidden; position:absolute;}
    a {
    	color:#CC9900;
    	font-weight:bold;
    	text-decoration:none;
    }
    a:link {/*color:#000;*/}
    a:visited {/*color:#000;*/}
    a:hover {text-decoration:underline;}
    #content img{margin:8px; float:right;}
    h2,h3{padding:0 0 0 40px;}
    h3{font-style:oblique;}
    h4	{/*font-style:oblique;*/}
    
    /* <------- masthead --------> */
    #masthead{
    	background:#0099CC url(http://www.nayd.ellison9.com/template/lib/gfx/mastheadBg.jpg) repeat-x;
    	margin:0 29px 0; 
    	height:89px;
    }
    #masthead h1{
    	/*position:absolute; right:0; top:0; height:146px; width:179px;
    	background:url(http://www.nayd.ellison9.com/template/lib/gfx/logo.jpg) no-repeat right top ; margin:0px;*/
    	position:absolute; right:31px; top:0; height:146px; width:148px;
    	background:url(http://www.nayd.ellison9.com/template/lib/gfx/logo2.jpg) no-repeat right top ; margin:0px;}
    #masthead a{height:89px; display:block;}
    #masthead a acronym{visibility:hidden;}
    #masthead a:hover{text-decoration:none;}
    #masthead h2{display:none;}
    
    /* <------- mainNav --------> */
    #mainNav{position:absolute; top:0; left:29px; height:88px; 
    line-height:normal;}
    
    #mainNav ul{position:absolute; bottom:-1px; padding:0 10px; margin:0; list-style:none;}
    #mainNav li{
    	background:url(http://www.nayd.ellison9.com/template/lib/gfx/tab_lt.gif) no-repeat left top;
    	float:left;
    	padding:0 1px 0px 10px;
    }
    #mainNav a{
    	font-weight:normal;font-size:0.8em;color:#D5F4FF; 
    	background:url(http://www.nayd.ellison9.com/template/lib/gfx/tab_rt.gif) no-repeat right top;
    	display:block;
    	padding:5px 10px 3px 0px;
    	white-space:nowrap;
    	float:left; /*stops list items from stacking in ie5*/
    }
    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    #mainNav a {float:none;}
    /* End IE5-Mac hack */
    
    #mainNav ul a:hover{color:#fff; text-decoration:none;}
    #mainNav #currentTab			{background-image:url(http://www.nayd.ellison9.com/template/lib/gfx/tab_lt_current.gif); }
    #mainNav #currentTab a			{background-image:url(http://www.nayd.ellison9.com/template/lib/gfx/tab_rt_current.gif); color:#2E7DAA;}
    #mainNav li:hover,#mainNav li.over		{background-position:0px -142px;}
    #mainNav li:hover a,#mainNav li.over a	{background-position:100% -142px; }
    #mainNav #currentTab:hover,#mainNav #currentTab.over	{background-position:0px 0px; }
    #mainNav #currentTab:hover a,#mainNav #currentTab.over a	{background-position:100% 0px;}
    
    
    
    /*############# Nothing to do with masthead below this point ###############
    ############################################################################*/
    #container{
    	background:url(http://www.nayd.ellison9.com/template/lib/gfx/rightBg.jpg) no-repeat top right; 
    	margin:-89px 0 0 29px; 
    	padding: 100px 59px 0 30px;
    }
    #content{
    	background-color:transparent;
    	float:left; width:65%;
    	text-align:justify;
    	line-height:1.5em;
    }
    #subNav		{float:right; width:29%; padding:2%; margin-top:50px;line-height:1.6em; font-size:0.8em;}
    #subNavBody	{background:#eff8ef;border:1px solid #cfe9cf;}
    
    
    #columnClear{clear:both;}
    #footer	{border:1px solid #cfe9cf;}
    #footer	{
    	/*padding:10px;
    	color:#990;*/
    	/*float:left;
    	clear:both;
    	width:100%;
    	background:#000;*/ /*#effafc;*/
    	border-top:solid 1px #cbf;
    	text-align:center;
    	}
    #footer ul{padding:0; margin:0; list-style:none;}
    #footer li{float:left;padding:0 0.4em;}
    
    #validation{float:left;clear:left;background:#effafc;}
    /*#validation span{visibility:hidden;}
    #vXhtml{background:url(http://www.nayd.ellison9.com/template/lib/gfx/xhtml1_0.gif) no-repeat;position:relative;left:-0.8em;}
    #vCss{background:url(http://www.nayd.ellison9.com/template/lib/gfx/css.gif) no-repeat;position:relative;}*/
    
    </style>
    <script src="http://www.nayd.ellison9.com/template/lib/js/general.js" type="text/Javascript" language="javascript"></script>
    <!-- -->
    <title>NAYD TEMPLATE</title>
    </head>
    <body> 
    <p class="hide"><a href="#content">Skip to main content</a></p> 
    <div id="warning"><a href="http://www.mozilla.org/" title="Click here for a standards compliant browser"><img src="http://www.nayd.ellison9.com/template/lib/gfx/browser_warning.gif" alt="If you can see this then we advise you upgrade to a standards compliant browser for a better browsing experience" /></a></div> 
    <div id="masthead"> 
      <h1><a href="/" title="National Association for Youth Drama"><acronym title="National Association for Youth Drama">NAYD</acronym></a></h1> 
      <h2>The website of the National Association for Youth Drama of Ireland</h2> 
    </div> 
    <div id="container"> 
      <!--Container--> 
      <div id="mainNav"> 
    
          <ul id="navList"> 
            <li><a href="../index.html">Welcome</a></li> 
            <li id="currentTab"><a href="../about.html">About NAYD</a></li> 
            <li><a href="../news/now.html">News and Events</a></li> 
            <li><a href="../ireland/intro.html">Youth Drama in Ireland</a></li> 
            <li><a href="../articles/toread.html">Articles</a></li> 
            <li><a href="../links/go.html">Links</a></li> 
            <li><a href="../sponsor.html">Funding</a></li> 
          </ul> 
     
      </div> 
      <div id="content"> 
        <!--<div id="sidebar">Article sidebar</div>--> 
        <h1>Article Header - h1</h1> 
        <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae tellus ac velit hendrerit suscipit. Integer pede sem, semper in, eleifend id, luctus in, erat. Pellentesque tempus posuere augue. Nullam euismod libero vel libero. Nullam molestie, ipsum et tristique fringilla, sem lorem sagittis massa, a semper tellus turpis nec justo. Curabitur quis leo. Suspendisse augue ipsum, viverra non, ultrices sit amet, fringilla eu, leo. Ut suscipit porttitor nunc. Etiam luctus euismod erat. Sed ultrices posuere magna. Vestibulum et neque at augue ullamcorper tincidunt. Donec lacinia, elit a pellentesque vulputate, lacus enim fermentum libero, id egestas pede urna tempus leo. </p> 
        <h2>A h2 Header</h2> 
        <p> Nunc malesuada, leo dapibus nonummy porttitor, quam elit egestas augue, id tempor lectus odio eu nulla. Donec hendrerit pellentesque augue. Ut eget augue. Proin viverra metus non purus. Morbi eget nibh a sapien pretium sagittis. Donec id nulla vel lacus lobortis posuere. Proin interdum nibh id augue. Phasellus volutpat molestie erat. Fusce turpis neque, congue non, vulputate nec, dignissim et, turpis. Cras laoreet quam id purus. </p> 
        <h3>An h3 Article Header</h3> 
        <p> Etiam dapibus. Suspendisse potenti. Sed lobortis turpis quis tortor. Suspendisse potenti. Aliquam ante massa, nonummy eget, ullamcorper id, lobortis eu, turpis. Curabitur nisl eros, fermentum quis, vestibulum sit amet, pharetra sed, augue. Nam pulvinar. Vestibulum lobortis. Quisque pulvinar, libero at faucibus ultricies, ipsum nulla blandit libero, vel feugiat pede orci nec libero. Duis at ante id massa venenatis rutrum. Curabitur pulvinar metus tempor libero. Aliquam erat volutpat. Etiam vitae pede. Fusce lectus diam, mattis sed, semper eu, varius vitae, lacus. Fusce consequat nibh sed justo. Aenean nibh. Quisque at nulla nec diam accumsan rutrum. Aliquam erat volutpat. Aliquam dictum massa sit amet erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> 
      </div> 
      <div id="subNav"> 
        <div id="subNavBody"> 
          <ul> 
            <li><a href="../index.html">Welcome</a></li> 
            <li><a href="../about.html">About NAYD</a></li> 
            <li><a href="../news/now.html">News and Events</a></li> 
            <li><a href="../ireland/intro.html">Youth Drama in Ireland</a></li> 
            <li><a href="../articles/toread.html">Articles</a></li> 
            <li><a href="../links/go.html">Links</a></li> 
            <li><a href="../sponsor.html">Funding</a></li> 
          </ul> 
        </div> 
      </div> 
      <div id="columnClear"></div>
      <div id="footer"> 
        <ul> 
          <li><a href="../index.html">Welcome</a></li> 
          <li><a href="../about.html">About NAYD</a></li> 
          <li><a href="../news/now.html">News and Events</a></li> 
          <li><a href="../ireland/intro.html">Youth Drama in Ireland</a></li> 
          <li><a href="../articles/toread.html">Articles</a></li> 
          <li><a href="../links/go.html">Links</a></li> 
          <li><a href="../sponsor.html">Funding</a></li> 
        </ul> 
    	<p>&nbsp;</p>
    	<div id="validation"><a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://nayd.ellison9.com/template/Template.html">508</a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://nayd.ellison9.com/template/lib/main.css&amp;usermedium=all" id="vCss" title="Validate this page for css 2.0 conformance."><span>CSS</span></a> <a href="http://validator.w3.org/check/referer" id="vXhtml" title="Validate this page for xhtml strict conformance."><span>XHTML</span></a> </div> 
      </div> 
      
    </div> 
    <!-- end container --> 
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    My macs not connected to the net anymore as I only use it for locally testing stuff so I can't check your page at the moment.

    However I do know that ie5 mac doesn't like floats without widths and this is likely to be your problem. Without a width mac stretches the float to 100% I believe which would make a horizontal menu trun vertical.

    You could try giving widths to any floats that don't have a width specified and see if thats what the problem is. You may then need to give ie mac widths so that it can display something at least and then give other browsers the usual style.

    Use the double backslash hack to hide styles from ie5 mac etc.

    Paul

  3. #3
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.
    That's interesting because Doug deals with that issue at the end of the first article. He says that floating the anchor element will fix that issue. I guess it's a case of going back over it and looking for inconsistencies between my and his code that might be causing it. (I've really gotta get an old mac)

    Any ideas why the rollovers might not be working?

    If any other brave souls have any ideas PLEASE post! This one's doing my nut!
    Last edited by jfitz; Oct 6, 2004 at 06:15.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've spent way too much time on this - I don't like my mac much anyway its so hard to work on. Mouse is useless and the keyboards rubbish Its like being a beginner again.

    Anyway here is some code that seems to make the menu work on the mac. Hopefully I've set the styles back to normal for other browsers, but if they need any tweaking then set the changes within the mac hiding hack.

    Code:
    /* <------- mainNav --------> */
    #mainNav{position:absolute; top:0; left:29px; height:88px;width:100%; 
    line-height:normal;}
    #mainNav ul{position:absolute; bottom:-1px; padding:0 10px; margin:0; list-style:none;}
    #mainNav li{
     background:url(tab_lt.gif) no-repeat left top;
     display:inline-block;width:auto;
     padding:0 1px 0px 10px;
     position:relative;
    }
    #mainNav a{
     font-weight:normal;font-size:0.8em;color:#D5F4FF; 
     background:url(tab_rt.gif) no-repeat right top;
     display:inline-block;width:auto;
     padding:5px 10px 3px 0px;
     white-space:nowrap;
      /*stops list items from stacking in ie5*/
    }
    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    #mainNav {width:auto}
    #mainNav li{display:block;float:left;position:static;}
    #mainNav a {float:left;display:block}
    /* End IE5-Mac hack */
    #mainNav ul a:hover{color:#fff; text-decoration:none;}
    #mainNav #currentTab   {background-image:url(tab_lt_current.gif); }
    #mainNav #currentTab a   {background-image:url(tab_rt_current.gif); color:#2E7DAA;}
    #mainNav li:hover,#mainNav li.over  {background-position:0px -142px;}
    #mainNav li:hover a,#mainNav li.over a {background-position:100% -142px; }
    #mainNav #currentTab:hover,#mainNav #currentTab.over {background-position:0px 0px; }
    #mainNav #currentTab:hover a,#mainNav #currentTab.over a {background-position:100% 0px;}
    Probably best to copy that whole code block as some things have been moved around.

    Hope that helps and that's all your getting today lol

    Paul

  5. #5
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks Paul!
    Seriously, all I wanted was some suggestions but that's really amazing.
    Cheers mate.

    Btw, have you seen big john's new float clearing technique? http://www.positioniseverything.net/easyclearing.html
    Looks good. Just thought I'd post it because I've seen you help people with column layouts before.

    Thanks again

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the link

    Yes I know about this technique and have used it a couple of times to good effect. However as with everything I found odd occasions when it didn't work and theres also those occasions when ie needs to clear so I don't see the point in using 2 techniques.

    I therefore still use the old fashioned clearer div as it helps mozilla when using the margin-top properties that moz seems to ignore (and inherit),
    Code:
    .clearer {
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    Code:
    <div class="clearer"></div>
    Still the other one is a useful technique to remember and a lot cleaner when ie doesn't need to be cleared either.

    Paul


Bookmarks

Posting Permissions

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