SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Menu: Problem with IE7

    I am creating a horizontal menu using Joomla 1.5 as my CMS

    The layout works in FF2 but not IE7

    Screen Shots:

    IE


    FF (This is the layout that I want)


    HTML
    HTML Code:
    <div id="topmenu">
      <table cellpadding="0" cellspacing="0" class="pill">
        <tr>
          <td class="pill_l">&nbsp;</td>
          <td class="pill_m"><div id="pillmenu">
              <ul class="menu">
                <li class="item1"><a href="http://cc.internetlinked.com/"><span>Home</span></a></li>
                <li class="item10"><a href="#"><span>About Us</span></a></li>
                <li class="item2"><a href="/index.php?option=com_content&amp;view=category&amp;id=1&amp;Itemid=2"><span>News &amp; Events</span></a></li>
                <li id="current" class="parent active item3"><a href="/index.php?option=com_content&amp;view=category&amp;id=1&amp;Itemid=3"><span>Sermons</span></a>
                  <ul>
                    <li class="item19"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=19"><span>Sub Test 1</span></a></li>
                    <li class="item20"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=20"><span>Sub Test 2</span></a></li>
                  </ul>
                </li>
                <li class="item11"><a href="#"><span>Online Bookstore</span></a></li>
                <li class="item12"><a href="#"><span>Ministries</span></a></li>
                <li class="item13"><a href="#"><span>Weekly Schedule</span></a></li>
                <li class="item14"><a href="#"><span>Contact Us</span></a></li>
              </ul>
            </div></td>
          <td class="pill_r">&nbsp;</td>
        </tr>
      </table>
    </div>
    CSS
    HTML Code:
    /* horizontal pill menu */
    table.pill {
    	margin-left: auto;
    	margin-right: auto;
    	padding: 0;
    }
    td.pill_l {
      background: url(../images/mw_menu_separator.jpg) no-repeat right;  
      width:  1px;
      height: 42px;
    }
    td.pill_m {
      padding: 0;
      margin: 0;
      width: auto;
    }
     td.pill_r {
      width:  1px;
      height: 42px;
    } 
    #pillmenu ul {
    padding: 0;
    margin: 0;
    }
    #pillmenu li, #pillmenu ul li ul li
    {
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    }
    #pillmenu li {
    	float: left;
    	background: url(../images/mw_menu_separator.jpg) top right no-repeat;
    	margin: 0;
    	padding: 0;
    }
    #pillmenu ul li a
    {
    	color: #ffffff;
    	font-size: 14px;
    	font-weight: bold;
    	float:left;
    	display:block;
    	height: 42px;
    	line-height: 42px;
    	padding: 0 20px;
    	color: #FFFFFF;
    	text-decoration: none;
    	border-left: 1px inset #666666;
    }
    
    #pillmenu ul li ul li a
    {
    font-size: 10px;
    height: 24px;
    line-height: 24px;
    }
    
    #pillmenu ul li a:hover, #pillmenu ul li ul li a:hover
    {
      background: url(../images/mw_menu_hover_bg.jpg) repeat-x;
      vertical-align: middle;
    }
    
    #pillmenu ul li#current, #pillmenu ul li ul li#current
    {
    	background: url(../images/mw_menu_hover_bg.jpg) repeat-x;
    	vertical-align: middle;
    	border-right-width: 1px;
    	border-right-style: outset;
    	border-right-color: #666666;
    }
    #pillmenu ul li ul 
    {
    	position: absolute;
    	top: 167px;
    }
    How do I fix this?
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where are the :hover style rules in the css? - they don't seem to appear in your code above. This is most probably due to using "auto" as a left position on the dropdown <ul> when it is brought into position. If you add position:relative to the css for the <li>s, then the hover rule (wherever it is) can use left:0 instead of left: auto.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but I'm a little confused as the hover declarations don't use auto. Also, when I tried using position: relative, the submenus didn't appear under the main menun but rather in the same line.

    Also why does the current code work in FF and not IE?


    HTML Code:
    #pillmenu ul li a:hover, #pillmenu ul li ul li a:hover
    {
      background: url(../images/mw_menu_hover_bg.jpg) repeat-x;
      vertical-align: middle;
    }
    
    #pillmenu ul li#current, #pillmenu ul li ul li#current
    {
    	background: url(../images/mw_menu_hover_bg.jpg) repeat-x;
    	vertical-align: middle;
    	border-right-width: 1px;
    	border-right-style: outset;
    	border-right-color: #666666;
    }

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There should be hover rules for the <li>s - #pillmenu li:hover and #pillmenu ul li:hover at least to make the submenus appear and disappear when hovering the top menus, and it is here that the "auto" position is probably used.

    Its different in IE as IE is "guessing" the position wrong due to the auto left.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now you've totally got me as the only "hover" that I use is the one mentioned above; unless these's an implied reference to it somewhere.

    You can see the code at http://cc.internetlinked.com

    http://cc.internetlinked.com/templat...and/css/cc.css

    Maybe I'm just tired... will chaeck again properly later

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I was a little confused in thinking this was to be a dropdown type menu where the submenus would appear on hover, but it seems the submenu is in position all the time and covered by the content except when on the "sermons" page.

    When absolutely positioning something, both x and y coordinates should be specified for the position, otherwise the browsers have to guess the correct location. In this case IE is guessing wrong, but this may be due to the fact that IE is in quirks mode due to the xml declaration at the top of the page before the doctype :
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    Get rid of that line and see if IE behaves a little better then.

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok so I've given up the idea of a true horizontal submenu within a horizontal main menu.

    What I've done now is to create two separate menus. The main one is held in the #pillbar tag and the submenu is in the #submenu tag.

    What has be confused now is that the active links and hover tags don't work the same way in the #pillbar and #submenu tag, even though they follow the same logic.

    The submenu works the way it should ie the hover and active options appear correctly.

    Just when I think I'm getting close, I seem to hit a miss.

    CSS
    Code:
    #pillmenu {
      white-space: nowrap;
      height: 42px;
      float: left;
    }
    #pillmenu ul, #submenu ul {
      margin: 0;
      padding: 0;
      list-style:none;
    }
    #pillmenu li, #submenu li {
    	float: left;
    	background: url(../images/mw_menu_separator.jpg) top right no-repeat;
    	margin: 0;
    	padding: 0;
    } 
    #pillmenu a:hover, #pillmenu li#current {
      background: url(../images/mw_menu_hover_bg.jpg) repeat-x;
      vertical-align: middle;
      border-right-width: 1px;
      border-right-style: outset;
      border-right-color: #666666;
    }
    #pillmenu a {
    	font-size: 14px;
    	font-weight: bold;
    	float:left;
    	display:block;
    	height: 42px;
    	line-height: 42px;
    	padding: 0 20px;
    	color: #FFFFFF;
    	text-decoration: none;
    	background: url(../images/mw_menu_separator.jpg) top right no-repeat;
    }
    #submenu a:hover, #submenu #current {
      background: url(../images/mw_menu_hover_bg.jpg) repeat-x;
      vertical-align: middle;
      border-right-width: 1px;
      border-right-style: outset;
      border-right-color: #666666;
    }
    #submenu a {
    	font-size: 10px;
    	font-weight: bold;
    	float:left;
    	display:block;
    	height: 24px;
    	line-height: 24px;
    	padding: 0 10px;
    	color: #FFFFFF;
    	text-decoration: none;
    	background: url(../images/mw_menu_separator.jpg) top right no-repeat;
    }
    Rendered HTML
    Code:
    div id="topmenu">
    <table cellpadding="0" cellspacing="0" class="pill">
      <tr>
        <td class="pill_l">&nbsp;</td>
        <td class="pill_m"><div id="pillmenu">
            <ul class="menu">
              <li class="item1"><a href="http://cc.internetlinked.com/"><span>Home</span></a></li>
              <li class="item10"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=10"><span>About Us</span></a></li>
              <li class="item2"><a href="/index.php?option=com_content&amp;view=category&amp;id=1&amp;Itemid=2"><span>News &amp; Events</span></a></li>
              <li class="item3"><a href="/index.php?option=com_content&amp;view=category&amp;id=1&amp;Itemid=3"><span>Sermons</span></a></li>
              <li class="item11"><a href="#"><span>Online Bookstore</span></a></li>
              <li class="item12"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=12"><span>Ministries</span></a></li>
              <li class="item13"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=13"><span>Weekly Schedule</span></a></li>
              <li class="item14"><a href="#"><span>Contact Us</span></a></li>
            </ul>
          </div></td>
        <td class="pill_r">&nbsp;</td>
      </tr>
    </table>
    </div>
    <!-- topmenu -->
    <div id="submenu">
      <div class="moduletable">
        <ul class="menu">
          <li id="current" class="active item31"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=31"><span>Bible in Schools</span></a></li>
          <li class="item32"><a href="#"><span>Operation Christmas Child</span></a></li>
          <li class="item33"><a href="#"><span>Solomon Islands</span></a></li>
        </ul>
      </div>
    </div>
    <!-- submenu -->

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, on second thoughts ingnore this... I'm going to rewrite the topmenu and submenu structures... I originally copied this code from elsewhere but as I've come to understand how it all works I see that it isn't very elligant at all.

    That said, I wouldn't mind hearing why the css works properly for the submenu but not the Pillbar section :-)

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've totally cleaned up the code. It now all works perfectly

    HTML
    Code:
    <div id="topmenu">
      <ul class="menu_top">
        <li class="item1"><a href="http://cc.internetlinked.com/"><span>Home</span></a></li>
        <li id="current" class="active item10"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=10"><span>About Us</span></a></li>
        <li class="item2"><a href="/index.php?option=com_content&amp;view=category&amp;id=1&amp;Itemid=2"><span>News &amp; Events</span></a></li>
        <li class="item3"><a href="/index.php?option=com_content&amp;view=category&amp;id=1&amp;Itemid=3"><span>Sermons</span></a></li>
        <li class="item11"><a href="#"><span>Online Bookstore</span></a></li>
        <li class="item12"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=12"><span>Ministries</span></a></li>
        <li class="item13"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=13"><span>Weekly Schedule</span></a></li>
        <li class="item14"><a href="#"><span>Contact Us</span></a></li>
      </ul>
    </div>
    CSS
    Code:
    ul.menu_top
    {
    	margin: 0;
    	padding: 0;
    	white-space: nowrap;
    }
    .menu_top li
    {
    display: inline;
    list-style-type: none;
    }
    .menu_top a:link, .menu_top a:visited
    {
    	color: #fff;
    	text-decoration: none;
    	border-right-width: 2px;
    	border-right-style: solid;
    	border-right-color: #666666;
    }
    .menu_top a {
    	padding: 0 20px;
    	margin: 0px;
    	float: left;
    	font-size: 14px;
    	font-weight: bold;
    	display:block;
    	height: 42px;
    	line-height: 42px;
    }
    .menu_top a:hover, .menu_top li#current a
    {
    	color: #fff;
    	text-decoration: none;
    	background-image: url(../images/mw_menu_hover_bg.jpg);
    	background-repeat: repeat-x;
    	height: 42px;
    	line-height: 42px;
    }
    
    }
    I've got the sub horizontal menu working by creating it via a spearate menu


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
  •