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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with CSS drop down

    Hi forum.

    I have a problem with a drop down menu that i created. The page it is on is centered, and my drop down menu is made up of images, and a roll over state, which then displays the drop down menu.

    However my problem is that when my window is enlarged, the drop down boxes appear in the right place, but none of the links will work, they just dissapear before i can click them.

    When the window is made smaller, to fit the page (i.e. just the actual content on screen) the links will stay there. It seems that the drop downs <li> tags seem to think that the page is aligned left, so the links will be dissapear. Sorry, not really explaining it well. Here is the code to it though.

    The below is wrapped around my table on my page to make it center.
    Code:
    #main{
        text-align:left;
        position: relative;
        width:758px;
        margin:auto;
    }
    This next piece of code is for my images in the menu.
    Code:
    <tr>
        <td><img src="images/ptype0.jpg" alt="about0" name="menu6_img" width="140" height="20" border="0" usemap="#menu6_imgMap" /></td>
      </tr>
      <tr>
        <td><img src="images/room0.jpg" alt="about0" name="menu7_img" width="140" height="21" border="0" usemap="#menu7_imgMap" /></td>
      </tr>
      <tr>
        <td><img src="images/new0.jpg" alt="about0" name="menu8_img" width="140" height="21" border="0" usemap="#menu8_imgMap" /></td>
      </tr>
      <tr>
        <td><img src="images/count0.jpg" alt="about0" name="menu9_img" width="140" height="21" border="0" usemap="#menu9_imgMap" /></td>
      </tr>
    This piece of code is for the actually itself.

    Code:
    <div id="menu6" class="menu" style="position:absolute; top: 148px; left: 113px; width: 130px; height: 125px;">
    	<ul>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=1"?>"><span>&gt;</span> Unusual</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=2"?>"><span>&gt;</span> Derelict</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=3"?>"><span>&gt;</span> Bungalow</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=4"?>"><span>&gt;</span> Flat</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=5"?>"><span>&gt;</span> Terrace</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=6"?>"><span>&gt;</span> Semi-Detached</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=7"?>"><span>&gt;</span> Holiday Home</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=8"?>"><span>&gt;</span> Detached</a></li>
    	</ul>
    </div>
    
    <div id="menu7" class="menu" style="position: absolute; top: 169px; left: 113px; width: 110px; height: 125px;">
    	<ul>
    		<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=1"?>"><span>&gt;</span> Bedroom</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=2"?>"><span>&gt;</span> Bathroom</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=3"?>"><span>&gt;</span> Kitchen</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=4"?>"><span>&gt;</span> Living Room</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=5"?>"><span>&gt;</span> Loft</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=6"?>"><span>&gt;</span> Conservatory</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=7"?>"><span>&gt;</span> Other</a></li>
    	</ul>
    </div>
    <div id="menu8" class="menu" style="position: absolute; top: 189px; left: 113px; width: 110px; height: 35px;">
    	<ul>
    		<li><a href="#"><span>&gt;</span> Today</a></li>
    		<li><a href="#"><span>&gt;</span> This Week</a></li>
    	</ul>
    </div>
    <div id="menu9" class="menu" style="position: absolute; top: 211px; left: 113px; width: 130px;height: 125px;">
    	<ul>
    		<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=1"?>"><span>&gt;</span> United Kingdom</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=2"?>"><span>&gt;</span> France</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=3"?>"><span>&gt;</span> Italy</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=4"?>"><span>&gt;</span> Spain</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=5"?>"><span>&gt;</span> USA</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=6"?>"><span>&gt;</span> Australia</a></li>
    		<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=7"?>"><span>&gt;</span> New Zealand</a></li>
    	</ul>
    </div>
    
    <map name="menu6_imgMap">
      <area shape="rect" coords="1,1,110,20" href="#" onmouseover="down('menu6')" onmouseout="keep('menu6')">
    </map>
    <map name="menu7_imgMap">
      <area shape="rect" coords="1,1,110,22" href="#" onmouseover="down('menu7')" onmouseout="keep('menu7')">
    </map>
    <map name="menu8_imgMap">
      <area shape="rect" coords="1,1,110,21" href="#" onmouseover="down('menu8')" onmouseout="keep('menu8')">
    </map>
    <map name="menu9_imgMap">
      <area shape="rect" coords="1,1,110,20" href="#" onmouseover="down('menu9')" onmouseout="keep('menu9')">
    </map>
    And now the last part, which is the CSS behind the menu.
    Code:
    div.menu {	
    	visibility: hidden;
    	width: 110px;
    	border: 1px solid #D94200;
    }
    
    div.menu ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }	
    
    div.menu ul li {
    	display: inline;
    
    }	
    
    div.menu ul li a {
    	display: block;
    	margin: 0;
    	padding: 2px 4px;
    	border: 1px solid #D94200;
    	background: #DF6421;
    	
    	color: #fff;
    	text-decoration: none;
    }	
    
    div.menu ul li a span {
    	color: #F3C6A0;
    }	
    
    div.menu ul li a:hover {
    	background: #F69014;
    }	
    
    div.menu ul li a:hover span{
    	color: #fff;
    }

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link?

    Er... it would be really helpful to see this in action; got in online somewhere?

    With absolute positioning, it's always a bit tricky to judge by the markup and style alone, especially since you make heavy use of images.

    From the top, I find it peculiar that you don't use background images on the lists themselves and seem to instead position them over images defined somewhere else in the markup; this might have something to do with it.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    This article appears to be doing a similar thing to you and notes this mystery bug that I think may help you

    Mystery IE6 Bug: During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah I've seen that too - events just "fall through" and are handled by whatever's underneath. A background color usually sorts it out, though it has to be a solid rendered color - transparency or a transparent image doesn't sort it.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for your posts. I haven't tryed any of the solutions yet, as i re-did the menu myself due to a strict timescale for the site its for. I'll post back when i have tryed them to let you know if they have worked.

    Thanks


  •  

    Posting Permissions

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