The child flyout items are a little off. You will notice that the last child item has a little extra graphics, like it’s just about to start a new item. Similarly, as you hover over each child item, the entirety of the item does not turn gray, as there’s a little sliver of black still there. Why does this happen and how do I fix it?
If you hover over the last parent item, you’ll see that there are a lot of child items. So many child items, in fact, that I can’t see all of them (they go beyond the bottom of my screen). So what I want to do is if there is enough room set the child menu’s top to be 10px below the parent item’s top, but if there is not enough room (if the bottom of the menu will go beyond the bottom of the screen) set the child menu’s top to be the height of the screen minus the height of the menu (so it’s aligned to the bottom of the screen). How do I do this?
I use the z-index attribute to allow the menu to expand over into the main div, but I converted the webpage to use frames (http://home.roadrunner.com/~dstreb/hotdogframes/index.html), and this no longer works. Is there a way to make this work with frames?
I assume you want the position of the flyout to be at the end of the main menu and level with the trigger item. If so you need this code:
#navigation ul li.has_children ul{left:158px;top:-1px}
That should go after the original rule or modify the same properties in the original rule. (Note that your use of the class haschildren is not really required as the element will naturally be targeted anyway without using the class - just using the element name would have worked(#navigation ul li ul()) had you not added the other class everywhere).
I’ve spent another ten minutes looking for the extra graphic you mention and the only browser I can see that has a problem is IE7. It helps if you state the browsers you are having problems with when you post as there are too many for us to test all and locate the problem
If your problem is indeed IE7 (and if you feel you need to support it ?) then you will need to float the list and anchors to cure the gaps that appear.
e.g.
you will need to do this instead:
#navigation ul li.has_children ul li,
#navigation ul li.has_children ul li a{float:left;clear:left}
#navigation ul li.has_children ul li a{width:164px}
That’s the only sure way to close gaps in IE7 (and under).
If you hover over the last parent item, you’ll see that there are a lot of child items. So many child items, in fact, that I can’t see all of them (they go beyond the bottom of my screen). So what I want to do is if there is enough room set the child menu’s top to be 10px below the parent item’s top, but if there is not enough room (if the bottom of the menu will go beyond the bottom of the screen) set the child menu’s top to be the height of the screen minus the height of the menu (so it’s aligned to the bottom of the screen). How do I do this?
The only css options are to set the menu position beforehand. eg. you could set the bottom of the menu to be level with the last trigger item and extend upwards instead (use bottom:0;top:auto instead of just top:0 but you would need a special class on the last item to do that). If you want an automatic way to change the menu then you would need to look for scripted menu solutions with that facility built in as CSS cannot make decision like that.
I use the z-index attribute to allow the menu to expand over into the main div, but I converted the webpage to use frames (http://home.roadrunner.com/~dstreb/hotdogframes/index.html), and this no longer works. Is there a way to make this work with frames?
You can’t cross frame boundaries as they are self contained entitities (although there may be some complicated scripts that could manipulate things on the fly). No one (almost no one) uses frames these days as they are almost always a bad choice. Just use a normal site like most everybody else does (frames were common about 15 years ago when no one knew what they were doing).
The problem occurs when I view the site on I.E. 10 in compatibility view. It looks like it’s about to start another child item.
If I extend the “Hot dog” text on and on and on, the main pane will end up being longer than the sidebar pane. How do I extend the yellow background color of the side pane to prevent it from turning back to white?
Don’t use compatibility mode as its emulation is flawed and adds another broken version of IE into the mix. In compatibility mode you are making the browser behave much (not exactly though) like IE7 (as I mentioned above) - just don’t use it. Your issue is with IE7 and you should be using a real IE7 to check browser differences if you need to support IE7. A lot of sites are only supporting IE8+ these days.
Notwithstanding the above the fixes I gave you in my previous post (which it seems you didn’t try) will fix the issue in IE7 and IE in compatibility mode
If I extend the “Hot dog” text on and on and on, the main pane will end up being longer than the sidebar pane. How do I extend the yellow background color of the side pane to prevent it from turning back to white?
If you are only supporting IE8+ you can use display:table and display:table-cell properties to create equal column layouts but if you are supporting IE7 then the easiest solution is to make a yellow gif (200 x 5px) and repeat it down the y-axis of the body and then it will always be as long as the longest content in your page. There are other methods but they involve some complexity.
I’ve tried using display: table; and display: table-cell; but it’s not looking right. Both background colors will not cover the entire areas of the “cells.” What am I doing wrong?
Can you please show an example of how the colors do not fill the entire area of the cells and mention the browser in which you see it.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>Hot Dog</title>
<style type="text/css">
body {
margin:0;
}
#outer_div {
display:table;
width:100%;
}
#sidebar {
display:table-cell;
background-color:yellow;
width:200px;
}
#main {
display:table-cell;
color:yellow;
background-color: red;
font-family:"Comic Sans", "Comic Sans MS", cursive;
font-size:x-large;
}
#navigation {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
width:160px;
padding:1em;
}
#navigation ul {
margin:0;
padding:0;
background-color: red;
border:1px solid white;
border-bottom: none;
}
#navigation ul li {
list-style:none;
color: white;
border-bottom: 1px solid white;
cursor:pointer;
}
#navigation ul li:hover {
background-color: black;
background-repeat: repeat;
position:relative;
}
#navigation ul li a {
padding: 2px 3px;
text-decoration: none;
color: white;
display:block;
}
#navigation ul li a:hover {
color: yellow;
}
#navigation ul li.has_children a {
background:url('transparent_white_arrow.gif') no-repeat 97% 50%;
}
/* works with hovering over the parents and stays while navigating
through children; also renders #navigation ul li.has_children a:hover
unnecessary */
#navigation ul li.has_children:hover > a {
color: yellow;
background:url('transparent_yellow_arrow.gif') no-repeat 97% 50%;
}
#navigation ul li ul {
display:none;
position:absolute;
left:75px;
top:10px;
}
/* #navigation ul li ul { left: 158px; top: -1px; } */
#navigation ul li.has_children:hover ul {
display:block;
}
#navigation ul li.has_children ul li {
width:170px;
}
#navigation ul li.has_children ul li a {
background: none;
display: block;
}
#navigation ul li.has_children ul li a:hover {
position: relative;
}
#navigation ul li.has_children ul li.has_children a {
background:url('transparent_white_arrow.gif') no-repeat 97% 50%;
}
#navigation ul li.has_children ul li.has_children:hover > a {
background:url('transparent_yellow_arrow.gif') no-repeat 97% 50%;
}
#navigation ul li.has_children ul li,
#navigation ul li.has_children ul li a{float:left;clear:left}
#navigation ul li.has_children ul li a{width:164px}
</style>
</head>
<body>
<div id="outer_div">
<div id="sidebar">
<img src="http://home.roadrunner.com/~dstreb/hotdog/hot_dog_cart.gif">
<div id="navigation">
<ul>
<li class="has_children"><a href="#">Parent Item</a>
<ul>
<li><a href="#">Child Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="has_children"><a href="#">Parent Item</a>
<ul>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
</ul>
</li>
<li class="has_children"><a href="#">Parent Item</a>
<ul>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li class="has_children"><a href="#">Parent Item</a>
<ul>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
</ul>
</li>
<li class="has_children"><a href="#">Parent Item</a>
<ul>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="has_children"><a href="#">Parent Item</a>
<ul>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
<li><a href="#">Child Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="main">
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
Hot dog!<br /> Hot dog!<br /> Hot diggity dog!<br />
</div>
</div>
</body>
</html>
You didn’t remove the position:absolute from your rules which means that display:table-cell never gets actioned because absolute position takes priority over the display value (unless it is display:none).
See Ron’s example above for the correct way to do it
Thanks for jumping in Ron as I’ve been out all day and am a bit behind ;).
You need the html and body elements at 100% so that you can base the outer on that height. (100% height is safe here because you are using display:table where height is treated as a minimum. You cannot use this approach on normal divs that are not display:table.)
I’m setting background: none; for the anchors of the child and grandchild items, so why are the white triangles still appearing? I want to remove them.
Why can’t I get the background colors of the grandchild menus to red?
I’ve added a class of “has_child” to indicate which sub menus should have the arrow so you only need to target those with the images. The rest of the changes were removing code and letting the cascade take over.
That’s almost the way I want it, except when I hover the mouse over a child or grandchild menu, the parent or grandparent doesn’t stay black with a yellow triangle.
